本系列说明:此系列主要总结jQuery基础知识,会持续更新,内容也会逐渐深入,欢迎关注!
jQuery选择器可以归类分为基本选择器,层级选择器,过滤选择器和表单选择器。通过jQuery选择器我们能够更快更方便的选择到对应的元素或者元素组,进行相关DOM节点操作。
一:jQuery基本选择器
1.id选择器 $('#id')
eg:$('#app')
2.class选择器 $('.class')
eg:$('.blue')
3.element选择器 $('element')
eg:$('p')
4.*选择器(*表示指定条件下所有元素) $('*')
eg:$('*')
5.并列选择器 $('#id,.class,element...')
eg:$('div,.blue,#app')
二:jQuery层级选择器
1.直系子元素选择器(parent>child)
eg:$('div>span') 直接被div包括的span元素
2.祖孙元素选择器(grandparent parent child)
eg:$('div p span') 逐级查询,首先div下查找p,然后p里面查找span
3.相邻兄弟元素选择器(prev+next)
eg:$('p+div') 选择到和p元素相同父元素且p后面的第一个div元素,类似于next()方法
4.所有兄弟元素选择器(prev~siblings)
eg:$('p~div') 选择到和p元素相同父元素且在p后面的所有div元素,类似jQuery的nextAll()方法
三:jQuery过滤选择器
1. 基本过滤选择器
(1):first和:last(取第一个,最后一个元素)
eg:$('p:first'),$('.active:first'),$('p:last'),$('.active:last')
(2):not(取非元素)
eg:$('div:not(.active)')
(3):even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)
eg:$('div:even') $('div:odd')
(4):eq(x) (取指定索引的元素,从0开始)
eg:$('li:eq(2)')
(5):gt(x)和:lt(x)(取大于x索引或小于x索引的元素)
eg:$('li:lt(2)') $('li:gt(2)')
(6):header(取H1~H6标题元素)
eg:$(':header')
2. 内容过滤选择器
(1):empty(取不包含子元素或文本为空的元素)
eg:$('P:empty')
(2):contains(text)(取包含指定字符串的元素)
eg:$(':contains(text)')
(3):has(selector)(取包含某些元素在内的元素)
eg:$('p:has(span)') $('div:has(span,p,a)')
(4):parent(取包含子元素或文本的元素,取的是该元素)
eg:$('div:parent')
3. 可见性过滤选择器
(1):hidden(取不可见的元素,即display:none或type=hidden的表单元素)
eg:$('div:hidden')
(2):visible(取可见的元素)
eg:$('div:visible')
4. 属性过滤选择器
(1)[attribute](取拥有attribute属性的元素)
eg:$('a[title]')
(2)[attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)
eg:$('a[class=item]') $('a[class!=item]')
(3)[attribute ^= value], [attribute $= value]和[attribute *= value](attribute属性值以value开始,以value结束,或包含value值)
eg:$('a[title^=jQuery]') $('a[title$=jQuery]') $('a[title*=jQuery]')
(4)[selector1][selector2](复合型属性过滤器,同时满足多个条件)
eg:$('a[title^=jQuery][class=item]')
5. 子元素过滤选择器
(1):first-child(第一个子元素)和:last-child(最后一个子元素)
eg:$('div:first-child') $('div:last-child') 第一个和最后一个div元素
(2):only-child(当该元素有且仅有一个子元素时)
eg:$('div:only-child') 有且只有一个子元素的div元素
(3):nth-child(x)(第x个元素,first-child和last-child为特殊)
eg:$('div:nth-child(x)')第X个元素 $('div:nth-child(even)')和$('div:nth-child(odd)') 从1开始,获取第偶数个或第奇数个div元素
$('div:nth-child(xn+y)')其中x>=0,y>=0
四:jQuery表单选择器(以下内容仅针对表单对象)
(1):enabled和:disabled(取可用或不可用元素,针对input, select, textarea元素)
eg:$('input:enabled') $('input:disabled')
(2):checked(取选中的input的type为radio单选框或者checkbox复选框)
(3):selected(取select下拉列表被选中的元素)
(4):input(取input,textarea,select,button元素)
(5):text(取单行文本框元素input的type="text")和:password(取密码框元素input的type="password")
(6):radio(取单选框元素input的type="radio")
(7):checkbox(取复选框元素input的type="checkbox")
(8):submit(取提交按钮元素input的type="checkbox")
(9):reset(取重置按钮元素input的type="reset")
(10):button(取按钮元素input的type="button")
(11):file(取上传域元素input的type="file")
(12):hidden(取不可见元素input的type="hidden")