学习笔记《锋利的jQuery》-jQuery选择器

罗毅
2023-12-01

选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。

一、jQuery选择器是什么

1、CSS选择器

在开始学习jQuery选择器之前,有必要简单了解下CSS(Cascading Style Sheets,层叠样式表)技术。

CSS是一项出色的技术,它使得网页的结构和表现的样式完全分离。利用CSS选择器能轻松的对某个元素添加样式而不改动HTML结构,只需通过添加不同的CSS规则,就可以得到各种不同样式的网页。

要使某个样式运用于特定的HTML元素,首先需要找到改元素。在CSS中,执行这一任务的表现规则称为CSS选择器。

常用的CSS选择器
选择器语法描述示例
标签选择器E{  CSS规则   }以文档元素作为选择符

td{  font-size:14px; }

a{  text-decoration:none;  }

ID选择器#ID{  CSS规则  }以文档元素的唯一标识符ID作为选择符#note{  font-size:14px; }
类选择器E.className{  CSS规则  }以文档元素的class作为选择符

div.note{  font-size:14px;  }

.dream{  font-size:14px;   }

群组选择器E1,E2,E3{  CSS规则  }多个选择符应用同样的样式规则td,p,div.a{ fone-size:14px;}
后代选择器E  F{  CSS规则  }元素E的任意后代元素F#links a{  color:red;}
通配选择器*{    CSS规则  }以文档的所有元素作为选择符*{  fone-size:14px;}

注:把CSS应用到网页中有3中方式,即行间样式表、内部样式表和外部样式表。

2、jQuery选择器

jQuery选择器完全继承了CSS选择器的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。
CSS获取到元素的代码如下:
.demo{
...
}
jQuery获取元素的代码如下:
$(".demo")
...

二、jQuery选择器的优势

1、简洁的写法

2、支持CSS1到CSS3选择器 多种浏览器的兼容

3、完善的处理机制

三、jQuery选择器

1、基本选择器

选择器示例
#id根据给定的id匹配一个元素,eg:$("#test")选取id为test的元素
.class根据给定的类名匹配元素,eg:$(".test")选取所有class为test的元素
element根据给定的元素名匹配元素,eg:$("p")选取所有的<p>元素
*匹配所有元素,eg: $("*")选取所有的元素

selector1,selector2,......,selectorN

将每一个选择器匹配到的元素, 合并后一起返回,eg:$("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

2、层次选择器

选择器示例
$("ancestor descendant")$("div span")选取<div>里的所有<span>(后代)元素,多级
$("parent>child")$("div > span")选取<div>元素下的元素名为<span>的(子)元素,一级
$("prev+next")$(".one + div")选取class为one的下一个<div>元素
$("prev~siblings")$("#two ~ div")选取class为two的元素后面的所有<div>兄弟元素

3、过滤选择器 

基本过滤选择器
选择器示例
:first$("div:first")选取所有<div>元素中的 第一个<div>元素
:last$("div:first")选取所有<div>元素中的 最后一个<div>元素
:not(selector)$("input:not(.myClass)")选取class 不是myClass的<input>元素
:even$("input:even")选取索引是偶数的<input>元素
:odd$("input:odd")选取索引是奇数的<input>元素
:eq(index)$("input:eq(1)")选取索引等于1的<input>元素,索引从0开始
:gt(index)$("input:gt(1)")选取索引大于1的<input>元素,索引从0开始
:lt(index)$("input:lt(1)")选取索引小于1的<input>元素,索引从0开始
:header$(":header")选取网页中所有的标题元素,例如:H1,H2
:animated$("div:animated")选取正在执行动画的<div>元素
内容过滤选择器
选择器示例
:contains(text)$(div:contains('我')")选取含有文本 “我”的<div>元素
:empty$(div:empty")选取不含子元素 (包括文本元素)的<div>元素
:has(selector)$(div:has(p)")选取含有<p>元素的<div>元素
:parent

$(div:parent")选取含子元素(包括文本元素)的<div>元素

可见性过滤选择器
选择器示例
:hidden$(":hidden")选取所有不可见的元素
:visible$(div:visible")选取所有可见的<div>元素
属性过滤选择器
选择器示例
[attribute]$(div[id]")选取拥有属性id的<div>元素
[attribute=value]$(div[title=test]")选取title属性 为“test”的<div>元素
[attribute!=value]$(div[title!=test]")选取title属性 不等于“test”的<div>元素, 注意:没有属性title的<div>元素 也会被选取
[attribute^=value]$(div[title^=test]")选取title属性 以“test”开始的<div>元素
[attribute$=value]$(div[title$=test]")选取title属性 以“test”结束的<div>元素
[attribute*=value]$(div[title*=test]")选取title属性 含有“test”的<div>元素
[selector1][selector2] [selectorN]$(div[id][title*=test]")选取拥有属性id, 且title属性含有“test”的<div>元素
子元素过滤选择器
选择器示例
:nth-chlid (index/even /odd/equation)

:nth-chlid(even)能选取每个父元素 下的索引值是偶数的元素

 :nth-chlid(odd)能选取每个父元素 下的索引值是奇数的元素

 :nth-chlid(2)能选取每个父元素 下的索引值等于2的元素

 :nth-chlid(3n)能选取每个父元素 下的索引值是3的倍数的元素 (索引值从0开始)

 :nth-chlid(3n+1)能选取每个父元素 下的索引值是(3n+1)的元素 (索引值从0开始)

:first-child

$(ul li:first-child")选取每个<ul>中 第1个<li>元素

 :first只返回单个元素,

 而:first-child返回每个父元素 匹配的第一个子元素。

:last-child$(ul li:last-child")选取每个<ul>中 最后1个<li>元素
:only-child$(ul li:only-child")选取每个<ul>中 是唯一子元素 的<li>元素
表单过滤选择器
选择器示例
:enabled$("#form1 :enabled")选取id为form1的表单内 所有可用的元素
:disabled$("#form2 :disabled")选取id为form2的表单内 所有不可用的元素
:checked$(“input:checked")选取所有被选中的<input>元素(单选框、复选框)
:selected$(“select:selected")选取所有被选中的选项元素(下拉列表)

4、表单选择器

选择器示例
:input$(":input") 选取所有的<input>、<textarea>、 <select>和<buttion>元素
:text$("#form1 :text")选取id为form1的表单内 所有的单行文本框元素
:password$(":password")选取所有的密码框元素
:radio$(":radio")选取所有的单选框元素
:checkbox$(":checkbox")选取所有的复选框元素
:submit$(":submit")选取所有的提交按钮元素
:image$(":image")选取所有的图像按钮元素
:reset$(":reset")选取所有的重置按钮元素
:button$(":button")选取所有的按钮元素
:file$(":file")选取所有的文件上传域元素
:hidden$(":hidden")选取所有的不可见元素

四、选择器中的一些注意事项

1、选择器中含有特殊符号的注意事项

选择器中含有”.“、”#“、”(“或”]“等特殊字符。例如:
$('#id#b') 这样写会出错。正确的写法:$('#id\\#b') //转义特殊字符”#“

2、选择器中含有空格的注意事项

var $t_a = $(".test :hidden");//带空格 后代选择器
var $t_b = $(".test:hidden");//不带空格 过滤选择器

五、jQuery常用方法

1、show() 显示隐藏元素
2、css(name,value) 给元素设置样式
3、text(string) 设置所有匹配元素的文本内容
4、filter(expr) 筛选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合
5、addClass(class) 为匹配的元素添加指定的类名
6、removeClass(class) 为匹配的元素删除指定的类名
7、end() 重新定位上次操作的元素
8、toggle(fn1,fn2) 用于按钮交替一组动作

六、其它选择器

1、jQuery提供了选择器的扩展

虽然jQuery提供了很多的选择器,但还是可能不能满足各种多变的业务需要,不过jQuery选择器是可以进一步扩展的。

MoreSelectors for jQuery,这是一个jQuery插件,用于增加更多的选择器。例如:.color可以匹配颜色。插件地址:http://plugins.jquery.com/project/moreSelectors/

Basic XPath 这个插件可以让用户使用基本的XPath。为了提高效率,jQuery把XPath选择器改为插件实现。插件地址:http://plugins.jquery.com/project/xpath

2、其它使用CSS选择器的方法

document.getElementsBySelector() 通过选择器来获取文档元素。

cssQuery() 利用CSS选择器来查找元素。

querySelectorAll()利用CSS选择器来查找元素。

 类似资料: