常用选择器:id选择器、元素选择器、类选择器、组合选择器、层次选择器、基本过滤选择器(“:first”、“:last”等)、内容过滤(“:empty”、“:parent”等)、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤、表单选择器。
本教程操作环境:windows7系统、jquery1.10.0版本、Lenovo 小新Air14电脑。
1.基本选择器
#id $("#test").css("background","#bbffaa")//选取id为test的元素 element $("p") ;//选取所有的<p>元素 * $("*");//选取所有元素 .class $(".test");//选取类名为test的元素 selector1,selector2 $("div,p.myClass,span");//组合选择
2.层次选择器
$("div span")//选取<div>里所有<span>元素(所有后代元素) $("div>span")//选取<div>元素下元素名为<span>的子元素(只限于子元素) $(".one+div")//选取class 为one的下一个<div>同辈元素 等价于$(".one").next("div") $("#two~div")//选取id为two的元素后面的所有<div>同辈元素 等价于$("#two").nextAll("div")
3.过滤选择器(以“:”开头)
1.基本过滤
:first 选取第一个元素: $("div:first") 选区所有<div>元素中第一个<div>元素 :last 选取最后一个元素 $("div:last") :not(selector) 去除所有给定选择器匹配的元素 $("input:not(.myClass)") 选取class不是myClass的<input>元素 :even 选取索引数是偶数的元素 索引从0开始 $("div:even") :odd 选取索引数是奇数的元素 索引从0开始 $("div:odd") :eq(index)选取索引数等于index的元素 $("div:eq(2)") :gt(index)选取索引数大于index的元素 $("div:gt(2)") :lt(index)选取索引数小于index的元素 $("div:lt(2)") :header 选取所有标题元素<h1>..<h6> $(":header") :animated 选取所有当前正在执行动画的的所有元素 $("div:animated")选取正在执行动画的<div>元素 :focus 选取当前获得焦点的元素 $(":focus")
2.内容过滤
:contains(text)选取含有文本内容为text的元素 $("div:contains('我')")选取含有文本"我"的<div>元素 :empty 选取不包含子元素或者文本的空元素 $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素 :has(selector)选取含有选择器所匹配的元素的元素 $("div:has(p)")选取含有<p>元素的<div>元素 :parent 选取还有子元素或文本的元素 $("div:parent")选取拥有子元素(包括文本元素)的<div>元素
3.可见性过滤
:hidden 选取所有不可见元素 $(:hidden)选取所有不可见元素 包括<input type="hidden"> <div style="display:none"> 和<div style="visibility:hidden">等 如果只想选取<input>元素,可以使用 $("input:hidden") :visible 选取所有可见元素 $(div:visible) 选取所有可见的<div>元素
例如 显示隐藏的<div>元素 $(div:hidden).show(3000)
4.属性过滤(Jquery中的单引号和双引号没有区别,如果一个字符串,外面用单引号里面的双引号就字符串了,反之,如果外面是双引号里面的单引号就是字体串,双引号不能组合双引号使用 ,单引号亦然,但是平时要尽量使用单引号)
[attribute] 选取拥有此属性的元素 $("div[id]")选取拥有属性id的元素 [attribute=value] 选取属性值为value的元素 $("div[title=test]") 选取属性title为“test”的<div>元素 [attribute!=value] 选取属性的值不等于value的元素 $("div[title!=test]") [attribute^=value] 选取属性的值以value开始的元素 $("div[title^=te]")选取属性title的值以te开始的div元素 [attribute$=value] 选取属性的值以value结束的元素 $("div[title$=est]")选取属性title的值以est结束的div元素 [attribute*=value] 选取属性的值含有value的元素 $("div[title*=es]")选取属性title的值含有es的div元素 [attribute|=value] 选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素 $('div[title|="en"]') [attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 $('div[title~="uk"]') [attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 $("div[id][title$='test']")
5.子元素过滤
:nth-child(index/evenn/odd/equation) 选取每个父元素下得第index个子元素或者奇偶元素(index从1算起) 解析::eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的 :first-child 选取每个父元素的第一个子元素 集合元素 解析::first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素。例如$("ul li:first-child");选取每个<ul>中第一个<li>元素 :last-child 选取每个父元素的最后一个子元素 解析::last只返回单个元素,:last-child选择符将为每个父元素匹配最后一个子元素 例如$("ul li:last-child");选择<ul>中最后一个<li>元素 :only-child 如果某个元素是他父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素
6.表单对象属性过滤
:enabled 选取所有可用元素 $("#form1:enabled") 选取id为form1的表单内所有可用元素 :disabled 选取所有不可用元素 $("#form1:disabled") :checked 选取所有被选中的元素(单选框,复选框)$("input:checked")选取所有被选中的<input>元素 :selected 选取所有被选中的选项元素(下拉列表) $("select option:selected") 选取所有被选中的选项元素
4.表单选择器
:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden
选择器的注意事项
\\
为转义字符
$(".test :hidden") 带空格表示选取class为test里的隐藏元素 $(".test:hidden")不带空格表示选取隐藏的class为test的元素
以上就是jquery常用选择器有哪些的详细内容,更多请关注易知道|edz.cc其它相关文章!