jQueryの使い方のポイント

jQuertyJavascriptと違い色んな機能があり記述方法が楽になると同時に、WEBページに対し、色んなコントロールができます。
とはいえ、使い方がよく解らないと思われてるのではないでしょうか?そこで jQuertyを使うためのいくつかのミソを記述したいと思います。

まず、最も大事な事はWEBページ上の場所は「$(セレクタ)」で指定ができるという事。
このセレクタという言葉どこかで聞いた事がありませんか?
..そうです、CSSの指定の時に使われてますよね。
例えば、要素指定なら「要素名{ }」、ID属性なら「#id名{ }」、class属性なら「.class名{ }」の様に指定していたと思います。
この方法がそっくり使えるのです。
$('要素名')」、「$('#id名')」、「$('.class名')」の様に。

子孫セレクタとしてheader内のsectionなら「$('header section')」と、liの最後の要素に「red」classを適用したい時なら「$('li:last-child').addClass('red');」のように指定できます。
また、「red」classを適用した要素を「blue」classに変更したい場合は、「$('.red').removeClass('red').addClass('blue') ;」と指定できます。

また、メソッドでは、「.html()」や「.click()」などがありますが、それ以外に私がよく使う便利なメソッドに、「.eq(インデックス番号)」や「.not('属性')」があります。

.eq(インデックス番号)」は複数のセレクタに対し、何番目かを指定する事が出来ます。
li要素が複数あって、3番目のliに対し「red」というclassを適用したい場合は、「$('li').eq(2).addClass('red');」と指定します。

そして、「.not(属性)」は該当するセレクタの中で、特定の属性以外を指定する事が出来ます。
li要素の「red」classを適用した要素以外に、「blue」classを適用したい場合は、「$('li').not('.red').addClass('blue');」と指定できます。

前の記事

jQueryの使用方法について

次の記事

Font Awesomeの使い方