jQuery 选择器

1. 基本选择器

$('#violet'); // id 选择器$(".violet"); // class 选择器$("div")// element 选择器，遍历 HTML 元素$("form *"); // * 选择器，遍历所有元素$("p, div").css("margin", "0"); //并列选择器

2. 层级选择器

//子选择器$('div > p'); //选择所有 div 元素里面的子元素 p// 后代选择器$('div  p'); //选择所有 div 元素里面的 p 元素//相邻兄弟选择器$(".prev + div"); //选取 prev 后面的第一个的 div 兄弟节点//一般相邻选择器$(".prev ~ div"); //选取 prev 后面的所有的 div 兄弟节点

3. 基本筛选选择器

$(".div:first"); //找到第一个 div$(".div:last"); //找到最后一个 div$(".div:even"); //:even 选择所引值为偶数的元素，从 0 开始计数$(".div:odd"); //:odd 选择所引值为奇数的元素，从 0 开始计数$(".aaron:eq(2)"); //:eq 选择单个，从 0 开始索引$(".aaron:gt(3)"); //:gt 选择匹配集合中所有索引值大于给定 index 参数的元素$(".aaron:lt(2)"); //:lt 选择匹配集合中所有索引值小于给定 index 参数的元素,与 :gt 相反//选中所有紧接着没有checked属性的input元素后的p元素$("input:not(:checked) + p"); //:not 选择所有元素去除不匹配给定的选择器的元素

4. 内容筛选选择器

//选择所有包含 “指定文本” 的元素，如果 :contains 匹配的文本包含在元素的子元素中，同样认为是符合条件的$(".div:contains('violet-gem')"); //查找所有class='div' 中 DOM 元素中包含文本 "violet-gem" 的元素节点//选择元素中至少包含 “指定选择器” 的元素$(".div:has(span)"); //查找所有 class='div' 中 DOM 元素中包含 "span" 的元素节点//选择所有含有子元素或者文件的元素$("a:parent"); //选择所有包含子元素或者文本的 a 元素//选择所有没有子元素的元素（包含文本节点）$("a:empty"); //找到 a 元素下面的所有空节点(没有子元素)

5. 可见性筛选选择器

$(":visible"); //选择所有显示的元素$(":hidden"); //选择所有隐藏的元素

6. 属性筛选选择器

$('div[name=p1]'); //查找所有 div 中，属性 name=p1 的div元素$('div[p2]'); //查找所有 div 中，有属性 p2 的 div 元素$('div[name|="-"]'); //查找所有 div 中，有属性 name 中的值只包含一个连字符 “-” 的 div 元素$('div[name~="a"]'); //查找所有 div 中，有属性 name 中的值包含一个连字符“空”和 “a” 的 div 元素$('div[name^=violet]'); //查找所有 div 中，属性 name 的值是用 violet 开头的$('div[name$=violet]'); //查找所有 div 中，属性 name 的值是用 violet 结尾的$('div[name*="violet"]'); //查找所有 div 中，有属性 name 中的值包含一个 violet 字符串的div元素//选择不存在指定属性，或者指定的属性值不等于给定值的元素$('div[attr!="true"]'); //查找所有 div 中，有属性 attr 中的值没有包含 "true" 的 div

7. 子元素筛选选择器

//针对所有父级下的第一个$('.first-div a:first-child'); //查找 class="first-div" 下的第一个 a 元素//针对所有父级下的最后一个//如果只有一个元素的话，last也是第一个元素$('.first-div a:last-child'); //查找 class="first-div" 下的最后一个 a 元素$('.first-div a:only-child'); //查找 class="first-div" 下的只有一个子元素的 a 元素$('.last-div a:nth-child(2)'); //查找 class="last-div" 下的第二个a元素$('.last-div a:nth-last-child(2)'); //查找 class="last-div" 下的倒数第二个 a 元素// 注意事项：//// 1. :first 只匹配一个单独的元素，但是 :first-child 选择器可以匹配多个：即为每个父级元素匹配第一个子元素，这相当于 :nth-child(1)// 2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素// 3. 如果子元素只有一个的话，:first-child与:last-child是同一个// 4. :only-child 匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配// 5. jQuery 实现 :nth-child(n) 是严格来自 CSS 规范，所以 n 值是“索引”，也就是说，从1开始计数，:nth-child(index) 从 1 开始的，而 eq(index) 是从 0 开始的// 6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

8. 表单元素选择器

//:input 选择器基本上选择所有表单控件$(':input'); //查找所有 input, textarea, select 和 button 元素$('input:text'); //匹配所有 input 元素中类型为 text 的 input 元素$('input:password'); //匹配所有 input 元素中类型为 password 的 input 元素$('input:radio'); //匹配所有 input 元素中的单选按钮,并选中$('input:checkbox'); //匹配所有 input 元素中的复选按钮,并选中$('input:submit'); //匹配所有 input 元素中的提交的按钮,修改背景颜色$('input:image'); //匹配所有 input 元素中的图像类型的元素,修改背景颜色$('input:button'); //匹配所有 input 元素中类型为按钮的元素$('input:file'); //匹配所有 input 元素中类型为 file 的元素// 注意事项：// 除了 input 筛选选择器，几乎每个表单类别筛选器都对应一个 input 元素的 type 值，大部分表单类别筛选器可以使用属性筛选器替换，比如 $(':password') == $('[type=password]')

9. 表单对象属性筛选选择器

$('input:enabled'); //查找所有 input 所有可用的（未被禁用的元素）input 元素$('input:disabled'); //查找所有 input 所有不可用的（被禁用的元素）input 元素//移除 input 的 checked 属性$('input:checked').removeAttr('checked'); //查找所有 input 所有勾选的元素(单选框,复选框)//删除 option 的 selected 属性$('option:selected').remove('selected'); //查找所有 option 元素中,有 selected 属性被选中的选项// 注意事项：//// 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器// 在某些浏览器中，选择器 :checked 可能会错误选取到 <option> 元素，所以保险起见换用选择器 input:checked ，确保只会选取 <input> 元素

10. 特殊选择器this

// this 是 JavaScript 中的关键字，表示当前的上下文对象是一个 html 对象，可以调用 html 对象所拥有的属性和方法。// $(this),代表的上下文对象是一个 jquery 的上下文对象，可以调用 jQuery 的方法和属性值。var $this= $(this); //要使用 $this 时需要把 this 加工成 jQuery 对象 $this//JavaScript 例：var p1 = document.getElementById('test1');p1.addEventListener('click',function(){    //直接通过dom的方法改变颜色    this.style.color = "red";},false); //jQuery 例：$('#violet').click(function(){    //通过包装成jQuery对象改变颜色    $(this).css('color','blue');})