jQuery 选择器

CSS选择器分类：

1.标签选择器：标签{}

2.ID选择器：#ID{}

3.类选择器：E.className{}

4.群组选择器：E1,E2,E3{}

5.后代选择器：E F{}

6.通配符选择器：*{}

7.伪类选择器：E:PseudoElements{}

8.子类选择器：E>F{}

9.临近选择器：E+F{}

10.属性选择器：E[attr]{}

　* 引入CSS到页面中的方式有3种：行内样式表、内部样式表、外部样式表

 

jQuery选择器分类：

1. 基本选择器：#id、.class、element、*

   $("#id");    //  id名
   
   $(".class");    //  class类名
   
   $("element");     //  元素名称

2. 层次选择器

   // 选取div里的所有的span
   $('div span'); 
   
   // 选取div下名为span的子元素
   $('div>span');
   
   // 选取class为one的下一个div同辈元素
   $('.one+div');
   
   // 选取class为one的下一个div同辈元素
   $('.one').next('div'); 
   
   // 选取id为two的元素后面所有的div同辈元素
   $('#two~div'); 
   
   // 选取id为two的元素后面所有的div同辈元素
   $('#two').nextAll('div'); 

3. 过滤选择器

   // 第1个div
   $('div:first'); 
   
   // 最后1个div
   $('div:last');
   
   // class非myClass的input元素
    $('input:not(.myClass)'); 
   
   // 索引为偶数的input元素
   $('input:even'); 
   
   // 索引为奇数的input元素
   $('input:odd'); 
   
   // 指定索引index的元素
    $('input:eq(index)'); 
   
   // 索引＞index的元素
   $('input:gt(index)'); 
   
   // 索引＜index的元素
   $('input:lt(index)'); 
   
   // 页面中所有的h标签
   $(':header'); 
   
   // 选取正在执行动画的div元素
   $('div:animated'); 
   
   // 选取当前获取焦点的元素
   $(':focus');

4. 内容过滤选择器

   // 选取文本含有“我”的div元素
   $('div:contains("我")'); 
   
   // 选取不包含子元素（包括文本）的div空元素
   $('div:empty'); 
   
   // 选取含有p元素的div元素
   $('div:has(p)'); 
   
   // 选取含有子元素（包括文本元素）的div元素
   $('div:parent'); 

5. 过滤性选择器

   // 选取所有不可见元素；包括input type='hidden'和 
   // style='display:none;' style='visibility:hidden';
   $(':hidden'); 
   
   // 选取所有可见元素
   $('div:visiable'); 
   
   //让不显示的div元素显示3000毫秒
   $('div:hidden').show(3000); 

6. 属性过滤选择器

   // 选取拥有属性id的div元素
   $('div[id]'); 
   
   // 选取属性title为‘test’的div元素
   $('div[title=test]');
   
   // 选取属性title不是‘test’的div元素
   $('div[title!=test]'); 
   
   // 选取属性title以‘test’开头的div元素
   $('div[title^=test]'); 
   
   // 选取属性title以‘test’结尾的div元素
   $('div[title$=test]'); 
   
   // 选取属性title含有‘test’的div元素
   $('div[title*=test]');
   
   // 选取属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素 
   $('div[title|="en"]'); 
   
   // 选取属性title用空格分隔的值中包含字符uk的元素
   $('div[title~="uk"]'); 
   
   // 选取拥有属性id，并且属性title以为‘test’结束的div元素
   $('div[id][title$="test"]'); 

7. 子元素的过滤选择器

   //:nth-child(index/even/odd/equation); 
   
   // :eq(index)：只匹配1个元素，下标从0开始；
   
   //nth-child(index)：中的index是从1开始的
   
   // 选取每个ul中的第1个li元素
   $('ul li:first-child'); 
   
   // 选取每个ul中的最后1个li元素
   $('ul li:last-child'); 
   
   // 在ul中选取唯一元素是li的元素
   $('ul li:only-child');

8. 表单对象属性过滤选择器

   // 选取id为form的表单内的所有可用的元素
   $('#form :enabled'); 
   
   // 选取id为form的表单内的所有不可用的元素
   $('#form :disabled'); 
   
   // 选取所有被选中的input元素
   $('input:checked');
   
   // 选取所有被选中的选项元素
   $('select option:selected'); 

9. 表单选择器

   $(':input'); 
   // 选取所有input、textarea、select、button元素
   
   $(':text'); 
   // 选取所有的单行文本框
   
   $(':password'); 
   // 选取所有的密码框
   
   $(':radio'); 
   // 选取所有的单选框
   
   $(':checkbox'); 
   // 选取所有的复选框
   
   $(':submit'); 
   // 选取所有的提交按钮
   
   $(':image');
   // 选取所有的图像按钮
   
   $(':reset'); 
   // 选取所有的重置按钮
   
   $(':button'); 
   // 选取所有的按钮
   
   $(':file'); 
   // 选取所有的上传域
   
   $(':hidden'); 
   // 选取所有的不可见元素

10. 选择器中含有特殊符号

    $('#id#b');     // ×
    
    $('#id[1]');     // ×
    
    // 正确的获取方式：
    
    $('#id\\#b');     // √
    
    $('#id\\[1\\]');     // √

11. 选取隐藏元素

    // 选取class为test的元素里边的隐藏元素
    $('.test :hidden'); 
    
    // 选取隐藏元素class为test的元素
    $('.test:hidden');

12. 其他选择器

    document.querySelector();
    
    document.querySelectorAll();