首页 > 代码库 > 锋利的Jquery解惑系列(三)------ 各路选择器大聚会
锋利的Jquery解惑系列(三)------ 各路选择器大聚会
申明:初次学习Jquery的选择器时只记得几个和css选择器类似的几个,在这里列出书上写上的各路选择器方便以后的查询和现在的学习
所有例子都来自书上
测试画面:
<iframe src="http://jsfiddle.net/5vv944d6/embedded/result,js,html,css" frameborder="0" width="100%" height="300"></iframe>
一、基本选择器
#id, $("#test")选取id为test的元素(惟一)
.class $(".test")选取所有class为test的元素
element $("p")选取所有的<P>元素
* $("*")选取所有的元素
selector1,selector2,....,selectorN $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
demo1: 改变id为one的元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/1/embedded/result,js,html,css" frameborder="0" width="100%" height="300"></iframe>
demo2:改变class为mini的所有元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/2/embedded/result,js,html,css" frameborder="0" width="100%" height="300"></iframe>
demo3:改变元素名是<div>的所有元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/3/embedded/result,js,html,css" frameborder="0" width="100%" height="300"></iframe>
demo4:改变所有元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/4/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo5:改变所有的<span>元素和id为two的元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/6/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
二、层次选择器
通过DOM元素之间的层次关系来获取特定元素,如:后代元素、子元素、相邻元素和同辈元素
$("ancestor descendant") $("div span")选取<div>里的所有的<span>元素
$("parent > child") $("div > span")选取<div>元素下元素名是<span>的子元素
两者区别在于前者检索出所有后代,后者只是检索儿子
$("prev + next") $(".one + div")选取class为one的下一个<div>同辈元素
$("prev~siblings") $("#two~div")选取id为two的元素后面的所有<div>同辈元素
demo1:改变<body>内所有<div>的背景色
<iframe src="http://jsfiddle.net/5vv944d6/7/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2:改变<body>内<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/8/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo3:改变class为one的下一个<div>同辈元素背景色
<iframe src="http://jsfiddle.net/5vv944d6/11/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo4:改变id为two的元素后面的所有<div>同辈元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/12/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
对于后面两个选择器有更方便的方法可以替代:
$(".one + div") == $(".one").next("div") $("#prev~div")==$("#prev").nextAll("div");
$("prev~siblings")与siblings()方法的区别在于前者只能匹配"prev"元素后面的同辈<div>元素。而后者与位置无关只要是同辈的节点都可以。
三、过滤选择器
1)基本过滤选择器
:first $("div:first")选取所有<div>元素中第一个<div>元素
:last $("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector) $("input:not(myClass)")选取class不是myClass的<input>元素
:even $("input:even")选取索引是偶数的<input>元素 0算偶数
:odd $("input:odd")选取索引是奇数的<input>元素
:eq(index) $("input:eq(1)")选取索引等于1的<input>元素
:gt(indfex) $("input:gt(1)")选取索引大于1的<input>元素
:lt(index) $("input:lt(1)")选取索引小于1的<input>元素
:header $(":header")选取网页中所有的<h1>,<h2>,<h3>...
:animated $("div:animated")选取正在执行动画的<div>元素
:focus $(":focus")选取当前获取焦点的元素
demo1: 改变第一个<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/13/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2: 改变最后一个<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/15/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo3: 改变class不为one的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/16/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo4:改变索引值为偶数的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/18/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo5:改变索引值为奇数的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/19/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo5:改变索引值等于3的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/20/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo6:改变索引值大于3的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/21/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo7:改变索引值i小于3的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/22/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
2)内容过滤选择器
:contains(text) $("div:contains("我")") 选取含有文本”我“的<div>元素
:empty $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素
:has(selector) $("div:has(p)")选取含有<p>元素的<div>元素
:parent $("div:parent")选取拥有子元素(包括文本元素)的<div>元素
demo1:改变含有文本"di"的<div元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/26/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2:改变不包含子元素的<div>空元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/27/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo3:改变含有class为mini元素的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/35/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo4:改变含有子元素(包括文本元素)的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/37/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
3)可见性过滤选择器
:hidden $(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">.如果只想选取 <input>元素,可以使用$("input:hidden");
:visible $("div:visible")选取所有可见的<div>元素
demo1:改变所有可见的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/38/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2:显示隐藏的<div>元素
<iframe src="http://jsfiddle.net/5vv944d6/40/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
4)属性过滤选择器
[attribute] $("div[id]")选取拥有属性id的元素
[attribute=value] $("div[title=test]")选取属性title为”test“的<div>元素
[attribute!=value] $("div[title!=test]")选取属性title不等于"test"的<div>元素(没有属性title的<div>元素也会被选取)
[attribute^=value] $("div[title^=test]")选取属性title以”test“开始的<div>元素
[attribute$=value] $("div[title$=test]")选取属性title以”test“结束的<div>元素
[attribute*=value] $("div[title*=test]")选取属性title含有”test“的<div>元素
[attribute|=value] $("div[title|=‘en‘]")选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-’)的<div>元素
[attribute~=value] $("div[title~=‘uk‘]")选取属性title用空格分隔的值中包含字符uk的<div>元素
[attribute1][attribute2]...[attributeN] $("div[id][title$=‘test‘]")选取拥有属性id,并且属性title以"test"结束的<div>元素
demo1:改变含有属性title的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/41/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2:改变属性title值等于"test"的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/44/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo3:改变属性值不等于”test“的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/45/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo4:改变属性值以”te“开始的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/47/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo5:改变属性值title以”est“结束的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/49/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo6:改变属性title含有"es"的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/50/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
dmeo7:改变含有属性id,并且属性title含有”es“的<div>元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/53/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
测试画面
<iframe src="http://jsfiddle.net/hms3otz4/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo8:改变属性title等于en或以en为前缀(该字符串后跟一个连字符‘-‘)的元素的背景色
<iframe src="http://jsfiddle.net/hms3otz4/2/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo9:改变属性title用空格分隔的值包含字符uk的元素的背景色
<iframe src="http://jsfiddle.net/hms3otz4/4/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
5)子元素过滤选择器
:nth-child :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)有index从1开始,而eq(index)是从0开始的
: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 :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>元素
demo1: 改变每个class为one的<div>的父元素下的第2个子元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/55/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2:改变每个class为one的<div>父元素下的第1个子元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/56/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo3:改变每个class为one的<div>父元素下的最后一个子元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/57/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo4:如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色
<iframe src="http://jsfiddle.net/5vv944d6/58/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
6)表单对象属性过滤选择器
:enabled $("#form1 :enabled")选取id为"form1"的表单内的所有元素可用的元素
:disabled $("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素
:checked $("input :checked")选取所有被选中的<input>元素(单选框,复选框)
:selected $("select option :selected")选取所有被选中的选项元素(下拉列表)
测试画面
<iframe src="http://jsfiddle.net/hms3otz4/8/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo1:改变表单内可用<input>元素的值
<iframe src="http://jsfiddle.net/hms3otz4/9/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo2:改变表单内不可用<input>元素的值
<iframe src="http://jsfiddle.net/hms3otz4/10/embedded/result,js,css,html" frameborder="0" width="100%" height="300"></iframe>
demo3:获取多选框选中的个数
$("input :checked").length
demo4:获取下拉框选中的内容
$("select :selected").text();
四、表单选择器
:input $(":input")选取所有<input>、<textarea>、<select>、<button>
:text $(":text")选取所有的单行文本框
:password $(":password")选取所有的密码框
:radio $(":radio")选取所有的单选框
:checkbox $(":checkbox")选取所有的复选框
:submit $(":submit")选取所有提交的按钮
:image $(":image")选取所有的图像按钮
:reset $(":reset")选取所有的重置按钮
:button $("button")选取所有的按钮
:file $(":file")选取所有的上传域
:hidden $(":hidden")选取所有不可见元素
有点晚,后面的例子就不写啦!!!
锋利的Jquery解惑系列(三)------ 各路选择器大聚会