jQueryで油断しがちな強力なセレクタとフィルタ

jQueryではセレクタは全体的にCSS 3のセレクタを含んでいますが、いくつかの面ではCSS 3のセレクタのため、様々なセレクタを使用しているため、最後に目標を達成することができますが、プロジェクトでは、より少ないコード量を行うために、特定のセレクタを使用して、人為的な判断を減らすほうが試してみる価値があるようです.
1>:not(selector)とnot(expr|ele|fn)
:not(selector) 
not(expr|ele|fn)

$("input:not(:checked)")

not関数の使い方

$("p").not('#selected') /*     */

$("p").not( $("#selected")[0] ) /*   js DOM     jQuery  */

$('p').not(document.getElementById('selected'))

$("p").not(function(index){ //    
    
    return $(p).get(index)==$('#selected');
})

2>:eq(index)とeq(-index|index)

$("tr:eq(1)") #            0  

$("p").eq(1) #   0  
$("p").eq(-1) #        ，     -1

3>:gt(index)とlt:(index)

$("tr:gt(0)") #      

$("tr:lt(5)") #      

4>:アニメーション状態の要素をフィルタするanimated
ここでは、アニメーションが停止しているかどうかを判断していないため、アニメーションのドロップダウンメニューを作るときに点滅しやすい人が多い.

 $("div:not(:animated)").animate({ left: "+=20" }, 1000); //         ，         is  
 
 #      
 
 $('ul#dropmenu').hover(function(e){
     if(!$(this).is(':animated'))  /**           ，      stop,            */
     {
     $('ul#dropmenu').slideDown();
     }
 },function(e){
      if(!$(this).is(':animated'))
     {
       $('ul#dropmenu').slideUp();
     }
 });

5>:hiddenと:visibble
:hiddenこの属性は主に2のDOMに一致するため、1つはinput[type=hidden]で、もう1つはcss display:hiddenで、特に後者は重点的に使用して、このように切り替えの効果をすることができます
:visibleはあまり重要ではありません.無視できます.

$("tr:hidden") //  css display=hidden

$("input:hidden")  //    

6>:emptyとempty()
:emptyは、サブエレメントまたはテキストを含まないすべての空のエレメントに一致しますが、empty()は、コンテンツを削除するために使用され、一致するエレメントセット内のすべてのサブノードを削除します.

$("td:empty")
$("p").empty();//    $('p').html('');

7>:has(selector)とhas(selector|element)
フィルタリングに使用

$('li').has('ul').css('background-color', 'red'); //     ul  li
$('li:has("ul"').css('background-color',red);

8>andself()
自分を含めて、通常は回馬銃を殺すために使われています.例えば、兄弟のノードを見つけて自分を加えています.

<div><p>First Paragraph</p><p>Second Paragraph</p></div>
$("div").find("p").andSelf().addClass("border"); // div    

9.siblings([selector]),prevAll([selector]),nextAll([selector]);
兄弟ノードの取得
10.slice(start,end)
スライスフィルタ
HTMLコード:

<p>Hello</p><p>cruel</p><p>World</p>

jQueryコード:

$("p").slice(0, 1).wrapInner("<b></b>");

結果

[ <p><b>Hello</b></p> ]