1.jQuery选择器类似于CSS选择器,用来选取网页中的元素
示例:
$("h3").css("background","#09F");
获取并设置网页中所有<h3>元素的背景“h3”为选择器语法,必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法
2.jQuery基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
名称 |
语法构成 |
描述 |
示例 |
标签选择器 |
element |
根据给定的标签名匹配元素 |
$(h2 )选取所有h2元素 |
类选择器 |
.class |
根据给定的class匹配元素 |
$( .title)选取所有class为title的元素 |
ID选择器 |
#id |
根据给定的id匹配元素 |
$( #title)选取id为title的元素 |
并集选择器 |
selector1,selector2,...,selectorN |
将每一个选择器匹配的元素合并后一起返回 |
$(div,p,.title )选取所有div、p和拥有class为title的元素 |
全局选择器 |
* |
匹配所有元素 |
$(* )选取所有元素 |
3.jQuery层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
名称 |
语法构成 |
描述 |
示例 |
后代选择器 |
ancestor descendant |
选取ancestor元素里的所有descendant(后代)元素 |
$(#menu span )选取#menu下的元素 |
子选择器 |
parent>child |
选取parent元素下的child(子)元素 |
$( #menu>span )选取#menu的子元素 |
相邻元素选择器 |
prev+next |
选取紧邻prev元素之后的next元素 |
$( h2+dl )选取紧邻 元素之后的同辈元素 |
同辈元素选择器 |
prev~sibings |
选取prev元素之后的所有siblings元素 |
$( h2~dl )选取 元素之后所有的同辈元素 |
4.jQuery属性选择器
(1)属性选择器通过HTML元素的属性来选
语法构成 |
描述 |
示例 |
[attribute^=value] |
选取给定属性是以某些特定值开始的元素 |
$( [href^='en'] )选取href属性值以en开头的元素 |
[attribute$=value] |
选取给定属性是以某些特定值结尾的元素 |
$( [href$='.jpg'] )选取href属性值以.jpg结尾的元素 |
[attribute*=value] |
选取给定属性是以包含某些值的元素 |
$( [href* ='txt'] )选取href属性值中含有txt的元素 |
(2)属性选择器可以根据是否包含某属性来选取元素
示例:a标签带有class属性
$("#news a[class]").css("background","#c9cbcb");
(3)属性选择器可以根据属性的值来选取元素
示例:class属性值为hot
$("#news a[class='hot']").css("background","#c9cbcb");
(4)属性选择器可以指定选取不等于属性是某个特定值的元素
示例:class值不等于hot
$("#news a[class!='hot']").css("background","#c9cbcb");
(5)属性选择器可以指定属性值以指定值开头的元素
示例:a标签href属性值以www开头
$("#news a[href^='www']").css("background","#c9cbcb");
(6)属性选择器可以指定属性值以指定值结尾的元素
示例:a标签href属性值以html结尾
$("#news a[href$='html']").css("background","#c9cbcb");
(7)属性选择器可以指定属性值包含指定值的元素
示例:a标签href属性值包含“k2”的元素
$("#news a[href*='k2']").css("background","#c9cbcb");
5.过滤选择器
通过特定的过滤规则来筛选出所需的元素
主要分类
基本过滤选择器可见性过滤选择器表单对象过滤选择器内容过滤选择器、子元素过滤选择器……
6.基本过滤选择器
语法 |
描述 |
示例 |
:eq(index) |
选取索引等于index的元素(index从0开始) |
$(li:eq(1) )选取索引等于1的
|
:gt(index) |
选取索引大于index的元素(index从0开始) |
$( li:gt(1) )选取索引大于1的
|
:lt(index) |
选取索引小于index的元素(index从0开始) |
$(“li:lt(1)” )选取索引小于1的
|
:header |
选取所有标题元素,如h1~h6 |
$(:header )选取网页中所有标题元素 |
:focus |
选取当前获取焦点的元素 |
$(:focus )选取当前获取焦点的元素 |
:animated |
选择所有动画 |
$(:animated )选取当前所有动画元素 |
7.可见性过滤选择器
通过元素显示状态来选取元素
语法 |
描述 |
示例 |
:visible |
选取所有可见的元素 |
$(:visible )选取所有可见的元素 |
:hidden |
选取所有隐藏的元素 |
$(:hidden ) 选取所有隐藏的元素 |
$("p:hidden").show(); $("p:visible").hide();
8.jQuery选择器注意事项
(1)特殊符号的转义
<divid="id#a">aa</div><divid="id[2]">cc</div>
(2)获取这两个元素的选择器