JQuery选择器-白红宇

JQuery选择器

阅读量：3959 次

发布时间：2019-05-24

本文共 2458 字，大约阅读时间需要 8 分钟。

JQuery选择器的优势:

1.简介的写法

2.完善的处理机制

JQuery选择器的类型:

1.通过CSS选择器选择元素。

1).基本选择器

2).层次选择器

3).属性选择器

2.通过过滤选择器选择元素。

1).基本过滤选择器。

2).可见性选择器。

基本选择器

1.标签选择器:匹配指定的标签名元素；

2.类选择器：匹配指定的class元素；

3.Id选择器：匹配指定的id元素；

4.并集选择器：将每个选择器匹配的元素合并后一起返回，例如:

KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id,.class,h2”);\dots

(“*”)选取所有元素;

层次选择器

1.后代选择器:选取某个元素中的所有后代元素，

(“ b o d y d i v ”), 选 取 b o d y 中 的 所 有 d i v 元 素 ； 2 . 子 选 择 器 : 选 取 某 个 元 素 下 的 （ 子 ） 元 素 ，

(“#parent>span”)选取#parent下的子span元素;

3.相邻元素选择器:选取紧邻这个元素之后的元素,

KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲ll+h2”)选取紧邻#ll之\dots

(“#id~li”);选取#id之后的所有li元素;

属性选择器

1.[attribute]:选取包含指定属性的元素，例如:

$(“[href]”)选取含有href属性的元素;

2.[attribute=value]:选取等于指定值的元素，例如:

$(“[href=’#’]”):选取href值等于‘#’的元素;

3.[attribute!=value]:选取不等于指定值的元素，例如:

$(“[href!=’#’]”):选取href值不等于‘#’的元素;

4.[attribute^=value]:选取指定属性是以特定值开头的元素，例如:

KaTeX parse error: Expected 'EOF', got '#' at position 11: (“[href^=’#̲’]”):选取href值是以‘\dots

=value]:选取指定属性是以特定值结尾的元素，例如:

(“ [h r e f

=’#’]”):选取href值是以‘#’结尾的元素;

6.[attribute*=value]:选取指定属性包含特定值的元素，例如:

$(“[href*=’#’]”):选取href值包含‘#’的元素;

通过条件过滤选取元素

主要分类：

1.基本过滤选择器

2.可见性过滤选择器

3.表单对象过滤选择器

4.内容过滤选择器、子元素过滤选择器…

1.基本过滤选择器:

1.(：first):选取第一个元素,例如：

$(“li:first”),选取所有

元素中第一个

元素;

2.(：last):选取最后一个元素,例如：
$(“li:last”),选取所有

元素中一个

元素;

3.(:not(selector)):选取除去所有与给定选择器匹配的元素，例如:
$(“li:not(.title)”):选取class不是title的所有li元素；

4.(:even):选取索引是偶数的所有元素(index从0开始),例如:
$(“li:even”)选取索引是偶数的所有li元素;

5.(:odd):选取索引是奇数的所有元素(index从0开始),例如:
$(“li:odd”)选取索引是奇数的所有li元素;

6.(:eq(index)):选取索引等于index的元素(index从0开始),例如:
$(“li:eq(1)”):选取索引等于1的li元素;

7.(:gt(index)):选取索引大于index的元素(index从0开始),例如:
$(“li:gt(1)”):选取索引大于1的li元素,(不包括1);

8.(:lt(index)):选取索引小于index的元素(index从0开始),例如:
$(“li:lt(1)”):选取索引小于1的li元素,(不包括1);

9:(:header):选取所有标题元素,如h1-h6数，例如:
$(“:header”):选取网页中所有标题元素;

10:(:focus):选取当前获取焦点的元素,例如:
$(“:focus”):选取当前获取焦点的元素;

11:(:animated):选取所有动画，例如:
$(“:animated”):选取当前所有动画元素;

可见性过滤选择器
1.(:visble):选取所有可见的元素,例如:
$(“:visble”):选取所有可见的元素;

2.(:hidden):选取所有隐藏的元素;
$(“:hidden”):选取所有隐藏的元素;

JQuery选择器的注意事项加粗样式

1.选择器中含有特殊符号的注意事项:
在W3C规范中，规定属性值中不能含有某些特殊字符，但在实际开发过程中，可能会遇到表达式中含有“#”和“.”等特殊字符的情况，如果按照普通的方式去处理就会出现错误。解决此类错误的方法是使用转义符转义;例如：

普通方法： $(“#id#a”); $(“#id[2]”); 以上代码不能正确获取到元素，正确的写法如下。 $(“#id\\#a”); $(“#id\\[2\\]”); //这里通过\\转义;
2.选择器中含有空格的注意事项:
选择器中的空格也是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果。例如:
$(“.ii :hidden”); //带空格,这里变成了后代选择器
$(“.ll:hidden”); //不带空格