jQuery四大选择器，以及例子来充分理解

1. jQuery选择器的优势：

(1) 代码更简单
(2) 支持CSS1到CSS3选择器
(3) 完善的处理机制

2. jQuery选择器的分类

（1） 基本选择器

      基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。

 

     

（2） 层次选择器

       层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。

 

     

（3） 过滤选择器

① 简单过滤选择器

        过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。

        

② 内容过滤选择器

        内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

     

③ 可见性过滤选择器

           可见性过滤选择器根据元素是否可见的特征来获取元素

             

④ 属性过滤选择器

       

⑤ 子元素过滤选择器

     

⑥ 表单对象属性过滤选择器

       此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

         

（4） 表单选择器

          

eg：HTML部分代码如下：

	
		
		


		
	
	
			
 表单对象属性过滤选择器.
		

			重置所有表单元素
			


			对表单内 可用input 赋值操作.
			对表单内 不可用input 赋值操作.
			



			

			可用元素： 
 不可用元素：
			
 可用元素： 
 不可用元素：
			

			
 多选框：
			

			test1
			test2
			test3
			test4
			test5
			

			
			

 下拉列表1：
			

			
				浙江
				湖南
				北京
				天津
				广州
				湖北
			

			

 下拉列表2：
			

			
				浙江
				湖南
				北京
				天津
				广州
				湖北
			
			



			

		

	

style.css部分代码如下：

div,span,p {
	width:140px;
	height:140px;
	margin:5px;
	background:#aaa;
	border:#000 1px solid;
	float:left;
	font-size:17px;
	font-family:Verdana;
}
div.mini { 
	width:55px;
	height:55px;
	background-color: #aaa;
	font-size:12px;
}
div.hide { 
	display:none;
}

结果截图如下：