jQurey 选择器

选择器 :

基本选择器:

 

1. $("*").css("border","3px solid red");  查找文档中的每一个元素（包括 head, body 等）
2. $(".myClass").css("border","3px solid red"); 类选择器
3. $("div").css("border","9px solid red");  标签选择器,选择所有div标签
4. $("#myDiv").css("border","3px solid red");  id 选择器
5. $("div,span#fuck,p.myClass").css("border","3px solid red"); 分组选择器,div,span#fuck,p.myClass 都会被选择

分层选择器:

 

1. $("ul.topnav > li").css("border", "3px double red");  只选择 ul.topnav 的li子元素,子孙元素不选取
2. $("form input").css("border", "2px dotted blue");  选取  form 的所有 input 的子孙元素
3. $("label + input").css("color", "blue");  选取label后的第一个是input的兄弟节点
4. $("#prev ~ div").css("border", "3px groove blue"); 选取label后的所有是div 的兄弟节点

基本筛选:

 

1. $("div:animated").toggleClass("colored");   正在进行动画的标签.

   function animateIt() {
      $("#mover").slideToggle("slow", animateIt);  回调animateIt函数
   }
   animateIt(); 不停的滑入滑出

2. $("td:eq(-2)").css("color", "red");  选择td 集合中的倒数第二个,index为正数是,从0开始计数,类似数组
3. $("tr:even").css("background-color", "#bbbbff"); 从0开始计数,选择元素集合中的偶数的元素.
4. $("tr:odd").css("background-color", "#bbbbff"); 从0开始计数,选择元素集合中的奇数的元素.
5. $("tr:first").css("font-style", "italic");   :first伪类选择器相当于:eq(0) 总共只会选择一个元素,但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素

6. jQuery( ":gt(index)" )  所有大于给定index（索引值）的元素。
   $( "td:gt(-2)" ).css( "color", "red" );  -index: 从0开始计数的索引值。所以倒数第二以后的只有倒数第一

7. $(":header").css({ background:'#CCC', color:'blue' })   选择所有的标题元素  h1,h2,h3
8. $("div:lang(en)")将匹配
    and 

   （和他们的后代

   ），但不包括
9. $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'}); 和first 相反
10. jQuery( ":lt(index)" )   和 :gt相反,选取小于索引值的
11. $("input:not(:checked) + span").css("background-color", "yellow");  :not 除了被checked的 input 元素
12. $(":root") 选择的元素一样， 永远是元素。

    $( "" ).html( $( ":root" )[0].nodeName ).appendTo( "#log" );
    产生一个 HTML 标签  添加到 id=log的元素,作为last子元素

13.  $( "p:target" )  给定的URI http://example.com/#foo，将选择

    元素。

内容筛选:

 

 

1. $("div:contains('John')").css("text-decoration", "underline");  div 内含有指定子文本的div元素
2. $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');  :empty选择所有没有子元素得到元素,包括文本节点
3. $("div:has(p)").addClass("test");  div 后代元素中有 p元素
4. $("td:parent").fadeTo(1500, 0.3);  选择所有含有子元素或者文本的td元素。 !!!子元素为文本也算
5. $("div:hidden").show(3000);   所有隐藏的div 元素将显示  隐藏条件 : 1.父元素隐藏,2.display:none ;3宽和高都是0 ;4 中type='hidden' //
   不算隐藏
6. $("div:visible").click(function(){ $(this).css('background','red')}); 所有可见的div元素添加click事件
7. $("div span:first-child")   选择所有父级元素下的第一个子元素。:first 是元素集合中的第一个元素->相反[ (":last-child") ]
8. $("span:first-of-type") ->相反[ (":last--of-type") ]

     
    四个子元素 中选择第一个span 
       Corey, <---就是它
       Yehuda,
       Adam,
       Todd
     
     
    四个子元素 中选择第一个span
       Nobody,
       Jörn,  <---就是它
       Scott,
       Timo
     
   
      选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前的选择一个。

    

9.  $("ul li:nth-child(2)")  选择的他们所有父元素的第n个子元素。

10. $("ul li:nth-last-child(2)")  计数从最后一个元素开始到第一个。

11. $("div button:only-child") 某个元素是其父元素的唯一子元素

表单筛选 : 

1. $(":button")   =$("button, input[type='button']")所有的button 元素

2. $(':checkbox')= $('[type=checkbox]') 

3. $( "input:checked" ).length;   选择器适用于复选框 （checkbox）

4. $("input:disabled")  input 被禁用的

5. $('input:enabled')   检查元素的disabled属性是否严格等于false 
6. $(:not([disabled])) 检查是disabled 属性（attribute）没有被设置
7. $(':focus')等同为$('*:focus') 获取焦点的元素
8. $(':file') 等同于 $('*:file')，所以应该使用$('input:file')
9. $("input:image") 
10. $(":input");  $(':password')  jQuery( ":radio" )