jQuery+javascriptの便利な小技まとめ
javascript初心者の私が勉強してみた内容を備忘録として残しておきます。
- 要素がある場合、ない場合で表示を変更する
- 要素の奇数にclassをつける
- 最後の要素に特定のclassが付いている場合にいじる
- よくあるトップへするするっと戻るボタン
- サイトを更新する毎に表示される画像をランダムに変更したい
- リンクを変更したい
- 半角数字だけ入力できるようにする
- jQueryのIE8以下の対応について
- 一部をスライドして出したり閉じたりするやつ
要素がある場合、ない場合で表示を変更する
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(function(){ if($("#selector").length == 0){ #selectorがない場合 } else { #selectorがある場合 } }); </script> |
例えば、#selectorにliが無い場合は、#selectorを非表示にするときは、
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ if($("#selector li").length == 0){ $('#selector').hide(); } }); </script> |
要素の奇数にclassをつける
#selector liの奇数にoddというclassをつける|
1 2 3 4 5 6 7 |
<script> $(function(){ $('#selector li:odd').addClass('odd'); }); </script> |
偶数の時のセレクタはli:evenにすれば取得できます。
最後の要素に特定のclassが付いている場合にいじる
もし#selector liの最後の要素に、oddというclassがついていたら、.lastItemにoddListというclassをつける
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ if($('#selector li:last-child').hasClass('odd')) { $('.lastItem').addClass('oddList'); } }); </script> |
よくあるトップへするするっと戻るボタン
ページの一番上にスムーズに移動させるリンクを作ります。|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function(){ $('.to-top').click(function() { $('html,body').animate({ scrollTop:0 }, 500); return false; }); }); </script> |
$(‘html,body’)は、scrollTopがクロスブラウザで効くように２つを指定しています。
return false;は決まり文句で、a要素がクリックされた時にjQueryだけが実行され、href属性は無視されます。
‘.to-top’の部分を、’a[href^=#]’に変更すれば、「aのhrefの#で始まるリンクが」というセレクタの指定になります。
サイトを更新する毎に表示される画像をランダムに変更したい
ヘッダーなどで、ブランドの画像を複数用意してき、更新の度に入れ替えて表示するようなするようなときに利用します。(Math.random()*2)だと、0以上2未満の整数が得られます。
*2の部分を増やせば、classが増えます。
|
1 2 3 4 5 6 7 8 |
<script> var = $selectImage = $('imageBox'), $(function(){ $selectImage.addClass('img0' + (Math.floor(Math.random()*2)+1)); }); </script> |
cssにて、画像を２つ用意しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.imageBox { width: 600px; height: 200px; } .img01 { background-image: url("../img/image01.jpg"); } .img02 { background-image: url("../img/image02.jpg"); } |
HTMLに表示をするdivを用意します。
|
1 2 3 4 5 |
<div class="imageBox"> </div> |
この部分が、
|
1 2 3 4 5 6 |
<div class="imageBox img01"> もしくは、 <div class="imageBox img02"> が、サイト更新の度にランダムで切り替わります。 |
リンクを変更したい
.newsのclassを探してきて、hrefの中を入れ替えるというやり方です。まずは変更したいリンクに、classを付与しておきます。
|
1 2 3 |
<a href="http://news.ko-zu.com" class="news">個人ブログへのリンク</a> |
attrを利用して、内容を入れ替えます。
attrは、指定した属性にvalueの値を設定することができます。
|
1 2 3 4 5 6 7 8 |
<script> var = $news = $body.find('.news'), $(function(){ $news.attr('href', 'http://example.com'); }); </script> |
ユーザーエージェントでURLを振り分けにた場合にURLを変更する場合で利用しました。
半角数字だけ入力できるようにする
フォームのテーブル部分を抜き出してみました。ポイントは、formにname属性を入れることと、inputにonblurを入れることで、選択が外れた時に、jsが動きます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<form name="textform"> <tr> <th>人数</th> <td> <input name="number" type="text" onblur="NumberCheck()"> <p>※半角数字でご入力ください。</p> </td> </tr> </form> |
半角数字にでない場合は、alertを出して、さらに、バリューを空にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function NumberCheck() { var str = document.textform.number.value; if( str.match( /[^0-9]+/ ) ) { alert("実施予定人数は、半角数字のみで入力して下さい。"); document.textbookform.number.value = ''; return 1; } return 0; } </script> |
document.textform.number.value; の意味は、
name=”textform というフォームの、name=”number” のついたinputの値を取得するという意味です。
jQueryのIE8以下の対応について
メモ的な内容ですが、一応書いておきます。クロスブラウザ対応がうりのjQueryですが、jQuery2系は、IE8以下を切り捨てています。その分読み込みが早いとのことです。
IE8以下も対応させる場合は、jQuery1.11.1が最終更新バージョンです。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
一部をスライドして出したり閉じたりするやつ
ボタンを押して、枠が広がるやつです。最初に、220px見せておき、ボタンを押すと440pxになる。その際、アニメーションで0.6秒で動作する。みたいな感じです。
「#ぼたん」を押すと、「#はこ」が全部みれます。もっと見るとも言えますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(function() { var flg = "default"; $("#はこ").height(220).css("overflow","hidden"); $("#ぼたん").click(function(){ if(flg == "default"){ $("#ぼたん").text("閉じる"); $(".はこ").animate({height: 440}, '600' ); flg = "changed"; }else{ $("#ぼたん").text("全てを見る"); $("#はこ").animate({height: 220}, '600' ); flg = "default"; } }); }); </script> |