选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。
1.CSS选择器:要使用某个样式应用于特定的HTML元素,首先需要找到该元素。在CSS中,执行这一任务的表现规则称为CSS选择器。
选择器
选择器 | 语法 | 描述 | 示例 |
ID选择器 | #ID{CSS规则} | 已文档元素的唯一标识符ID作为选择器 | #note{font-size:14px;} |
类选择器 | .className{CSS规则} | 以文档元素的CSS作为选择器 | div.note{font-size:14px} |
组群选择器 | E1,E2,E3{CSS规则} | 多个选择符应用同样的样式规则 | td,p,div,a{font-size:14px} |
后代选择器 | E F{CSS规则} | 元素E的任意后代元素F | #links a{color:red;} |
通配符选择器 | *{CSS规则} | 以文档的所有元素作为选择符 | *{font-size:14px} |
此外CSS中还有伪类选择器(E:F{CSS})、子选择器(E>F{CSS})、临近选择器(E+F{CSS})和属性选择器(E[attr]{CSS})
2.jQuery选择器:完全继承了CSS的风格。利用jQuery选择器可以,可以非常便捷地找到特定的DOM元素,然后给他添加行为而无需担心浏览器是否支持这一选择器。
$(function(){$(".demo").click(function(){ alert("jQuery demo!") })})
jQuery选择器的优势
1、简洁的写法
2、支持CSS1到CSS3选择器
3、完善的处理机制
注:如果使用jQuery检查某个元素在网页是否存在时,应该使用获取到的元素长度来判断:
if($("#test".length<=0)){ alert(#test不存在!) }
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
1基本选择器:jQuery中最常用的选择器,通过ID CLASS和标签名来查找DOM元素。
2层次选择器:通过DOM元素之间的层次关系来获取特定的元素,例如后代元素、子元素、相邻和兄弟元素等。
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里所有的后代元素 | 集合元素 | $("div span") |
$("parent>child") | 选取parent元素下的child元素 | 集合元素 | $("div>span") |
$("prev+next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one+div") |
$("prev~siblings") | 选取prev元素之后的所有siblibngs元素 | 合集元素 | $("#two~div") |
3过滤选选择器:通过特定的过滤规则来筛选出所需的DOM元素,规则与CSS中伪类选择器相同:可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器
一、基本过滤选择器
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 偶数选择器,(0开始)
:odd 奇数选择器
:eq(index) 选取索引等于index的元素
:gt(index)选取索引大于index的元素(不等于index)
:lt(index)选取索引小于index的元素
:header 选取所有的标题元素
:animated 选取当前正在执行动画的所有元素