总结:jquery选择器

来源:互联网 发布:ff14捏脸动漫数据 编辑:程序博客网 时间:2024/06/05 23:07
一、基本选择器
$("#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")