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基本选择器总结的主要内容,如果未能解决你的问题,请参考以下文章

JQuery选择器总结

Jquery基本选择器总结

归纳总结Jquery的选择器

jquery复习总结一

jquery选择器总结

jQuery总结