jQuery+javascriptの便利な小技まとめ

javascript初心者の私が勉強してみた内容を備忘録として残しておきます。

  1. 要素がある場合、ない場合で表示を変更する
  2. 要素の奇数にclassをつける
  3. 最後の要素に特定のclassが付いている場合にいじる
  4. よくあるトップへするするっと戻るボタン
  5. サイトを更新する毎に表示される画像をランダムに変更したい
  6. リンクを変更したい
  7. 半角数字だけ入力できるようにする
  8. jQueryのIE8以下の対応について
  9. 一部をスライドして出したり閉じたりするやつ

要素がある場合、ない場合で表示を変更する


例えば、#selectorにliが無い場合は、#selectorを非表示にするときは、


要素の奇数にclassをつける

#selector liの奇数にoddというclassをつける

偶数の時のセレクタはli:evenにすれば取得できます。

最後の要素に特定のclassが付いている場合にいじる

もし#selector liの最後の要素に、oddというclassがついていたら、
.lastItemにoddListというclassをつける


よくあるトップへするするっと戻るボタン

ページの一番上にスムーズに移動させるリンクを作ります。

$(‘html,body’)は、scrollTopがクロスブラウザで効くように2つを指定しています。
return false;は決まり文句で、a要素がクリックされた時にjQueryだけが実行され、href属性は無視されます。
‘.to-top’の部分を、’a[href^=#]’に変更すれば、「aのhrefの#で始まるリンクが」というセレクタの指定になります。

サイトを更新する毎に表示される画像をランダムに変更したい

ヘッダーなどで、ブランドの画像を複数用意してき、更新の度に入れ替えて表示するようなするようなときに利用します。


(Math.random()*2)だと、0以上2未満の整数が得られます。
*2の部分を増やせば、classが増えます。


cssにて、画像を2つ用意しておきます。


HTMLに表示をするdivを用意します。

この部分が、


リンクを変更したい

.newsのclassを探してきて、hrefの中を入れ替えるというやり方です。

まずは変更したいリンクに、classを付与しておきます。

attrを利用して、内容を入れ替えます。
attrは、指定した属性にvalueの値を設定することができます。

ユーザーエージェントでURLを振り分けにた場合にURLを変更する場合で利用しました。

半角数字だけ入力できるようにする

フォームのテーブル部分を抜き出してみました。
ポイントは、formにname属性を入れることと、inputにonblurを入れることで、選択が外れた時に、jsが動きます。

半角数字にでない場合は、alertを出して、さらに、バリューを空にします。

document.textform.number.value; の意味は、
name=”textform というフォームの、name=”number” のついたinputの値を取得するという意味です。

jQueryのIE8以下の対応について

メモ的な内容ですが、一応書いておきます。
クロスブラウザ対応がうりのjQueryですが、jQuery2系は、IE8以下を切り捨てています。その分読み込みが早いとのことです。
IE8以下も対応させる場合は、jQuery1.11.1が最終更新バージョンです。



一部をスライドして出したり閉じたりするやつ

ボタンを押して、枠が広がるやつです。

最初に、220px見せておき、ボタンを押すと440pxになる。その際、アニメーションで0.6秒で動作する。みたいな感じです。
「#ぼたん」を押すと、「#はこ」が全部みれます。もっと見るとも言えますね。