jquery选择器,及过滤选择器

一。基本选择器

选择器 描述 示例
#id 根据ID匹配元素 $('#test')
.class 根据class匹配元素 $('.test')
element 根据元素名匹配元素 $('p')
* 匹配所有元素 $('*')
selector1,selector3,selector2, 将匹配到的元素合并并返回 $('.text,p,#one,div')

二。层次选择器

选择器 描述 示例
$('ancestor descendant') 选取ancestor 元素里所有descendant后代元素 $('div p ')
$('parent>child') 选取parent的子元素chlid $('div>p')
$('prev+next') 选取紧跟prev的next元素 $('.text+p')class为text的类与p为同辈元素
$('prev~siblings') 选取prev后所有siblings元素 $('#text~div')text后的所有div同辈元素

注:$('parent>child'),选择parent元素下的子元素child,其跟后代选择器$("ancestor descendant")是有区别的,前者只能选择到子元素,而后者能选择到所有后代元素。

三。基本过滤选择器

选择器 描述 示例
:first 选取第一个元素 $('div:first')
:last 选取最后一个元素 $('div:last')
:not(selector) 去除所有选择器匹配的元素 $('div:not(.text)')选取<div>中class不是text的元素
:even/:odd 选取所有索引值为偶数/j奇数的元素,从 0 开始计数 $("tr:even")/$("tr:odd")索引等于偶数/奇数的tr元素
:eq(index) 选取索引等于index的元素 $('input:eq(1)')索引等于1的input元素
:gt(index) 选取索引大于index的元素 $('input:gt(1)')索引大于1的input元素
:it(index) 选取索引小于index的元素 $('input:gt(1)')索引小于1的input元素
:header 选取所有标题元素 $(':header')如<h1><h2><h3><h4>
 :focus  选取当前焦点的元素 $(';focus') 
:animated 选取当前正在执行的动画元素 $('div:ainmated')

四:内容过滤选择器

选择器 描述 示例
:contains(text) 选取含有text内容的元素 $('div:contains(‘我’)')
:empty 选取不含有子元素 $('div:empty')
:has(selector) 选取还有选择器所匹配元素的元素 $('div:has(p)')选取含有<p>的<div>元素
:parent 选取含有子元素活文本元素 $('div:parent')

五:可见性过滤器

选择器 内容 示例
:hidden 选取所有不可见的元素 $(':hidden')
:visible 选取所有可见元素 $(':visible')

不可见元素:css样式中dispay属性为none,使用hide()函数,typle.style.visibility属性为hidden等元素

猜你喜欢

转载自18633917479.iteye.com/blog/2364201
今日推荐