jQuery学習大総括(二)jQueryセレクタ完全紹介.

30864 ワード

jQueryセレクタは、ページ要素の入手を容易にし、柔軟にし、開発者のストレスを大幅に軽減します.ビルを建てるように、レンガがなければ、ビルを建てることができない.要素が得られないと、他のさまざまな操作について話しますか?jQueryセレクタの重要性が分かる.もちろんすべてのセレクタを一気に身につけるのも難しいが、これは実践と蓄積に頼らなければならない.
今、私たちは正式にjQueryセレクタの勉強に入ります.jQueryセレクタを分類学習し、jQueryセレクタを以下のように分類します.
1、基本セレクタ
idは、要素IDに基づいてを選択する.
Elementname要素名に基づいて選択

classname要素cssクラス名に基づいて選択

例:
<inputtype="text"id="ID"value="  ID  "/><a>        </a><inputtype="text"class="classname"value="    css    "/>
jQuery("#ID").val(); jQuery("a").text(); jQuery(".classname").val();

を選択します.以上の3つが最も一般的なセレクタであり、IDセレクタが最も効率的であり、可能な限り使用すべきである.
2、階層セレクタ
ancestor descendant祖先と子孫セレクタparent>child親子ノードセレクタprev+next同レベルセレクタprev~siblingsフィルタセレクタ例:
<divid="divTest"><inputtype="text"value="  "/><inputid="next"type="text"/><inputtype="text"value="  "/><inputtype="text"title="  "value="  "/><a>1</a><a>2</a></div>
//  div  a        12 jQuery("#divTest a").text();//  div            jQuery("#divTest>input").val();//  id next                jQuery("#next+input").val();//  ,    title          jQuery("#next~[title]").val();

3、基本フィルタセレクタ
:firstは第1要素を見つけた
:lastは最後の要素を見つけました.
:not(selector)所与のセレクタに一致する要素を除去する
:even一致インデックス値が偶数の要素は0からカウントを開始します.
:oddマッチングインデックス値が奇数の要素は0からカウントを開始する.
:eq(index)は、0からまでの所与のインデックス値要素に一致する.
:gt(index)マッチングが所与のインデックス値要素より大きい
:lt(index)マッチングが所与のインデックス値要素より小さい
:header選択h 1,h 2,h 3類のラベル(現在使用されていない):animatedは、アニメーション効果を実行している要素(現在は使用されていません)に一致します.
例:
<divid="divTest"><ul><li>  </li><li>  </li><li>  </li><li>  </li><inputtype="radio"value="  "checked="checked"/><inputtype="radio"value="   "/></ul></div>
//   li         jQuery("li:first").text();//    li         jQuery("li:last").text();//input              jQuery("li input:not(:checked)").val();//      li          jQuery("li:even").text();//      li          jQuery("li:odd").text();//    2 li          jQuery("li:gt(2)").text();//    1 li          jQuery("li:lt(1)").text();

4、コンテンツフィルタ
:contains(text)は、所与のテキストを含む要素に一致する.
:emptyは、サブエレメントまたはテキストを含まないすべての空のエレメントに一致します.
:has(selector)マッチングセレクタを含むマッチング要素例:
<divid="Test"><ul><li>hyip  </li><li>hyip</li><li></li><li>  </li><li><a>  </a></li></ul></div>
//  hyip li       hyip   hyip jQuery("li:contains('hyip')").text();//     li    li         jQuery("li:empty+li").text();//  a   li          jQuery("li:has(a)").text();

5、可視フィルタ
:hiddenマッチング非表示要素:visibleは可視要素に一致する
例:
<ul><li>  </li><listyle="display:none;">   </li></ul>
//    li           jQuery("li:hidden").text();//   li          jQuery("li:visible").text();

6、属性フィルタ
[attribute=value]一致属性は、与えられた値の要素である.
[attribute^=value]一致属性は、与えられた値から始まる要素である.
[attribute$=value]一致属性は、与えられた値で終了する要素である.
[attribute*=value]一致属性は、与えられた値の要素を含む.
例:
<inputtype="text"name="hyipinvest"value="hyip  "/><inputtype="text"name="investhyip"value="  hyip"/><inputtype="text"name="google"value="HYIP"/>
//name hyipinvest      hyip   alert(jQuery("input[name='hyipinvest']").val());//name hyip        hyip   alert(jQuery("input[name^='hyip']").val());//name hyip          hyip alert(jQuery("input[name$='hyip']").val());//name  oo      HYIP alert(jQuery("input[name*='oo']").val());

jQueryセレクタはここまでまとめられていますが、これらは基本的に学習過程で出会ったもので、まだほとんどまとめられていません.しばらく実践して、jQueryセレクタを使いこなせると信じています.