jQuery选择器的奥妙

jQuery选择器完全继承了CSS选择器的风格,利用jQuery选择器可以非常便捷快速地找出特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。 jQuery选择器简洁的书写,且支持CSS1到CSS3选择器,完善的处理机制,用jquery获取网页中不存在的元素也不会报错使得其深受大家喜爱。接下来让我们更加深刻的了解它吧!

一、基本选择器
jQuery中最常用、最简单的选择器,它通过id、class和标签名来查找DOM元素。
id选择器:( “#id” )——单个  
       类选择器,
( “.class” )——多个
元素选择器:【原生方法getElementsByTagName()函数】 (element) (“*”)
将每个选择器匹配到的元素合并后一起返回:$(“div,span,p.myClass”)
二、层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素、子元素、
相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。
层次选择器的用法
在层次选择器中前两个选择器比较常用,而后面两个因为在jQuery中有更简单的方法
代替,所以使用几率相对少一点。
如,可以用next()方法来代替 (prev+next) (“.one+div”);与 (.one).next(div);nextAll (“prev~siblings”)选择器
(“#prev~div”);与(“#prev”).nextAll(“div”);
siblings()方法与 (prev siblings) (“prev~siblings”)选择器只能选择“prev”元素后面的同辈

元素。而siblings()方法与前后位置无关,只要是同辈节点就都能匹配。
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、子元素过滤和表单对象过滤选择器。
3.1基本过滤选择器
基本过滤选择器的用法
3.2内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
内容过滤选择器用法
3.3可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。:hidden选择器,不仅仅包含样式是display=”none”的元素,还包括隐藏表单、visibility等等
可见性过滤选择器的用法
3.4 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
3.4 属性过滤选择器
3.5子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他选择器稍微有点复杂,但只要将元素的父元素和子元素区分清楚,其实也是很简单的。
子元素选择器的用法
3.6表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤。
表单对象选择器的用法
四、表单选择器
为了使用户能够更加灵活地操作表单,jQuery中专门加入了表单选择器。利用这个选择器,能极其方便地获取到表单的某个或某类型的元素。
表单选择器介绍表
五、其他选择器
5.1MoreSelectors for jQuery
jQuery插件,用于增加更多的选择器,插件地址: http://plugins.jquery.com/project/moreSelectors
5.2Basic Xpath
插件地址: http://plugins.jquery.com/project/xpath
5.3document.getElementsBySelector()方法: http://www.openjs.com/scripts/dom/css_selector/
5.4cssQuery
Dean Edward编写的一款利用CSS选择器查找元素的脚本。支持所有CSS1、CSS2以及部分CSS3选择器,jQuery的
选择器其实是源于此,他支持一些jQuery尚不支持的选择器。
官方网站: http://dean.edwards.name/my/cssQuery/
5.5querySelectorAll()
用于实现通过CSS选择器来获取元素,不是一个脚本库而是W3C在Selectors API草案中提到的方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值