Jquery基本选择器总结

一、基本选择器

事例：

<input type="button" value="选择 id为 one 的元素." id="btn1"/>
/*
*  css(name, value)
* 	* name:指定样式名称,对应css帮助文档的内容
* 	* value:指定样式值
*/
$("#one").css("background","yellow");
 

<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
//jQuery支持类似于批处理的操作
$(".mini").css("background","yellow");
 

<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("div").css("background","yellow");
 

<input type="button" value="选择 所有的元素." id="btn4"/>
$("*").css("background","yellow");
 

<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
//多个选择器并列使用,用","隔开(并集)
$("span,#two").css("background","yellow");

二、层次选择器

事例：

<input type="button" value="选择 body内的所有div元素." id="btn1"/>
//祖先元素和后代元素的关系
$("body div").css("background","yellow");

<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
//父子元素的关系
$("body>div").css("background","yellow");

<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#one+div").css("background","yellow");
 

<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#two~div").css("background","yellow");
 

<input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/>
$("#two").siblings("div").css("background","yellow");

三、基本过滤选择器
事例：

<input type="button" value="选择第一个div元素." id="btn1"/>
$("div:first").css("background","yellow");
 

<input type="button" value="选择最后一个div元素." id="btn2"/>
$("div:last").css("background","yellow");
 

<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
//class不为one的元素,包含没有class属性的
$("div:not('.one')").css("background","yellow");
 

<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
$("div:even").css("background","yellow");
 

<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
$("div:odd").css("background","yellow");
 

<input type="button" value="选择索引值等于3的元素." id="btn6"/>
$("div:eq(3)").css("background","yellow");
 

<input type="button" value="选择索引值大于3的元素." id="btn7"/>
$("div:gt(3)").css("background","yellow");
 

<input type="button" value="选择索引值小于3的元素." id="btn8"/>
$("div:lt(3)").css("background","yellow");
 

<input type="button" value="选择所有的标题元素." id="btn9"/>
$(":header").css("background","yellow");
 

<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
$(":animated").css("background","yellow");

四、内容过滤选择器
事例：

<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
$("div:contains('di')").css("background","yellow");
 

<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
$("div:empty").css("background","yellow");
 

<span style="white-space:pre">																																																																										</span>·
<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
$("div:has('.mini')").css("background","yellow");
 

<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
$("div:parent").css("background","yellow");

五、可见性过滤选择器
事例：

<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
$("div:visible").css("background","yellow");

<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
$("div:hidden").show(3000).css("background","yellow");

<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>

var $inputs = $("input:hidden");

/*
* jQuery提供的隐式迭代的方法
* 	each(callback)
* 	* callback:回调函数,function(index,domEle){}
* 		* index:索引值
* 		* domEle:DOM对象
*/
$inputs.each(function(index,domEle){
alert(domEle.value)
});

<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>

var $inputs = $("input:hidden");

/*
* jQuery还提供了隐式迭代的方法
* jQuery.each(object,callback)
* 	* jQuery.each()和each()方法的区别:
* 		* each():相当于Java中的实例方法,$(expr).each()
* 		* jQuery.each():相当于Java中的静态方法,$.each()
* 	* jQuery.each(object,callback)
* 		* object:需要例遍的对象或数组。
* 		* callback:回调函数,function(index,domEle){}
* 		* index:索引值
* 		* domEle:DOM对象
*/
$.each($inputs,function(index,domEle){
//alert(domEle.value);
//alert($(domEle).val());

/*
* this的用法:
* 	* 指代当前页面元素内容,这里的元素内容就可以称之为DOM对象
* 	* this的使用,必须要在一个具有上下文环境
* 	* 建议:实际开发中,this的使用尽量不要用
*/
alert($(this).val());
});

六、属性选择器
事例：
<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
$("div[title]").css("background","yellow");
 

<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
$("div[title=test]").css("background","yellow");
 

<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
$("div[title!=test]").css("background","yellow");
 

<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
$("div[title^=te]").css("background","yellow");
 

<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
$("div[title$=est]").css("background","yellow");
 

<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
$("div[title*=es]").css("background","yellow");
 

<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
//多个属性过滤选择器并列使用(交集)
$("div[id][title*=es]").css("background","yellow");

七、子元素过滤选择器
事例：
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
/*
* * 子元素过滤选择器的特殊用法,要在其前面增加空格
* * 子元素过滤选择器的起始位置为"1"
*/
$("div[class=one] :nth-child(1)").css("background","yellow");
 

<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
$("div[class=one] :first-child").css("background","yellow");
 

<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
$("div[class=one] :last-child").css("background","yellow");
 

<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
$("div[class=one] :only-child").css("background","yellow");

八、表单对象属性过滤选择器
事例：
<button id="btn1">对表单内 可用input 赋值操作.</button>
/*
* 可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
*/
/*
* val():获取和设置
* * 获取:不传参数
* * 设置:传递传输
*/
$("input:enabled").val("xxxxx");

<button id="btn2">对表单内 不可用input 赋值操作.</button>
/*
*   可用元素：<input name="add" value="可用文本框"/>  <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
*/
/*
* val():获取和设置
* 	* 获取:不传参数
* 	* 设置:传递传输
*/
$("input:disabled").val("xxxxx");

<button id="btn3">获取多选框选中的个数.</button>
/*
* 	 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
*/
alert($("input[name=newsletter]:checked").length);

<button id="btn4">获取下拉框选中的内容.</button>
/*
* 下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>

<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
*/
alert($("select>option:selected").text());

九、表单选择器
事例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
$(document).ready(function(){

<span style="white-space:pre"> </span>var $alltext = $("#form1 :text");
<span style="white-space:pre"> </span>var $allpassword= $("#form1 :password");
<span style="white-space:pre"> </span>var $allradio= $("#form1 :radio");
<span style="white-space:pre"> </span>var $allcheckbox= $("#form1 :checkbox");

var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
<span style="white-space:pre"> </span>var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
<span style="white-space:pre"> </span>var $allselect = $("#form1 select");
<span style="white-space:pre"> </span>var $alltextarea = $("#form1 textarea");

var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");

$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")

$("form").submit(function () { return false; }); // return false;不能提交.

});
</head>
<body>
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><div style="display:none">test</div><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>

<div></div>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>