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>