jQueryの使い方のポイント

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

まず、最も大事な事はWEBページ上の場所は「$(セレクタ)」で指定ができるという事。
このセレクタという言葉どこかで聞いた事がありませんか？

セレクタで場所を特定する

そうです、CSSの指定の時に使いましたよね。
例えば、
要素指定なら「要素名{ }」、
ID属性なら「#id名{ }」、
class属性なら「.class名{ }」
の様に指定していたと思います。

これらを「$()」の中に記述します。
「$('要素名')」、「$('#id名')」、「$('.class名')」という風に。

header内のsectionなら、子孫セレクタの記述方法で「$('header section')」と指定できます。
また、li要素の最後にclass指定の「red」を適用したい時なら「$('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');」と指定できます。

上記2つのメソッドは解説されてるサイトが少ないのですが、特定の場所を指定したい時、とても重宝します。