您的位置:首页 > Web前端 > JQuery

[转]jquery 常用的选择器

2016-12-06 10:17 274 查看
元素选择器

$("#box")  //选择id值等于box的元素,id值是唯一的,如果出现多个相同id的元素,那么只获取第一个元素

$("div")  //选择所有的div标签元素,返回div元素数组

$(".box")  //选择使用box类的css的所有元素

$("*")  //选择文档中所有的元素

$("p.intro")  //选取所有 class="intro" 的 <p> 元素

$("p#demo")  //选取所有 id="demo" 的 <p> 元素


属性选择器

$("[href]")  //选取所有带有 href 属性的元素

$("[href='#']")  //选取所有带有 href 值等于 "#" 的元素

$("[href!='#']")  //选取所有带有 href 值不等于 "#" 的元素

$("[href$='.jpg']")  //选取所有 href 值以 ".jpg" 结尾的元素


层级选择器

$("div input")  //选择所有div里的input元素

$("#box > *")  //选择id值为box里的所有子元素

$("div > li")  //选择div下第一层的li。


例如:

<div>
<li>1</li><!-- 返回我 -->
<li>2</li><!-- 返回我 -->
<span>3</span>
<ul>
<li>4</li>
</ul>
</div>
<li>5</li>


$("li + input")  //选择所有li标签兄弟节点下面是b标签的,返回b标签。
例如:

<li>1</li>
<b>2</b><!-- 返回我 -->
<b>3</b>
<b>4</b>
<li>5</li>
<b>6</b><!-- 返回我 -->


$(“box ~ li”) //同胞选择器,返回box下第一层的li

<div>
<li>1</li><!-- 返回我 -->
<li>2</li><!-- 返回我 -->
<span>3</span>
<ul>
<li>4</li>
</ul>
</div>


过滤选择器

$("li:first")  //选择所有li元素的第一个

$("li:last")  //选择所有li元素的最后一个

$("li:even")  //选择所有的li元素中的第0,2,4...个元素,从0开始计算。

$("li:odd")  //选择所有的li元素的第1,3,5...个元素,从0开始计算。

$("li:eq(2)")  //选择所有的li元素中的第2个li,从0开始计算。

$("li:gt(4)")  //选择li元素中第四个后面的li元素,从0开始计算。

$("li:lt(4)")  //选择li元素中第四个前面的li元素,从0开始计算。

$(":header")  //选择h1、h2、h3之类的,如果有h7也会被选上。

$("div:animated")  //选择正在执行动画效果的元素

内容过滤选择器

$("p:contains('ma')")  //选择所有p标签中包含有'ma'文本的元素

$("div:empty")  //选择所有不包含任何文本不包含任何标签的div元素。

$("div:has(p)")  //选择所有包含有p标签的div元素

$("div:parent")  //选择所有包含文本或者包含节点的div元素。


CSS过滤选择器

$("div:hidden")  //选择所有的被hidden(隐藏)的div元素

$("div:visible")  //选择所有的可视化的div(显示)元素


属性过滤选择器

$("div[id]")  //选择所有含有id属性的div元素

$("input[name='user']")  //选择所有的name属性等于'user'的input元素

$("input[name!='user']")  //选择所有的name属性不等于'user'的input元素

$("input[name^='tag']")  //选择所有的name属性以'tag'开头的input元素

$("input[name$='tag']")  // 选择所有的name属性以'tag'结尾的input元素

$("input[name*='tag']")  //选择所有的name属性包含'tag'的input元素

$("input[name*='ma'][name$='cn']") //组合使用。选择name包含'ma',且以'cn'结尾的input。例如:<input type="text" name="maweb.cn">

$("li:nth-child(2)")  //选择所有li当中的第二个li,和eq的区别在于eq是从0计算,这个是从1计算。

$("li:nth-child(odd)")  //选择li当中的第1,3,5...li。

$("li:nth-child(2n)")  //选择所有li当中的第2,4,6...li。括号中的2可以为其它数。

$("li:nth-child(2n + 1)")  //从第一个li开始,每隔2个li选择一次。返回,1,3,5..。 例如:$("li:nth-child(3n + 2)")选择器返回:2,5,8..

$("div span:first-child")  //返回所有的div元素的第一个子节点的数组

$("div span:last-child")  //返回所有的div元素的最后一个节点的数组

$("div li:only-child")  //返回所有的div中只有唯一一个子节点,并且是li的,返回这个li。


<div>
<li>1</li><!-- 返回我 -->
</div>
<div>
<li>2</li>
<li>3</li>
</div>
<div>
<li>4</li>
<span>5</span>
</div>


表单选择器

$(":input")  //选择所有的表单输入元素,包括input, textarea, select 和 button

$(":text")  //选择所有的type=text的input元素,如果input没设置任何type也会被选中。

$(":password")  //选择所有type=password的input元素

$(":radio")  //选择所有type=radio的input元素

$(":checkbox")  //选择所有type=checkbox的input元素

$(":submit")  //选择所有type=submit的input元素

$(":image")  //选择所有的type=image的input元素

$(":reset")  //选择所有type=reset的input元素

$(":button")  //选择所有type=button的input元素

$(":file")  //选择所有type=file的input元素

$(":hidden")  //选择所有type=hidden和css隐藏的input元素。也会选择head,meta,title,script...等


表单过滤选择器

$(":enabled")  //选择所有非disabled(禁止)属性的input

$(":disabled")  //择所有的禁止(disabled)的表单元素

$(":checked")  //选择所有的被checked的表单元素

$("select option:selected")  //选择下拉框当前选中项元素
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 选择器