JQuery -- 介绍，选择器及其示例，基本选择器，层次选择器，过滤选择器，表单选择器

1. 什么是jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#test”).html();

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById(" test ").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

DOM对象转成jQuery对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

//dom转化为JQUery对象  $(DOM对象)
  var username = document.getElementById("username");
  var $username = $(username);

jQuery对象转成DOM对象

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

   //JQUERY对象转化为DOM对象
   //方法一：jquery对象是一个数组对象，获取利用索引值进行转换成DOM对象
   var $username = $("#username");
//   var username = $username[0];
//   alert(username.value);  
 
   //方法二：在jquery中，提供了一个get(index)方法，get()中传入索引值，来进行转换成DOM对象
   var username = $username.get(0);
   alert(username.value);

2.选择器

（1）基本选择器

基本选择器是 jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用).

1、#id 用法:
$(”#myDiv”); 返回值
单个元素的组成的集合。说明:这个就是直接选择html中的id=”myDiv”

2、Element 用法:
$(”div”) 返回值
集合元素。说明:element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div,input,
a等等.

3、class 用法:
$(”.myClass”) 返回值
集合元素。说明:这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

4、*
用法: $(”*”) 返回值集合元素。说明:匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN 用法:$(”div,span,p.myClass”)
返回值集合元素。说明:将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素pclass=”myClass”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
		 <input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
 
         <input type="text" value=""  name="username" id="username"/>
 
	     <div id="one">
	    	 id为one  
 
		 </div>
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="one" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		<span class="mini">    span
		</span>
 
	</body>
<script language="JavaScript">
		//<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
		//document.getElementById("b1").onclick = function(){}
		$("#b1").click(function(){
			/*
			 * css(name,value)
			 * 		* 改变标签的样式
			 * 		* name：属性名称，对应要到css帮助文档中查找对应的名称
			 * 		* value：属性的值
			 */
			$("#one").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
		$("#b2").click(function(){
			$("div").css("background","#00FFFF");
		});
 
		//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
		$("#b3").click(function(){
			$(".mini").css("background","#FF0033");
		});
 
		//<input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
		$("#b4").click(function(){
			$("*").css("background","#00FF33");
		});
 
		//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
		$("#b5").click(function(){
			//多个选择器并列使用，用","隔开
			$("span,#two").css("background","#3399FF");
		});
 
</script>
</html>

（2）层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器.

1 、ancestor descendant

用法:$(”form input”) ;
返回值集合元素

说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent>
child”区分开.

2、parent > child

用法: $(”form > input”) ; 返回值
集合元素

说明:在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next

用法:$(”label + input”) ;
返回值集合元素

说明:匹配所有紧接在prev元素后的next元素

4、prev ~ siblings

用法:$(”form ~ input”) ;
返回值集合元素

说明:匹配prev元素之后的所有siblings元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

注意: (“prev ~ div”)
选择器只能选择“# prev ”元素后面的同辈元素;而jQuery
中的方法siblings()与前后位置无关,只要是同辈节点就可以选取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
		 <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
		 <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
 
	     <div id="one">
	    	 id为one  
 
		 </div>
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="one" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one">
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
 
	</body>
<script language="JavaScript">
		//<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
		$("#b1").click(function(){
			//祖先元素和后代元素的关系
			$("body div").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
		$("#b2").click(function(){
			//父元素和子元素的关系
			$("body>div").css("background","#FF0033");
		});
 
		//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
		$("#b3").click(function(){
			$("#one+div").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
		$("#b4").click(function(){
			//获取指定元素的后面所有兄弟元素
			$("#two~div").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
		$("#b5").click(function(){
			//获取指定元素的所有兄弟元素
			$("#two").siblings("div").css("background","#0000FF");
		});
 
</script>
</html>

（3）基础过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以
“:” 开头

1、:first

用法:$(”tr:first”) ; 返回值单个元素的组成的集合

说明: 匹配找到的第一个元素

2、:last

用法:$(”tr:last”) 返回值集合元素

说明: 匹配找到的最后一个元素.与:first
相对应.

3、:not(selector)

用法:$(”input:not(:checked)”)返回值集合元素

说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

4、:even

用法:$(”tr:even”) 返回值集合元素

说明:匹配所有索引值为偶数的元素，从
0开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

5、: odd

用法:$(”tr:odd”)
返回值集合元素

说明:匹配所有索引值为奇数的元素,和:even对应,从0
开始计数.

6、:eq(index)

用法:$(”tr:eq(0)”) 返回值集合元素

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

7、:gt(index)

用法:$(”tr:gt(0)”) 返回值集合元素

说明: 匹配所有大于给定索引值的元素.

8、:lt(index)

用法:$(”tr:lt(2)”) 返回值集合元素

说明: 匹配所有小于给定索引值的元素.

9、:header(固定写法)

用法:$(”:header”).css(”background”,“#EEE”) 返回值集合元素

说明: 匹配如h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

10、:animated(固定写法) 返回值集合元素

说明: 匹配所有正在执行动画效果的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
		 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
		 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
		 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
		 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
		 <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
		 <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
 
	     <div id="one">
	    	 id为one  
 
		 </div>
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="one" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
		<br>
			<div id="mover" >
			 	  动画
			</div>
		<br>
 
	</body>
<script language="JavaScript">
		//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
		$("#b1").click(function(){
			$("div:first").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
		$("#b2").click(function(){
			$("div:last").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
		$("#b3").click(function(){
			//包含没有class属性的标签
			$("div:not(.one)").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
		$("#b4").click(function(){
			$("div:even").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
		$("#b5").click(function(){
			$("div:odd").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
		$("#b6").click(function(){
			$("div:gt(3)").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
		$("#b7").click(function(){
			$("div:eq(3)").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
		$("#b8").click(function(){
			$("div:lt(3)").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
		$("#b9").click(function(){
			$(":header").css("background","#0000FF");
		});
 
		//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
		function mover(){
			$("#mover").slideToggle("slow",mover);
		}
		mover();
 
		$("#b10").click(function(){
			$(":animated").css("background","#0000FF");
		});
 
</script>
</html>

（4）内容过滤选择器

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

1、:contains(text)

用法: $(”div:contains(’John’)”) 返回值
集合元素

说明:匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

2、:empty

用法: $(”td:empty”) 返回值
集合元素

说明:匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法:$(”div:has(p)”).addClass(”test”) 返回值
集合元素

说明:匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

4、:parent

用法: $(”td:parent”) 返回值
集合元素

说明:匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
		 <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
 
	     <div id="one">
	    	 id为one   div
 
		 </div>
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="one" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
		<div class="one">
 
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
 
	</body>
<script language="JavaScript">
	//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("div:contains('di')").css("background","#0000FF");
	});
 
	//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
	$("#b2").click(function(){
		$("div:empty").css("background","#0000FF");
	});
 
	//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
	$("#b3").click(function(){
		$("div:has(.mini)").css("background","#0000FF");
	});
 
	//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
	$("#b4").click(function(){
		$("div:parent").css("background","#0000FF");
	});
 
	//<input type="button" value=" 改变不含有文本 di 的 div 元素的背景色"  id="b5"/>
	$("#b5").click(function(){
		$("div:not(:contains('di'))").css("background","#0000FF");
	});
 
</script>
</html>

（5）可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素

1、:hidden

用法: $(”tr:hidden”) 返回值
集合元素

说明: 匹配所有的不可见元素，input元素的type属性为“hidden”的话也会被匹配到.意思是css中display:none和inputtype=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”,点号”.”和逗号”,”的区别.

2、:visible

用法: $(”tr:visible”) 返回值
集合元素

说明: 匹配所有的可见元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
 
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	<body>
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>
		 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
		 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
 
		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
 
	     <div id="one">
	    	 id为one   div
 
		 </div>
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="visible" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
		<div class="visible" >
		 	  这是隐藏的xx
		</div>
 
		<div class="one">
 
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
 
	</body>
<script language="JavaScript">
	//<input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("div:visible").css("background","#0000FF");
	});
 
	//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>
	$("#b2").click(function(){
		$("div:hidden").show().css("background","#0000FF");
	});
 
	//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
	$("#b3").click(function(){
		/*
		 * <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 */
		var $inputs = $("input:hidden");
 
//		for(var i=0;i<$inputs.length;i++){
//			var input = $inputs[i];
//
//			alert(input.value);
//		}
 
		/*
		 * each(function(index,domEle){})
		 * 		* jquery中的普通遍历方法，需要jquery对象来调用
		 * 		* 回调函数：function(index,domEle){}
		 * 			* index：获取到的标签的索引值
		 * 			* domEle：dom对象
		 */
		$inputs.each(function(index,domEle){
			//alert(domEle.value);  //不一定行
			//alert($(domEle).val());
			//alert(this.value);		//this代表的是domEle
			alert($(this).val());
		});
 
	});
 
	//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
	$("#b4").click(function(){
		/*
		 * <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 */
		var $inputs = $("input:hidden");
 
		/*
		 * jquery.each(object,function(index,domEle){})
		 * 		* 全局遍历函数，不需要jquery对象来调用
		 * 		* object：要遍历的数组或对象
		 * 		* 回调函数：function(index,domEle){}
		 * 			* index：获取到的标签的索引值
		 * 			* domEle：dom对象
		 */
		$.each($inputs,function(index,domEle){
			alert(domEle.value);
		});
 
	});
 
</script>
</html>

（6）属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

1、[attribute]

用法: $(”div[id]“) ; 返回值
集合元素

说明:匹配包含给定属性的元素.例子中是选取了所有带”id”属性的div标签.

2、[attribute=value]

用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值
集合元素

说明:匹配给定的属性是某个特定值的元素.例子中选取了所有name属性是newsletter的input元素.

3、[attribute!=value]

用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值
集合元素

说明:匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的:not派上了用场.

4、[attribute^=value]

用法: $(”input[name^=‘news’]“) 返回值
集合元素

说明:匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

5、[attribute$=value]

用法: $(”input[name$=‘letter’]“) 返回值
集合元素

说明:匹配给定的属性是以某些值结尾的元素.

6、[attribute*=value]

用法: $(”input[name*=‘man’]“) 返回值
集合元素

说明:匹配给定的属性是以包含某些值的元素.

7、[attributeFilter1][attributeFilter2][attributeFilterN]

用法: $(”input[id][name$=‘man’]“) 返回值
集合元素

说明:复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有id属性,并且它的name属性是以man结尾的元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
 
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 含有属性title 的div元素"  id="b1"/>
		 <input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
		 <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
		 <input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
		 <input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
		 <input type="button" value="属性title值 含有es的div元素."  id="b6"/>
		 <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
 
		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
 
	     <div id="one">
	    	 id为one   div
 
		 </div>
 
		 <div id="two" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="visible" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
		<div class="visible" >
		 	  这是隐藏的
		</div>
 
		<div class="one">
 
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
 
	</body>
<script language="JavaScript">
		//<input type="button" value=" 含有属性title 的div元素"  id="b1"/>
		$("#b1").click(function(){
			$("div[title]").css("background","#0000FF");
		});
 
		//<input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
		$("#b2").click(function(){
			$("div[title=test]").css("background","#0000FF");
		});
 
		//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
		$("#b3").click(function(){
			$("div[title!=test]").css("background","#0000FF");
		});
 
		//<input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
		$("#b4").click(function(){
			$("div[title^=te]").css("background","#0000FF");
		});
 
		//<input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
		$("#b5").click(function(){
			$("div[title$=est]").css("background","#0000FF");
		});
 
		//<input type="button" value="属性title值 含有es的div元素."  id="b6"/>
		$("#b6").click(function(){
			$("div[title*=es]").css("background","#0000FF");
		});
 
		//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
		$("#b7").click(function(){
			//多个属性过滤选择器并列使用，就这样并列放置就OK
			$("div[id][title*=es]").css("background","#0000FF");
		});
 
</script>
</html>

（7）子元素过滤选择器

1、:nth-child(index/even/odd/equation)

用法: $(”ul li:nth-child(2)”)
返回值集合元素

说明:匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤 (Basic
Filters)中的eq()有些类似,不同的地方就是前者是从0开始,后者是从1开始.

2、:first-child

用法: $(”ul li:first-child”)
返回值集合元素

说明:匹配第一个子元素.’:first’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

3、:last-child

用法: $(”ul li:last-child”)
返回值集合元素

说明:匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

4、: only-child

用法: $(”ul li:only-child”)
返回值集合元素

说明:如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
 
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
		 <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
		 <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
		 <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
 
		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
 
	     <div id="one">
	    	 id为one   div
 
		 </div>
 
		 <div id="one" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		 <div class="one"  title="test">
		       <div  class="mini" >class是 mini******</div>
		</div>
 
		 <div class="visible" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"   (**************
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >cdddddddlass是 mini</div>
		</div>
 
		<div class="visible" >
		 	  这是隐藏的
		</div>
 
		<div class="one">
 
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
 
	</body>
<script language="JavaScript">
	//<input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
	$("#b1").click(function(){
		/*
		 * 	* :nth-child()子元素过滤选择器，使用时需在其前面增加空格
		 * 	* :nth-child()子元素过滤选择器，其索引值是从"1"开始
		 */
 
		$("div[class=one] :nth-child(2)").css("background","#0000FF");
	});
 
	//<input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
	$("#b2").click(function(){
		$("div[class=one] :first-child").css("background","#0000FF");
	});
 
	//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
	$("#b3").click(function(){
		$("div[class=one] :last-child").css("background","#0000FF");
	});
 
	//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
	$("#b4").click(function(){
		$("div[class=one] :only-child").css("background","#0000FF");
	});
 
</script>
</html>

（8）表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

1、:enabled

用法: $(”input:enabled”)
返回值集合元素

说明:匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

2、:disabled

用法: $(”input:disabled”)
返回值集合元素

说明:匹配所有不可用元素.与上面的那个是相对应的.

3、:checked

用法: $(”input:checked”)
返回值集合元素

说明:匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

4、:selected

用法: $(”select option:selected”)
返回值集合元素

说明:匹配所有选中的option元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
 
         <input type="text" value="不可用值1" disabled="disabled">
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
 
		 <br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
 
		 <br>
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
         <br>
 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
 
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select>
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="one" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
	</body>
<script language="JavaScript">
		//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		$("#b1").click(function(){
			/*
			 * <input type="text" value="不可用值1" disabled="disabled">
				 <input type="text" value="可用值1" >
				 <input type="text" value="不可用值2" disabled="disabled">
				 <input type="text" value="可用值2" >
			 */
			$("input[type=text]:enabled").val("xxx");
 
		});
 
		//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		$("#b2").click(function(){
			$("input[type=text]:disabled").val("xxx");
		});
 
		//<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
		$("#b3").click(function(){
			/*
			 * <input type="checkbox" name="items" value="美容" >美容
				 <input type="checkbox" name="items" value="IT" >IT
				 <input type="checkbox" name="items" value="金融" >金融
				 <input type="checkbox" name="items" value="管理" >管理
			 */
			alert($("input[type=checkbox]:checked").length);
 
		});
 
		//<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
		$("#b4").click(function(){
			/*
			 * <select name="job" id="job" multiple="multiple" size=4>
		          	<option >程序员</option>
					<option>中级程序员</option>
					<option>高级程序员</option>
					<option>系统分析师</option>
		          </select>
 
		          <select name="edu" id="edu">
		          	<option>本科</option>
					<option>博士</option>
					<option>硕士</option>
					<option>大专</option>
		          </select>
			 */
			$("select option:selected").each(function(index,domEle){
				alert($(domEle).text());
			});
 
		});
 
</script>
</html>

（9）表单选择器

1、:input

用法:$(”:input”) ;
返回值集合元素

说明:匹配所有
input, textarea, select 和
button 元素

2、:text

用法:$(”:text”) ;
返回值集合元素

说明:
匹配所有的单行文本框.

3、:password

用法:$(”:password”) ;
返回值集合元素

说明: 匹配所有密码框.

4、:radio

用法:$(”:radio”) ;
返回值集合元素

说明: 匹配所有单选按钮.

5、:checkbox

用法:$(”:checkbox”) ;
返回值集合元素

说明:
匹配所有复选框

6、:submit

用法:$(”:submit”) ;
返回值集合元素

7、:image

用法:$(”:image”)
返回值集合元素

说明: 匹配所有图像域.

8、:reset

用法:$(”:reset”) ;
返回值集合元素

说明: 匹配所有重置按钮.

9、:button

用法:$(”:button”) ;
返回值集合元素

说明: 匹配所有按钮.这个包括直接写的元素button.

10、:file

用法:$(”:file”) ;
返回值集合元素

说明: 匹配所有文件域.

11、:hidden

用法:$(”input:hidden”) ;
返回值集合元素

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.

注意:
要选取input中为hidden值的方法就是上面例子的用法,但是直接使用
“:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
 
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
 
	</head>
 
	<body>
 
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=":input"  id="b1"/>
		 <input type="button" value=":text"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
 
         <input type="text" value="不可用值1" disabled="disabled">
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
 
		 <br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
 
		 <br>
		  <input type="radio" name="sex" value="男" checked="checked" >男
		  <input type="radio" name="sex" value="女" >女
         <br>
 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option value="程序员" selected="selected" >程序员</option>
			<option value="中级程序员" >中级程序员</option>
			<option value="高级程序员">高级程序员</option>
			<option value="系统分析师">系统分析师</option>
          </select>
 
          <select name="edu" id="edu">
          	<option value="本科">本科</option>
			<option value="博士">博士</option>
			<option value="硕士">硕士</option>
			<option value="大专">大专</option>
          </select>
 
	  	 <textarea cols=4 rows=4>textarea</textarea>
 
		 <button value="确定">确定</button>	
 
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
 
		 <div class="one" >
		 	    class是 one
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
 
	</body>
<script language="JavaScript">
	//<input type="button" value=":input"  id="b1"/>
	$("#b1").click(function(){
		$(":input").each(function(index,domEle){
			alert($(domEle).val());
		});
	});
 
</script>
</html>

JQuery -- 介绍，选择器及其示例，基本选择器，层次选择器，过滤选择器，表单选择器的更多相关文章

jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
Jquery选择器分类：基本选择器，层次选择器，过滤选择器，表单选择器。
基本选择器说明:通过元素id.class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test& ...
jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
深入学习jQuery选择器系列第七篇——表单选择器
× 目录 [1]表单元素 [2]对象属性前面的话无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素表单 ...
三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器
1.:input表单选择器如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...
jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
属性.表单过滤器属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
jQuery事件篇---过滤选择器 & 表单选择器
内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器发文不易,转载请注明出处! 过滤选 ...
第一百六十八节，jQuery，表单选择器
jQuery,表单选择器学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也 ...
jquery表单选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

Less-loops循环
loop循环 example: .test(@i) when (@i > 0) { .test((@i - 1)); .study@{i} { width: (10px * @i); } } d ...
J2EE知识体系（简单整理）
mongoDB-----针对某个或多个文档只需要部分更新可使用原子的更新修改器
update() db.collection.update( <query>, <update>, { upsert: <boolean>, multi: < ...
kafka_2.11-0.10.1.1集群搭建安装配置
在搭建kafka集群之前,请保证zookeeper已安装. 1.下载官网下载链接:http://mirrors.tuna.tsinghua.edu.cn/apache/kafka/0.10.1.1/ ...
ES正在弱化type这个概念
百度Elasticsearch-产品描述-介绍-百度云 https://cloud.baidu.com/doc/BES/System.html#.E5.9F.BA.E6.9C.AC.E6.A6.82. ...
Internet Explorer 1.0到9.0截图画廊
Internet Explorer 1.0 Windows 95 原先并没有IE,IE1.0是通过一个名叫Windows 95 Plus!Pack的扩展包来到用户的电脑中的,它的到来改变了Netsca ...
【我的Android进阶之旅】解决bug: Expected file scheme in URI: content://downloads/my_downloads/12
一.错误描述今天测试MM用HTC手机测试某个模块的时候crash了,抓log后发现是使用DownloadManager下载apk安装包然后自动安装的时候,抛了异常:java.lang.Illegal ...
struts2的HelloWorld的基本过程
login.jsp中 <form action="Login"... 该页面提交后, web.xml中设置的过滤器会起作用 <filter> ...
oracle入门（2）—— 使用图形工具navicat for oracle
[本文介绍] 本文将介绍如何使用图形工具navicat for oracle连接本地数据库以及远程访问服务器数据库. [下载地址] http://www.navicat.com.cn/downlo ...
Angular学习笔记—创建一个angular项目
开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angul ...

JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器的更多相关文章

随机推荐

热门专题

JQuery -- 介绍，选择器及其示例，基本选择器，层次选择器，过滤选择器，表单选择器

JQuery -- 介绍，选择器及其示例，基本选择器，层次选择器，过滤选择器，表单选择器的更多相关文章