JQuery之CSS选择器

最新推荐文章于 2022-07-11 18:43:42 发布

xw1985520

最新推荐文章于 2022-07-11 18:43:42 发布

阅读量439

点赞数

分类专栏： JQUERY 文章标签： jquery

JQUERY 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.选择对象

1).基本

·#id 根据给定的ID匹配一个元素。例如： $(“#id”) ·element 根据给定的元素名匹配所有元素。例如：$ (“div”)
·.class 根据给定的类匹配元素。例如： $(“.style1”); ·* 匹配所有元素。例如：$ (“*”)
·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$(“#id,div,.style1”)

2).表单

·:button 匹配所有按钮。例如： $(“:button”) ·:checkbox 匹配所有复选框。例如：$ (“:checkbox”)
·:file 匹配所有文件域。例如： $(“:file”) ·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$ (“input:hidden”)
·:image 匹配所有图像域。例如： $(“:image”) ·:input 匹配所有 input, textarea, select 和 button 元素。例如：$ (“:input”)
·:password 匹配所有密码框。例如： $(“:password”) ·:radio 匹配所有单选按钮。例如：$ (“:radio”)
·:reset 匹配所有重置按钮。例如： $(“:reset”) ·:submit 匹配所有提交按钮。例如：$ (“:submit”)
·:text 匹配所有的单行文本框。例如： $(“:text”) ·:header 匹配如 h1, h2, h3之类的标题元素。例如：$ (“:header”).css(“background”, “#EEE”);

2.筛选条件

1).属性筛选

·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如： $(“input[name*=’man’”) ·[attribute!=value] 匹配所有含有指定的属性，但属性不等于特定值的元素。例如：$ (input[name!=’man’);
·[attribute $=value] 匹配给定的属性是以某些值结尾的元素。例如：$ (“input[name $=’man’]”) ·[attribute=value] 匹配给定的属性是某个特定值的元素。例如：$ (“input[name=’man’]”);
·[attribute] 匹配包含给定属性的元素。例如： $(“div[id]”) ·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如：$ (“input[name^=’man’]”)
·[selector1][selector2][selectorN] 同时满足多个条件。例如： $("input[id][name$ =’man’]”)
·:hidden 匹配所有的不可见元素。例如： $(“tr:hidden”) ·:visible 匹配所有的可见元素。例如：$ (“tr:visible”)
·:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。例如： $(“input:checked”) ·:disabled 匹配所有不可用元素。例如：$ (“input:disabled”)
·:enabled 匹配所有可用元素。例如： $(“input:enabled”) ·:selected 匹配所有选中的option元素。例如：$ (“select option:selected”)

2).内容筛选

·:contains(text) 匹配包含给定文本的元素。例如： $(“div:contains(‘John’)”) ·:empty 匹配所有不包含子元素或者文本的空元素。例如：$ (“td:empty”)
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如： $(“div:has(p)”); ·:parent 匹配含有子元素或者文本的元素。例如：$ (“td:parent”)

3).层级筛选

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如： $(“form input”) ·parent > child 在给定的父元素下匹配所有的子元素。例如：$ (“form > input”)
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如： $(“label + input”) ·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$ (“form ~ input”)
·:first-child 匹配第一个子元素。例如： $(“ul li:first-child”) ·:last-child 匹配最后一个子元素。例如：$ (“ul li:last-child”)
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如： $(“ul li:nth-child(2)”) ·:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。例如：$ (“ul li:only-child”)

4).方法筛选

·:animated 匹配所有正在执行动画效果的元素。例如： $(“div:animated”); ·:eq(index) 匹配一个给定索引值的元素。例如：$ (“tr:eq(1)”)
·:even 匹配所有索引值为偶数的元素，从 0 开始计数。例如： $(“tr:even”) ·:first 匹配找到的第一个元素。例如：$ (“tr:first”)
·:gt(index) 匹配所有大于给定索引值的元素，从 0 开始计数。例如： $(“tr:gt(0)”) ·:last 匹配找到的最后一个元素。例如：$ (“tr:last”)
·:lt(index) 匹配所有小于给定索引值的元素。例如： $(“tr:lt(2)”) ·:not(selector) 去除所有与给定选择器匹配的元素。例如：$ (“input:not(:checked)”)
·:odd 匹配所有索引值为奇数的元素，从 0 开始计数。例如：$(“tr:odd”)
笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。

序号选择器含义
1. * 通用元素选择器，匹配任何元素
2. E 标签选择器，匹配所有使用E标签的元素
3. .info class选择器，匹配所有class属性中包含info的元素
4. #footer id选择器，匹配所有id属性等于footer的元素
实例：

* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }

二、多元素的组合选择器
序号选择器含义
5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
7. E > F 子元素选择器，匹配所有E元素的子元素F
8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
实例：

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }

三、CSS 2.1 属性选择器
序号选择器含义
9. E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）
10. E[att=val] 匹配所有att属性等于“val”的E元素
11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12. E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等
实例：

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

四、CSS 2.1中的伪类
序号选择器含义
13. E:first-child 匹配父元素的第一个子元素
14. E:link 匹配所有未被点击的链接
15. E:visited 匹配所有已被点击的链接
16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
17. E:hover 匹配鼠标悬停其上的E元素
18. E:focus 匹配获得当前焦点的E元素
19. E:lang(c) 匹配lang属性等于c的E元素
实例：

p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "/201D" "/201D" "/2019" "/2019"; }

五、 CSS 2.1中的伪元素
序号选择器含义
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一个字母
22. E:before 在E元素之前插入生成的内容
23. E:after 在E元素之后插入生成的内容
实例：

p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }

六、CSS 3的同级元素通用选择器
序号选择器含义
24. E ~ F 匹配任何在E元素之后的同级F元素
实例：

p ~ ul { background:#ff0; }

七、CSS 3 属性选择器
序号选择器含义
25. E[att^=”val”] 属性att的值以”val”开头的元素
26. E[att$=”val”] 属性att的值以”val”结尾的元素
27. E[att*=”val”] 属性att的值包含”val”字符串的元素
实例：

div[id^="nav"] { background:#ff0; }

八、CSS 3中与用户界面有关的伪类
序号选择器含义
28. E:enabled 匹配表单中激活的元素
29. E:disabled 匹配表单中禁用的元素
30. E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
31. E::selection 匹配用户当前选中的元素
实例：

input[type="text"]:disabled { background:#ddd; }

九、CSS 3中的结构性伪类
序号选择器含义
32. E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
实例：

p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
tr:nth-child(2n+11) { background:#ff0; }
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }

十、CSS 3的反选伪类
序号选择器含义
43. E:not(s) 匹配不符合当前选择器的任何元素
实例：

:not(p) { border:1px solid #ccc; }

十一、CSS 3中的 :target 伪类
序号选择器含义
44. E:target 匹配文档中特定”id”点击后的效果
请参看HTML DOG上关于该选择器的详细解释和实例。
二.jQuery选择器全解

通俗的讲, Selector选择器就是”一个表示特殊语意的字符串”. 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.
但是如何将jQuery选择器分类让我犯难. 因为书上的分类和jQuery官方的分类截然不同. 最后我决定以实用为主, 暂时不去了解CSS3选择器标准, 而按照jQuery官方的分类进行讲解.
jQuery的选择器支持CSS3选择器标准. 下面是W3C最新的CSS3选择器标准:
http://www.w3.org/TR/css3-selectors/
标准中的选择器都可以在jQuery中使用.
jQuery选择器按照功能主要分为”选择”和”过滤”. 并且是配合使用的. 可以同时使用组合成一个选择器字符串. 主要的区别是”过滤”作用的选择器是指定条件从前面匹配的内容中筛选, “过滤”选择器也可以单独使用, 表示从全部”*”中筛选. 比如:
$(“:[title]”) 等同于:$ (“*:[title]”)
而”选择”功能的选择器则不会有默认的范围, 因为作用是”选择”而不是”过滤”.
下面的选择器分类中, 带有”过滤器”的分类表示是”过滤”选择器, 否则就是”选择”功能的选择器.
jQuery选择器分为如下几类:
[说明]
1.点击”名称”会跳转到此方法的jQuery官方说明文档.
2.可以在下节中的jQuery选择器实验室测试各种选择器
1. 基础选择器 Basics
名称说明举例

id 根据元素Id选择 $(“divId”) 选择ID为divId的元素

element 根据元素的名称选择, $(“a”) 选择所有元素
.class 根据元素的css类选择 $(“.bgRed”) 选择所用CSS类为bgRed的元素 * 选择所有元素$ (“*”)选择页面所有元素
selector1,
selector2,
selectorN 可以将几个选择器用”,”分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $(“#divId, a, .bgRed”) [学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节”jQuery选择器实验室”进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询. 2.层次选择器 Hierarchy 名称说明举例 ancestor descendant 使用”form input”的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.$ (“.bgRed div”) 选择CSS类为bgRed的元素中的所有

元素.
parent > child 选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素. $(“.myList>li”) 选择CSS类为myList元素中的直接子节点

对象.
prev + next prev和next是两个同级别的元素. 选中在prev元素后面的next元素. $(“#hibiscus+img”)选在id为hibiscus元素后面的img对象. prev ~ siblings 选择prev后面的根据siblings过滤的元素注:siblings是过滤器$ (“#someDiv~[title]”)选择id为someDiv的对象后面所有带有title属性的元素
3.基本过滤器 Basic Filters
名称说明举例
:first 匹配找到的第一个元素查找表格的第一行: $(“tr:first”) :last 匹配找到的最后一个元素查找表格的最后一行:$ (“tr:last”)
:not(selector) 去除所有与给定选择器匹配的元素查找所有未选中的 input 元素: $(“input:not(:checked)”) :even 匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5…行:$ (“tr:even”)
:odd 匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行: $(“tr:odd”) :eq(index) 匹配一个给定索引值的元素注:index从 0 开始计数查找第二行:$ (“tr:eq(1)”)
:gt(index) 匹配所有大于给定索引值的元素
注:index从 0 开始计数查找第二第三行，即索引值是1和2，也就是比0大: $(“tr:gt(0)”) :lt(index) 选择结果集中索引小于 N 的 elements 注:index从 0 开始计数查找第一第二行，即索引值是0和1，也就是比2小:$ (“tr:lt(2)”)
:header 选择所有h1,h2,h3一类的header标签. 给页面内所有标题加上背景色: $(“:header”).css(“background”, “#EEE”); :animated 匹配所有正在执行动画效果的元素只有对不在执行动画效果的元素执行一个动画特效:$ (“#run”).click(function(){
$(“div:not(:animated)”).animate({ left: “+=20” }, 1000); }); 4. 内容过滤器 Content Filters 名称说明举例 :contains(text) 匹配包含给定文本的元素查找所有包含 “John” 的 div 元素:$ (“div:contains(‘John’)”)
:empty 匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素: $(“td:empty”) :has(selector) 匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类:$ (“div:has(p)”).addClass(“test”);
:parent 匹配含有子元素或者文本的元素查找所有含有子元素或者文本的 td 元素: $(“td:parent”) 5.可见性过滤器 Visibility Filters 名称说明举例 :hidden 匹配所有的不可见元素注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden. 查找所有不可见的 tr 元素:$ (“tr:hidden”)
:visible 匹配所有的可见元素查找所有可见的 tr 元素: $(“tr:visible”) 6.属性过滤器 Attribute Filters 名称说明举例 [attribute] 匹配包含给定属性的元素查找所有含有 id 属性的 div 元素:$ (“div[id]”)
[attribute=value] 匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:
$(“input[name=’newsletter’]”).attr(“checked”, true); [attribute!=value] 匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素:$ (“input[name!=’newsletter’]”).attr(“checked”, true);
[attribute^=value] 匹配给定的属性是以某些值开始的元素 $(“input[name^=’news’]”) [attribute$ =value] 匹配给定的属性是以某些值结尾的元素查找所有 name 以 ‘letter’ 结尾的 input 元素:
$("input[name$ =’letter’]”)
[attribute*=value]
匹配给定的属性是以包含某些值的元素
查找所有 name 包含 ‘man’ 的 input 元素:
$(“input[name*=’man’]”) [attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:$ ("input[id][name $=’man’]”) 7.子元素过滤器 Child Filters 名称说明举例 :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) 在每个 ul 查找第 2 个li:$ (“ul li:nth-child(2)”)
:first-child
匹配第一个子元素
‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
在每个 ul 中查找第一个 li:
$(“ul li:first-child”) :last-child 匹配最后一个子元素 ‘:last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找最后一个 li:$ (“ul li:last-child”)
:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
在 ul 中查找是唯一子元素的 li:
$(“ul li:only-child”) 8.表单选择器 Forms 名称说明解释 :input 匹配所有 input, textarea, select 和 button 元素查找所有的input元素:$ (“:input”)
:text 匹配所有的文本框查找所有文本框:
$(“:text”) :password 匹配所有密码框查找所有密码框:$ (“:password”)
:radio 匹配所有单选按钮查找所有单选按钮
:checkbox 匹配所有复选框查找所有复选框:
$(“:checkbox”) :submit 匹配所有提交按钮查找所有提交按钮:$ (“:submit”)
:image
匹配所有图像域
匹配所有图像域:
$(“:image”) :reset 匹配所有重置按钮查找所有重置按钮:$ (“:reset”)
:button 匹配所有按钮查找所有按钮:
$(“:button”) :file 匹配所有文件域查找所有文件域:$ (“:file”)
9.表单过滤器 Form Filters
名称说明解释
:enabled
匹配所有可用元素
查找所有可用的input元素:
$(“input:enabled”) :disabled 匹配所有不可用元素查找所有不可用的input元素:$ (“input:disabled”)
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 查找所有选中的复选框元素:
$(“input:checked”)
:selected 匹配所有选中的option元素查找所有选中的选项元素:

$(“select option:selected”)

xw1985520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery之CSS选择器

1.选择对象1).基本·#id 根据给定的ID匹配一个元素。例如：(“#id”) ·element 根据给定的元素名匹配所有元素。例如：(“#id”) ·element 根据给定的元素名匹配所有元素。例如：(“div”) ·.class 根据给定的类匹配元素。例如：(“.style1”);⋅∗匹配所有元素。例如：(“.style1”); ·* 匹配所有元素。例如：(“*”) ·sele
复制链接

扫一扫