首页 > 代码库 > Jquery选择器小节

Jquery选择器小节

在学习Jquery选择器之前我们先简单的回想一下CSS选择器;

以下为CSS常用选择器:
 
选择器语法描述示例
标签选择器

E{CSS规则 }

以文档元素作为选择器 
1 tr{2   border: solid 1px red;3   width: 120px;4 }5 a{6   text-decoration: none;7 }

 

 ID选择器 #ID{CSS规则 } 以文档的唯一标识符ID作为选择符 
1 #note{2   border: solid 1px red;3   width: 120px;4 }  

 

 类选择器 E.className{CSS规则 } 以文档元素的class作为选择符 
1 div.note{2   border: solid 1px red;3   width: 120px;4 } 5 .note{6   border: solid 1px red;7   width: 120px;8 } 

 

群组选择器  E1,E2,E3{CSS规则 } 多个选择符应用同样的样式 
td,p,div.aa{  font-size: 12px;  width: 120px;} 

 

后代选择器  E F{CSS规则 } 元素E的任意后代元素F 
#main div{  border: solid 1px red;  width: 120px;} 

 

通配选择符  *{CSS规则 } 以文档的所有元素作为选择符 
*{  font-size:12px;} 

 

  • Jquery基本选择器

  基本选择器是Jquery中最常用的选择器,也是最简单的选择器,它通过元素ID、class和标签等查找DOM元素。在网页中每一个ID名称只能出现一次,class允许出现多次。基本选择器的介绍说明如下:

 选择器说明 示例 返回结果
 #id 根据给定的id匹配一个元素 $(‘#test‘):选取id为test的元素 单个元素
 .class根据给定的类名匹配元素 $(‘.test‘):远去所有的class为test的元素集合元素 
 element 根据给定的元素名匹配元素 $(‘p‘):选取所有的p元素 集合元素 
 * 匹配所有的元素 $(‘*‘):选取所有的元素 集合元素 
 selector1, selector2, selector3... 将每一个选择器匹配到的元素合并后一起返回 $(‘div,span,p.myClass‘):选取所有的div,span和拥有class为myClass的p元素 集合元素 

 

  •  Jquery层次选择器

Jquery选择器小节