Jquery基本选择器总结
Posted 4K_WarCraft
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于Jquery基本选择器总结的主要内容，如果未能解决你的问题，请参考以下文章