总结:jquery选择器

WEB前端 waitig 465℃ 百度已收录 0评论

一、基本选择器
$("#id")
eg:$("#test") //id = test
$(".class")
eg:$(".test") //class = test
$("tagName")
eg:$("p") //<p>
$("*")
eg:$("*") //所有元素
$("sel1,sel2,sel3")
eg:$("div,span,p.test") //所有<div>、<span>和class = test的<p>
二、层次选择器
$("ancestor descendant")
eg:$("div span") //<div>里所有的<span>(后代元素)
$("parent > child")
eg:$("div > span") //<div>元素下的<span>(子元素)
$("prev + next")
//选取紧接在prev元素后的next元素 eg:$(".one + div")
//class = one的下一个<div>同辈元素
$("prev ~ siblings")
//选取prev元素之后的所有siblings元素 eg:$("#one ~ div")
//id = one的元素后面的所有<div>同辈元素
后两个较少使用,可等价代替:$(".one + div") = $(".one").next("div")
:$("#one ~ div") = $("#one").nextAll("div")
三、过滤选择器
选择器以:开头。
1.基本过滤(index从0开始)
:first //选取第一个元素
eg:$("div:first") //所有<div>中第一个<div>
:last //选取最后一个元素
eg:$("div:last") //所有<div>中最后一个<div>
:not(selector)
//去除所有与给定选择器匹配的元素 eg:$("input:not(.myClass)")
//class != myClass的<input>
:even //选取索引是偶数的元素
eg:$("input:even") //索引是偶数的<input>
:odd //选取索引是奇数的元素
eg:$("input:odd") //索引是奇数的<input>
:eq(index)
//选取索引等于index的元素 eg:$("input:eq(1)")
//索引等于1的<input>
:gt(index)
//选取索引大于index的元素 eg:$("input:gt(1)")
//索引大于1的<input>
:lt(index)
//选取索引小于index的元素 eg:$("input:lt(1)")
//索引小于1的<input>
:header
//选取所有的标题元素 eg:$(":header")
//网页中所有的<h1>,<h2>,<h3>……
:animated
//选取当前正在执行动画的所有元素 eg:$("div:animated")
//正在执行动画的<div>
:focus
//选取当前获取焦点的元素 eg:$(":focus")
//当前获取焦点的元素
2.内容过滤
:contains(text)
//选取文本内容为"text"的元素 eg:$("div:contains(‘hahaha’)")
:empty
//选取不包含子元素或者文本的空元素 eg:$("div:empty")
:has(selector)
//选取含有选择器所匹配的元素的元素 eg:$("div:has(p)")
//含有<p>的<div>
:parent
//选取含有子元素或者文本的元素 eg:$("div:parent")
3.可见性过滤
:hidden
//选取所有不可见的元素 eg:$(":hidden")
//所有不可见元素包括:<input type="hidden" />, <div style="display:none;">, <div style="visibility:hidden;">等。
:visible
//选取所有可见的元素 eg:$("div:visible")
4.属性元素过滤
[attribute]
//选取拥有此属性的元素
eg:$("div[id]")
//拥有属性id的元素
[attribute = value]
//选取属性值 = value的元素
eg:$("div[title = test]")
//属性title = test的<div>元素
[attribute != value]
//选取属性值 != value的元素
eg:$("div[title != test]")
//属性title != test的<div>元素,没有属性title的<div>也会被选取
[attribute ^= value]
//选取属性值以value开始的元素
eg:$("div[title ^= test]")
//属性title以test开始的<div>
[attribute $= value]
//选取属性值以value结束的元素
eg:$("div[title $= test]")
//属性title以test结束的<div>
[attribute *= value]
//选取属性值含有value的元素
eg:$("div[title *= test]")
//属性title含有test的<div>
[attribute |= value]
//选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素
eg:$("div[title |= ‘en’]")
[attribute ~= value]
//选取属性用空格分隔的值中包含一个给定值的元素
eg:$("div[title ~= ‘en’]")
[attribute1][attribute2][attributeN]
//满足多个条件
eg:$("div[id][title $= ‘test’]")
//拥有属性id且属性title以’test’结束的<div>
5.子元素对象过滤(index从1开始)
:nth-child(index/even/odd/equation)
//选取每个父元素下的第index个子元素或奇偶元素(index从1开始)
:nth-child()的详细功能:
:nth-child(even)
//每个父元素下的索引值是偶数的元素
:nth-child(odd)
//每个父元素下的索引值是奇数的元素
:nth-child(2)
//每个父元素下的索引值等于2的元素
:nth-child(3n)
//每个父元素下的索引值是3的倍数的元素(n从1开始)
:nth-child(3n+1)
//每个父元素下的索引值是3n+1的元素(n从1开始)
:first-child
//选取每个父元素的第一个子元素
eg:$("ul li:first-child")
//每个<ul>中第一个<li>
:last-child
//选取每个父元素的最后一个子元素
:only-child
//如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配。
6.表单对象属性过滤
:enabled
//选取所有可用元素 eg:$("#form1:enabled")
//id = form1的表单内的所有可用元素
:disabled
//选取所有不可用元素 eg:$("#form1:disabled")
//id = form1的表单内的所有不可用元素
:checked
//选取所有被选中的元素(单选框、复选框) eg:$("input:checked")
//所有被选中的<input>
:selected
//选取所有被选中的选项元素(下拉列表) eg:$("select option:selected")
//所有被选中的选项元素
四、表单选择器
:input
//选取所有<input>、<textarea>、<select>、<button> eg:$(":input")
:text //选取所有的单行文本框
eg:$(":text")
:password
//选取所有的密码框 eg:$(":password")
:radio
//选取所有的单选框 eg:
$(":radio")
:checkbox
//选取所有的多选框 eg:$(":checkbox")
:submit
//选取所有的提交按钮 eg:$(":submit")
:image
//选取所有的图像按钮 eg:$(":image")
:reset
//选取所有的重置按钮 eg:$(":reset")
:button
//选取所有的按钮 eg:$(":button")
:file //选取所有的上传域
eg:$(":file")
:hidden
//选取所有不可见元素 eg:$(":hidden")


本文由【waitig】发表在等英博客
本文固定链接:总结:jquery选择器
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)