首页 > Web开发 > 详细

JQuery 选择器

时间:2015-11-15 10:48:00      阅读:158      评论:0      收藏:0      [点我收藏+]

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

 

JQuery 选择器

原文:http://www.cnblogs.com/nonameG/p/4966208.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!