JQuery 选择器

选择器是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 选取当前正在执行动画的所有元素

 

posted @ 2015-11-15 10:26  无名氏G  阅读(167)  评论(0编辑  收藏  举报