jQuery01

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 3.1k | 阅读时长 ≈ 11

jQuery选择器与过滤器

jQuery选择器

基础选择器

全局选择器

全局选择器用于选择文档中所有元素，其语法结构为：$（"\*＂）；全局选择器会遍历文档中所有的元素标签，甚至包括首部标签head及其内部的标签，运行速度较慢。

元素选择器

元素选择器用于选择所有指定标签名称的元素，其语法结构为：$（"element＂）；
这里的element 在使用的时候要换成真正的元素标签名称。例如$（”h1＂）；表示选中所有的h1标题元素。在使用元素选择器时候，jQuery会调用JavaScript中的原生getElmentsByTagName（）来获取指定的元素，该方法简化了原先JavaScript的代码量。

ID选择器

ID选择器用于选择指定ID名称的单个元素，语法结构为：$（"#ID＂）；
这里的ID在使用时要换成元素真正的ID名称。例如$（"#test＂）；
表示选中ID=”test＂的元素。在使用ID选择器时，jQuery会调用JavaScript中的原生方法getElementById（）来获取指定ID名称的元素。
ID选择器也可以和元素选择去配合使用，例如

1
$（"p#test＂）；

表示选择id=test的段落元素<\p>

类选择器

类选择器用于筛选出具有同一个class属性值的所有元素，其语法结构为：（"·class＂）；
这里的class在使用的时候需要换成真正的类名称，例如$（".box＂）；
表示选择class=”box＂的元素。如果一个元素包含了多个类，只要其中的任意一个类满足条件即可 被选中。在使用这个方法的时候，jQuery会调用JavaScript的原生方法getElementsByClassName来获取指定的元素。
类选择器也可以和元素选择器配合使用，例如

1
$（"p.box＂）；

表示选择所有class=”box＂的<\p>元素

多重选择器

多重选择器适用于需要批量处理的多种元素，可以将不同的筛选条件用逗号隔开写入同一个选择器中，语法结构为$（"selector1，selector2，selector3＂）；
这里的选择器可以是元素选择器、ID选择器、类选择器中的一种或组合使用，只要是满足其中任意一个条件即可。

属性选择器

常见属性选择器有

1
2
3
4
［attribute］：带有指定属性的元素，例如$（"［alt］＂）表示所有带alt属性的元素
［attribute=value］：属性等于特定值的元素，例如$（"［href=‘#’］＂）表示所有href属性值等于“#”的元素
［attribute！=value］：属性不等于特定值的元素，例如$（"［href！=‘#’］＂）表示所有href属性值 不等于“#”的元素。
［attribute$=value］：属性以指定值结尾的元素，例如$（"［src$=‘.png’］＂）表示src属性值以.png结尾的元素。

表单选择器

jQuery表单选择器可用于指定类型或处于指定状态的表单元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:input 所有<\input>元素
:text 选择type=“text”的<\input>元素
:password 选择type=“password”的<\input>元素
:radio 选择type=“pradio”的<\input>元素
:checkbox 选择type=“checkbox”的<\input>元素
:submit 选择type=“submit”的<\input>和<\button>元素
:reset 选择type=“reset”的<\input>和<\button>元素
:button 选择type=“button”的<\input>和<\button>元素
:image 选择type=“image”的<\input>元素
:file 选择type=“file”的<\input>
:enabled 所有启用的的<\input>和<\button>元素
:disabled 所有被禁用的<\input>和<\button>元素
:selected 下拉表中所有处于选中状态的<\option元素< li>
:checked 所有被选中的单选按钮或者复选按钮

层次选择器

  • 子元素选择器
    子元素选择器只能选择指定元素的第一层子元素，语法结构为$（"parent>child＂）其中parent可以是任何一个有效的jQuery选择器，child只能是parent的第一层子元素。

  • 后代选择器
    后代选择器可用于选择指定元素内包含的所有后代元素，比子元素选择器包括范围更广，语法结构为$（"ancestor descendant＂）其中参数ancestor可以是任何一个有效的jQuery选择器，参数descendant填入的必须是ancestor元素的后代元素。

  • 后相邻选择器
    后相邻选择器可用于选择与指定元素相邻的后一个元素，其语法结构为$（"prev+next＂）
    prev可以是任何一个选择器，next只能是prev相邻的后一个选择器。

  • 后兄弟选择器
    后兄弟选择器可用于选择指定元素后面跟随的所有符合条件的兄弟元素，语法结构为：$（"prev～siblings＂）
    其中参数prev可以是任何一个jQuery选择器，参数siblings填入的选择器筛选的必须是位置在prev元素后面的兄弟元素。与$（”prev+next＂）不同的是，$（”prev+next＂）只能筛选指定元素后面的下一个相邻元素，而$（”prev～siblings＂）可以筛选指定元素后面所有符合条件的兄弟元素，可以是多个元素。

jQuery CSS选择器

css选择器用于改变指定HTML元素的css属性，语法结构为$（selector）.css（propertyName，value）；
其中propertyName是css属性名称，value是需要设置的属性值。例如将所有的h1标签的颜色改为灰色，写法为：$（“h1”）.css（“color”，“grey”）；

jQuery过滤器

jQuery过滤器可以单独使用，也可以组合使用，根据筛选条件可归纳为基础过滤器、子元素过滤器、内容过滤器和可见性过滤器。

基础过滤器

：first和：last

：first用于筛选第一个符合条件的元素，语法结构为：$（"：first＂）
例如为：$（"div：first＂）
选择页面上的第一个<\div>元素。
：last过滤器用于筛选最后一个符合条件的元素，语法结构为为：$（"：last＂）
.：last过滤器可以单独使用也可以和其他选择器组合使用。

：even和：odd

：even过滤器用于筛选符合条件的偶数个元素，计数从0开始，语法结构为为：$（"：even＂）
例如筛选偶数行的表格为为：$（"tr：even＂）
：odd过滤器筛选符合条件的奇数个元素，计数从0开始，语法结构为：$（”：odd＂）

：eq（）、：gt（）和：lt（）

  • ：eq（）用于选择指定序号为n的元素，序号从0开始计数 ，（equal）。语法结构为为：$（"：eq（index）＂） 参数index可以替换为指定的序号。若index填入负数，表示倒数第n个元素。其中：eq（0）和：first相同效果。
  • ：gt（）过滤器用于选择所有大于序号为n的元素，序号从0开始计数。（greater than）。语法结构为为： $（"：gt（index）＂）参数index可以替换为指定的序号。若index填入负数，表示大于倒数第n个元素。
  • ：lt（）过滤器用于选择所有小于序号为n的元素，序号从0开始计数。（less than）。语法结构为为：$（"：lt（index）＂）参数index可以替换为指定的序号。若index填入负数，表示小于倒数第n个元素。其中：lt（1）相当于：first效果。

：not（）

：not（）过滤器用于筛选所有不符合条件的元素，语法结构为$（"：not（selector）＂）
所有的选择器都可以和：not（）配合使用来筛选相反的条件。

：header（）

：header（）过滤器用于筛选所有的标题元素，从<\h1>到<\h6>均在此选择范围内，语法结构为$（"：header＂）

子元素过滤器

子元素过滤器可筛选指定元素的子元素。

：first-child

：first-child过滤器用于筛选页面上每个父元素中的第一个子元素，语法结构为$（"：first-child＂）
和只能选择唯一元素的：first过滤器不同，只要是页面上的父元素，可以同时使用：first-child过滤器从中选出其第一个子元素，因此选择结果可能不止一个元素。
：first-child过滤器可以单独使用也可以和其他选择器组合使用。例如$（"p：first-child＂）
表示在页面上所有包含段落元素<\p>的父元素中筛选出每个父元素内部的第一个段落子元素。

：last-child

：last-child过滤器用于筛选页面上每个父元素中的最后一个子元素，语法结构为$（"：last-child＂）
与：first-child类似，其选择结果也可能不止一个。例如$（"p：last-child＂）
表示在页面上所有包含段落元素<\p>的父元素中筛选出每个父元素内部的最后一个个段落子元素。

：nth-child

：nth-child（）过滤器用于筛选页面上每个父元素中的第n个子元素，序号从1开始计数，语法结构为：$（"：nth-child（index）＂）
例如：（"：nth-child（2）＂）
表示筛选父元素中的第二个子元素。index还可以填入odd和even表示奇数偶数位置，也可以填入表达式如3n+1表示1、4、7…

：only-child

：only-child过滤器用于筛选所有在父元素中有且只有一个的子元素，语法结构$（"：only-child＂）
可以单独使用也可以组合使用
如果父元素中包含了其他子元素则不匹配。即使其他子元素是<\br>或<\hr>等内容也会失效。

内容过滤器

jQuery内容过滤器可以根据元素所包含的子元素或文本内容进行过滤筛选。

：contains（）

：contains（）过滤器用于筛选出所有包含指定文本内容的元素，语法结构为：$（"：contains（text）＂）
其中text替换成指定的字符串文本，由于过滤器外面已经存在一对引号，因此该文本可以用单引号括住具体文字内容。例如：$（"p：contains（‘hi’）＂）
表示选择所有文本内容包含“hi”字样的段落元素<\p>。
：contains（）过滤器的筛选文本对大小写是敏感的。

：empty

：empty过滤器用于选择未包含子节点（子元素和文本）的元素，语法结构$（"：empty＂）
：empty过滤器可以和其他有效选择器配合使用，例如：$（"td：empty＂）
表示选择所有无内容的表格单元格元素<\td>。

：parent

：parent过滤器用于选择包含子节点（子元素和文本）的元素，语法结构为：$（"：parent＂）
可以单独使用也可以配合使用。例如：$（"td：parent＂）
表示选择所有包含内容的表格单元格元素<\td>。注意段落元素<\p>起码包含一个子节点，即使该元素中没有任何文本内容。

可见性过滤器

可见性过滤器根据元素的当前状态是否可见进行筛选。

：hidden

：hidden过滤器用于筛选出所有处于隐藏状态的元素，语法结构为：$（"：hidden＂）
可以单独使用也可以配合使用。例如：$（"p：hidden＂）
表示查找所有隐藏的段落元素<\p>。
如果元素在网页中不占用任何位置空间就被认为是隐藏的，具体有以下几种情况：

元素的高度和宽度明确设置为0；
在元素的css属性中的display的值设置为none；
表单元素的type属性设置为hidden；
元素的父元素处于隐藏状态，因此元素也一并无法显示出来；
下拉列表中的所有选项元素<\option>也被认为是隐藏的，无论其是否为selected状态。

：visible

：visible过滤器用于筛选出所有处于可见状态的元素，语法结构为：$（"：visible＂）
可以单独使用也可以配合使用。：visible过滤器和：hidden过滤器的筛选条件完全相反，因此无法同时使用。
需要注意的是，元素处于以下几种特殊情况也被认为是可见状态

元素的透明度属性opacity设置为0，此时元素依然占据原来位置；
元素的可见性属性visibility设置为除hidden以外的其他值，此时元素依然占据原来位置；
当元素处于逐渐被隐藏的动画效果中时，到动画结束之前都被认为依然是可见的
当元素处于逐渐被显现的动画效果中时，从动画一开始启动就被认为是可见的。

-------------本文结束感谢您的阅读-------------