JQuery学习笔记 选择器 --- 过滤选择器

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的选择器语法相同，即选择器器都睡以冒号开头。

过滤选择器可以分为：

基本过滤

内容过滤

可见性过滤

属性过滤

子元素过滤

表单对象属性过滤

 

1、基本过滤选择器

:first---选取第一个元素---返回单个元素---$("div:first")选取所有<div>元素中的第一个<div>元素

:last---选取最后一个元素---返回单个元素---$("div:last")选取所有<div>元素中的最后一个<div>元素

:not(selector)---去除所有与给定选择器匹配的元素---返回集合元素---$("input:not(.myClass)")选取class不是.myClass的input元素

:even---选取索引是偶数的所有元素，索引从0开始---返回集合元素---$("input:even")选取索引是偶数的<input>元素

:odd---选取索引是奇数的所有元素，索引从0开始---返回集合元素---$("input:odd")选取索引是奇数的<input>元素

:eq(index)---选取索引等于index的元素(index从0开始)---返回单个元素---$("input:eq(1)")选取索引等于1的<input>元素

:gt(index)---选取索引大于index的元素(index从0开始)---返回集合元素---$("input:gt(1)")选取索引大于1的<input>元素

:lt(index)---选取索引小于index的元素(index从0开始)---返回集合元素---$("input:lt(1)")选取索引小于1的<input>元素 

:header---选取所有标题元素，如h1,h2等---返回集合元素---$(":header")选取所有标题元素

:animated---选取当前正在执行动画的所有元素---返回集合元素---$("div:animated")选取正在执行动画的<div>元素

:focus---选取当前获取焦点的元素---返回集合元素---$(":focus") 选取当前获取焦点的元素

 

练习：

 

改变第一个div的元素的背景色
$("div:first").css("background","#bbffaa");
改变最后一个div元素的背景色
$("div:last").css("background","#bbffaa");
//改变class不为one的<div>元素的背景色
$("div:not(.one)").css("background","#bbffaa");
//改变索引值为偶数的div元素的背景色
$("div:even").css("background","#bbffaa");
//改变索引值为奇数的div元素的背景色
$("div:odd").css("background","#bbffaa");
//改变索引值等于3的div元素背景色
$("div:eq(3)").css("background","#bbffaa");
//改变索引值大于3的div背景色
$("div:gt(3)").css("background","#bbffaa");
//改变索引值小于3的div元素的背景色
$("div:lt(3)").css("background","#bbffaa");
//改变所有标题元素的背景色
$(":header").css("background","#bbffaa");
//改变当前正在执行动画的背景色
$(":animated").css("background","#bbffaa");
//改变当前获取焦点的元素的背景色
$(":focus").css("background","#bbffaa");

 

 

 

2、内容过滤选择器

 

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文内容上。

:contains(text)---选取含有文本内容为text的元素---返回集合元素---$("div:contains('我')")选取含有文本‘我’的 div元素

:empty---选取不包含子元素或者文本的空元素--$("div:empty")选取不包含子元素（包括文本元素）的div空元素

:has(selector)---选取含有选择器所匹配元素的元素---返回集合元素---$("div:has(p)")选取含有<p>元素的div元素

:parent---选取含有子元素或者文本的元素---返回集合元素---$("div:parent")选取拥有子元素（包含文本元素）的div元素

 

练习：

 

//改变包含文本di的div元素的背景色
$("div:contains('di')").css("background","#bbffaa");
//改变不包含子元素（包括文本元素）的div空元素的背景色
$("div:empty").css("background","#bbffaa");
//改变包含有class为mini元素的div元素的背景色
$("div:has('.mini')").css("background","#bbffaa");
//改变含有子元素（包括文本元素）的div元素的背景色
$("div:parent").css("background","#bbffaa");

 

 

 

3、可见性过滤器

可见性过滤器是根据元素的可见和不可见来选择相应的元素。

:hidden---选取所有不可见的元素---返回集合元素---$(":hidden")选取所有不可见的元素，包括<input type="hidden"/>,<div style="display:none;"><div style="visibility:hidden;"><br />等元素。如果只想选取<input>元素，可以使用$("input:hidden")

:visible---选取所有可见的元素---返回集合元素---$("div:visible")

 

练习：

 

改变所有可见的div背景色
$("div:visible").css("background","#bbffaa");
显示隐藏的div(3秒显示),并改变背景色
$("div:hidden").show(3000).css("background","#bbffaa");

 

4、属性过滤选择器

通过元素的属性来获取相应的元素。

[attribute]---选取拥有此属性的元素---返回集合元素---$("div[id]")选取拥有属性id的元素

[attribute=value]---选取属性值为value的元素---返回集合元素---$("div[title=test]")选取属性值title为test的div元素

[attribute!=value]---选取属性值不等于value的元素---返回集合元素---$("div[title!=test]")选取属性title不等于test的div元素，包括么有title属性的元素也会被选取

[attribute^=value]---选取属性值以value开始的元素---返回集合元素---$("div[title^=test]")选取属性title以test开始的div元素

[attribute*=value]---选取属性值包含value的元素---返回集合元素---$("div[title*=test]")选取属性title含有test的div元素

[attribute$=value]---选取属性以value结束的元素---返回集合元素---$("div[title$=test]")选取属性以test结尾的div元素

[attribute|value]---选取属性等于给定字符串或以该字符串为前缀(噶字符串后跟一个连字符"-")的元素---返回集合元素---$("div[title|=en]")选取属性title等于en或以en为前缀并且后面跟一个连字符的元素

[attribute~=value]---选取属性用空格分隔的之中包含一个给定值的元素---返回集合元素---$('div[title~="uk"]')选取属性title用空格分隔的值中包含字符uk的元素

[attribute1][attribute2][attributeN]---用属性选择器合并成一个复合型选择器，满足多个条件。没选择一次缩小一次范围---返回集合元素---$("div[id][title$='test']")选取拥有属性id，并且属性title是以test结尾的div元素

 

练习：

 

改变含有属性title的div元素的背景色
$("div[title]").css("background","#bbffaa");
改变属性title值等于test的div元素的背景色
$("div[title='test']").css("background","#bbffaa");
改变属性title值不等于test的div元素的背景色
$("div[title!='test']").css("background","#bbffaa");
改变属性title值以te开始的div元素的背景色
$("div[title^="te"]").css("background","#bbffaa");
改变属性title值以est结尾的的div元素的背景色
$("div[title$='est']").css("background","#bbffaa");
改变属性title值含有es的div元素的背景色
$("div[title*='es']").css("background","#bbffaa");
改变属性含有id，并且属性title值含有es的div元素的背景色
$("div[id][title*='es']").css("background","#bbffaa");

 

 

特别加强：

html

 

<div title="en">title为en的div</div>
<div title="en-UK">title为en-UK的div</div>
<div title="english">title为english的div</div>
<div title="en uk">title为en uk的div</div>
<div title="uken">title为uken的div</div>

 

 

 

改变属性title值以en开始的div的背景色
$("div[title^='en']").css("background","#bbffaa");
改变属性title含有en的div背景色
$("div[title*='en']").css("background","#bbffaa");
改变属性title等于en或与en为前缀切改字符串后跟连字符的元素的背景色
$("div[title|='en']").css("background","#bbffaa");
改变属性title用空格分隔的值中含有uk的元素的背景色
$("div[title~='uk']").css("background","#bbffaa");

 

 

5、子元素过滤选择器

相对其他的选择器稍微复杂一些，需要把父元素和子元素区分清楚。

:nth-child(index/even/odd/equation)---选取每个父元素下的第index个子元素或奇偶元素(从1开始)---返回集合元素---: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的倍数的元素

:nth-child(3+1)选取每个父元素下索引值是3n+1的元素，n从1开始

:first-child---选取每个父元素的第一个子元素---返回集合元素---:first只返回单个元素，而:first-child选择符将为每个父元素匹配你第一个子元素

:last-child---选取每个父元素的最后一个子元素---返回集合元素---:last只返回单个元素，而:last-child选择符将为每个父元素匹配你最后一个子元素。例如，$("ul li:last-child")将选择每个ul中最后一个li元素

:only-child---如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会---返回集合元素---$("ul li:only-child")在ul中选取是唯一子元素的li元素

 

练习：

 

改变每个class为one的div父元素下的第二个子元素的背景色
$("div.one:nth-child(2)").css("background","#bbffaa");
改变每个class为one的div父元素下的第1个子元素的背景色
$("div.one:first-child").css("background","#bbffaa");
改变每个class为one的div父元素下的最后一个子元素的背景色
$("div.one:last-child").css("background","#bbffaa");
如果class为one的div父元素下只有一个子元素，那么改变这个子元素的背景色
$("div.one:only-child").css("background","#bbffaa");

 

 

6、表单对象属性过滤器

主要对表单元素进行过滤，如下拉框，多选框等元素

:enabled---选取所有可用的元素 ---返回单个元素---$("#form1 :enabled")选取id为form1的表单内的所有可用元素

:disabled---选取所有不可以用的元素---返回集合元素---$("#form2 :disabled")选取id为form2的表单内所有不用的元素

:checked---选取所有被选中的元素（单选框、复选框）---返回集合元素---$("input:checked")选取所有被选中的input元素

:selected---选取所有被选中的选项元素（下拉列表）---返回集合元素---$("select option:selected")选取所有被选中的选项元素

 

练习：

改变表单内可用的input元素的值
$("#form1 input:enabled").val("this is changed");
改变表单内不可用input元素的值
$("#form1 input:disabled").val("this is changed");
获取多选框选中的个数
$("input:checked").length
获取下拉框中的内容
$("select:selected").text()

 

<script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){
      //重置表单元素
	  $(":reset").click(function(){
		  setTimeout(function() {
			countChecked();
		    $("select").change();
		  },0);
	  });

	  
	  //对表单内 可用input 赋值操作.
      $('#btn1').click(function(){
		  $("#form1 input:enabled").val("这里变化了！");  
		  return false;
	  })
	  //对表单内 不可用input 赋值操作.
	  $('#btn2').click(function(){
		  $("#form1 input:disabled").val("这里变化了！");
		  return false;
	  })
	  //使用:checked选择器，来操作多选框.
	  $(":checkbox").click(countChecked);

	  function countChecked() {
		  var n = $("input:checked").length;
		  $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
      }

	  countChecked();//进入页面就调用.

	 //使用:selected选择器，来操作下拉列表.
	  $("select").change(function () {
			  var str = "";
			  $("select :selected").each(function () {
					str += $(this).text() + ",";
			  });
			  $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
      }).trigger('change');
		// trigger('change') 在这里的意思是：
		// select加载后，马上执行onchange.
		// 也可以用.change()代替.
  });
  //]]>

  </script>

 

  <body>
  <h3> 表单对象属性过滤选择器.</h3>
   <form id="form1" action="#">
	<button type="reset">重置所有表单元素</button>
	<br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  
  <br /><br />
  
	<!-- 测试的元素 -->
	
     可用元素：<input name="add" value="可用文本框"/>  <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
	 不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
	 <br/>
     多选框：<br/>
	 <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
	 <div></div>

	 <br/><br/>
     下拉列表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>
	<br/><br/>
     <div></div>
  </form>
</body>