//用户自定义选择器

 

    $(function(){

       // Define custom filter by extending $.expr[":"]

       $.expr[":"].greenbg = function(element) {

         return $(element).css("background-color") === "rgb(0, 128, 0)";

       };

       var n = $(":greenbg").length;

       console.log("There are " + n + " green divs");

    });

   <div style="width:10; height:10; background-color:green;"></div>

    <div style="width:10; height:10; background-color:black;"></div>

    <div style="width:10; height:10; background-color:blue;"></div>

 

------------------------------------------------------------jquery 选择器---------------------------------------------------

/属性选择器  

$("[attributeName='string2match']");

$("[attributeName^='str']");//匹配str开头所有元素

$("[attributeName$='str']");//匹配str结尾所有元素

$("[attributeName*='str']");//包含str所有元素

$("[attributeName~='str']");//包含str所有元素(包含空格隔开的，如：xxx 

str)

//复式属性选择器

 var n = $("form[name$='Office1']form[name^='admin']").length;

//位置选择器

$("li:even") //返回偶数成员值,0也是偶数

li:odd   //奇数

li:first //第一个元素 

li:last  //最后一个

li:eq(3) //返回第四个

li:gt(2)//返回匹配集合索引大于2的所有元素

li:lt(3)//小于3

//过滤选择器

:animated //选择当前正在执行动画所有元素

:header //选择所有标题元素 如：h1,h2,h3

:not //选择与选择器不匹配元素

//过滤表单元素

      $(function(){

        var n1 = $("input").length;//xuaninput的所有元素

        var n2 = $(":input").length;//包含dom

(input,textarea,select,button)所有元素 

        var n3 = $("form > *").length;//表单内所有元素

        var n4 = $(":text").length;//属性为text所有

        var n5 = $("input[type='text']").length;//属性为text所有

        console.log(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5);

      });

 

    </script>

    <form name="" method="post">

      <input type="text" />

      <input type="text" />

      <input type="text" />   

 <button>

    </form>

<button>

 

//可见性过滤器

jquery根据元素offsetWidth\offsetHeight属性判断一个元素是否可见

如果这个2个属性都为0，jquery认为该元素是隐藏，

元素样式为display:block,display:none jquery检测这些

  $(function(){

        var numInv = $(":text:hidden").length; //所有隐藏

        var numVis = $(":text:visible").length;//所有可见

        console.log(numInv);//1

        console.log(numVis);//1

      });

 <form name="" method="post">

      <input type="text" name="text1" style="display:none;"/>

      <input type="text" name="text2" style="offsetWidth:0; 

offsetHeight:0;"/>

      <input type="text" name="text3" style="display:block;/>

    </form>

//内容过滤器

:contains()

  $(function(){

        var jennies = $("p:contains('jenny')").length;

        console.log(jennies); // returns 2

      });

 <p>jenny smith</p>

    <p>jennyjones</p>

    <p>jim bob</p> 

//：has()

 $(function(){

        var jennies = $("p:contains('jenny')").length;

        console.log(jennies); // returns 2

        var hasdoemo = $("div:has('p')").attr("id");//在该元素的后代元素

中至少包含一个与指定的选择器匹配的元素

console.log(hasdoemo); //lt

      });

<div id="gt">

    <p>jenny smith</p>

    <p>jennyjones</p>

    <p>jim bob</p>

</div>

<div id="lt">

afdfd</div>

//不包含任何内容 :empty()

 $(function(){

        var nothing = $("p:empty").length;

        console.log(nothing); //returns 1

      });

div>

      <p></p>

      <p>something here</p>

    </div>

//:parent() 选择具有子元素的元素

    

    $(function(){

      console.log($("div:parent").attr("id"));//gt

    });

    

    <div id="lt">afdfd</div>

    <div id="gt">

     <p>jenny smith</p>

     <p>jennyjones</p>

     <p>jim bob</p>

    </div>

 

根据关系进行过滤

<script>

 $(function(){

       console.log( $("div span:first-child") )   // 选择每个父元素第一个

//[span#turkey, span#bear, span#martian]

       console.log( $("div span:last-child")   )   // 选择每个父元素最后

一个

//[span#hawk, span#horse, span#martian]

       console.log( $("div span:only-child")   )   // 选择每个父元素只有

唯一

//[span#martian]

       console.log( $("div span:nth-child(2)") )   //每个父元素第n个  

//[span#chicken, span#rabbit]

       console.log( $("div span:nth-child(2n+1)") ) //n=0.....n

//[span#turkey, span#parrot, span#hawk, span#bear, span#fox, span#horse, 

span#martian]

       console.log( $("div span:nth-child(even)") )

//[span#chicken, span#pigeon, span#rabbit, span#monkey]

      });

    </script>

  </head>

  <body>

    <div>

      <span id="turkey">Turkey</span>

      <span id="chicken">Chicken</span>

      <span id="parrot">Parrot</span> 

      <span id="pigeon">Pigeon</span>

      <span id="hawk">Hawk</span>

    </div>

    <div>

      <span id="bear">bear</span>

      <span id="rabbit">rabbit</span>

      <span id="fox">fox</span> 

      <span id="monkey">monkey</span>

      <span id="horse">horse</span>

    </div>

    <div>

      <span id="martian">martian</span>

    </div>