jQuery选择器是其核心功能,按照选择的元素类别可以分为4种:
- 基本选择器:基于元素的id、CSS样式类、元素名称等使用基于css的选择器机制查找页面元素。
id选择器 根据元素id选择 $('#divid')选择id为divid的元素
标签选择器 根据元素的名称选择 $('a')选择所得<a>元素
css样式类选择器 根据应用到DOM元素的CSS类进行选择 $('.beg')选择所有css类为beg的元素
*通配符选择器 选择所有元素,使用通配符* $('*')选择页面所有元素
selector1,selector2,selector3 可以将几个选择器用“,”分隔开,会同时选择这个选择器匹配的内容 $('#divId,a,.beg')
- 层次选择器:通过DOM元素间的层次关系获取页面元素。
ancestor descendant(后代选择器) $('.beg div')选择css类为beg的元素中的所有<div>元素
parent>child(父子选择器) $('.myList>li')选择css类为myList元素中的直接子节点<li>对象
prev+next(相邻选择器) prev和next是两个同级别的元素,选中在prev元素后面的next元素 $('#hid+img')选择img元素
prev~siblings(平级选择器) 选择prev后面的根据siblings过滤的元素 $('#som~[title]')选择id为som后面所有带属性title的元素
- 过滤选择器:根据某类过滤规则进行元素的匹配。
基本过滤选择器
:first 匹配找到的第一个元素 $('tr:first')查找表格第一行
:last 匹配找到的最后一个元素 $('tr:last')查找表格的最后一行
:not(selector) 去除所有与给定选择器匹配的元素 $('input:not(:checked)')查找所有未选中的input元素
:odd 匹配所有牵引值为奇数的元素,从0开始。 $('input:odd')查找表格的1、3、5...行
:even 匹配所有牵引值为偶数的元素,从0开始。 $('tr:even')查找表格的2、4、6...行
:eq(index) 匹配一个给定索引值的元素 $('tr:eq(1)')查找第二行
:gt(index) 匹配所有大于给定索引值的元素,从0开始 $('tr:gt(0)')查找第二行、第三行......
:lt(index) 匹配结果集中索引小于N的元素 $('tr;lt(2)')查找第一行、第二行
:header 选择所有的h1/h2/h3一类的header标签 $(':header'),css('background','red')给页面内所有标题加上背景色
:animated 匹配所有正在执行动画效果的标签 $('#run').click(function(){$('div:not(:animated)').animate({left:'+=20'},1000);});针对不在执行动画效果的元素执行一个动画效果。
内容过滤选择器
:contains(text) 匹配包含给定文本的元素 $("div:contains('John')")查找所有包含‘John’的div元素。
:empty 匹配所有不包含子元素或者文本的空元素 $('td:empty')查找所有不包含子元素或者文本为空的td元素。
:has(selector) 匹配含有选择器所匹配的元素的元素 $('div:has(p)').addClass('test')给所有包含p元素的div元素添加一个test类。
:parent 匹配含有子元素或者文本的元素 $('td:parent')查找所有含有子元素或者文本的td元素
可见性过滤选择器
:hidden 匹配所有的不可见元素 $('tr:hidden')查找所有不可见的tr元素
会匹配如下几种格式的元素:
- 具有css属性display属性值为none的元素
- HTML表单元素中的隐藏域即type='hidden'的元素
- 宽度和高度被显示设置为0的元素
- 由于祖先元素为隐藏而导致无法在页面上的元素
:visible 匹配所有的可见元素 $('tr:visible')查找所有可见的tr元素
指在屏幕上占用布局空间的元素,可见性元素的宽度和高度大于0时显示。
css属性visibility:hidden或者是opacity:0被认为可见,因为他们仍然占用布局空间。
属性过滤选择器
[attribute] 匹配包含给定属性的元素 $('div[id]')查找所有含有id属性的div元素
[attribute=value] 匹配给定的属性是某个特定值的元素 $("input[name='newsletter']").attr('checked',true);
[attribute!=value] 匹配给定的属性不包含某个特定值的元素 $("input[name!='newsletter']").attr('checked',true);
[attribute^=value] 匹配给定的属性是以某些值开始的元素 $("input[name^='new']")
[attribute$=value] 匹配给定的属性是以某些值结尾的元素 $("input[name$='letter']")
[attribute*=value] 匹配给定的属性是以包含某些值的元素 $("input[name*='man']")
[attribute1][...][attributeN] 复合属性选择器,需要同时满足多个条件 $("input[id][name$='nam']")找到所有含有id属性,并且它的name属性是以man结尾的。
子元素过滤选择器
:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子元素或奇偶元素,从1开始。 $("ul li:nth-child(3n+1)")
:first-child 匹配第一个子元素 $("ul li:first-chlid") 在每个ul中查找第一个li
:last-child 匹配最后一个子元素 $("ul li:last-chlid")
:only-child 如果某个元素值父元素中惟一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。$("ul li:only-chlid") 在ul中查找是唯一子元素的li
表单对象属性性过滤器
:enabled 匹配所有可用元素 $('input:enabled')查找所有可用的input元素
:disabled 匹配所有不可用元素 $('input:disabled')查找所有不可用的input元素
:checked 匹配所有被选中元素(复选框、单选框等,不包括select中的option) $('input:checked')查找所有选中的复选框、单选按钮
:selected 匹配所有选中的option元素 $('select option:selected')查找所有选中的选项元素
- 表单选择器:可以在页面上快速定位某类表单对象。
:input 匹配所有input、textarea、select和button元素 $(':input')查找所有的input元素
:text 匹配所有的文本框 $(':text')查找所有文本框
:password 匹配所有的密码框 $(':password')查找所有密码框
:radio 匹配所有单选按钮 $(':radio')查找所有单选按钮
:checkbox 匹配所有复选框 $(':checked')查找所有复选框
:submit 匹配所有提交按钮 $(':submit')查找所有提交按钮
:image 匹配所有图像域 $(':image')匹配所有图像域
:reset 匹配所有重置按钮 $(':reset')匹配所有重置按钮
:button 匹配所有按钮 $(':button')匹配所有按钮
:file 匹配所有文档域 $(':file')查找所有文件域