Web前端框架开发技术-过滤选择器

2023-10-31 理论教育版权反馈

【摘要】：表2.8基本过滤选择器示例2.内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。表2.10内容过滤选择器3.可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。表2.13属性过滤选择器接下来使用属性过滤选择器来对

和等元素进行操作，见表2.14。表2.16子元素过滤选择器示例eq只匹配一个元素，：nth-child 将为每一个符合条件的父元素匹配子元素。

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素，过滤规则与CSS 中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1.基本过滤选择器

基本过滤选择器见表2.7。

表2.7　基本过滤选择器

pagenumber_ebook=51,pagenumber_book=35

pagenumber_ebook=52,pagenumber_book=36

接下来，使用这些基本过滤选择器来对网页中的<div>，<span>等元素进行操作，见表2.8。

表2.8　基本过滤选择器示例

pagenumber_ebook=52,pagenumber_book=36

2.内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍说明见表2.9。

表2.9　内容过滤选择器

pagenumber_ebook=53,pagenumber_book=37

接下来使用内容过滤选择器来操作页面中的元素，见表2.10。

表2.10　内容过滤选择器

pagenumber_ebook=53,pagenumber_book=37

3.可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。可见性过滤选择器的介绍说明见表2.11。

表2.11　可见性过滤选择器

pagenumber_ebook=53,pagenumber_book=37

在例子中使用这些选择器来操作DOM 元素，见表2.12。

表2.12　可见性过滤选择器示例

pagenumber_ebook=54,pagenumber_book=38

在可见性选择器中，需要注意选择器：hidden，它不仅包括样式属性display 为“none”的元素，也包括文本隐藏域(<input type="hidden"/>和visibility：hidden 之类的元素。

4.属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明见表2.13。

表2.13　属性过滤选择器

pagenumber_ebook=54,pagenumber_book=38

接下来使用属性过滤选择器来对<div>和<span>等元素进行操作，见表2.14。

表2.14　属性过滤选择器

pagenumber_ebook=55,pagenumber_book=39 (www.chuimin.cn)

5.子元素过滤选择器

子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂。不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。子元素过滤选择器的介绍说明见表2.15。

表2.15　子元素过滤选择器

pagenumber_ebook=55,pagenumber_book=39

pagenumber_ebook=56,pagenumber_book=40

nth—child()选择器是很常用的子元素过滤选择器，详细功能如下：

➢　：nth-child(even)能选取每个父元素下的索引值是偶数的元素。

➢　：nth-child(odd)能选取每个父元素下的索引值是奇数的元素。

➢　：nth.child(2)能选取每个父元素下的索引值等于2 的元素。

➢　：nth.child(3n)能选取每个父元素下的索引值是3 的倍数的元素，(n 从0 开始)。

➢　：nth.child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n 从0 开始)

接下来利用刚才所讲的选择器来改变<div>元素的背景色，见表2.16。

表2.16　子元素过滤选择器示例

pagenumber_ebook=56,pagenumber_book=40

eq(index)只匹配一个元素，：nth-child 将为每一个符合条件的父元素匹配子元素。nth-child(index)的index 是从1 开始的，：eq(index)是0 开始的。同理：first和：first-child，：last 和：last-child 也类似。

6.表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤，例比如选择被选中的下拉框，多选框等等。表单对象属性过滤选择器的介绍说明见表2.17。

表2.17　表单对象属性过滤选择器

pagenumber_ebook=56,pagenumber_book=40

pagenumber_ebook=57,pagenumber_book=41

为了演示这些选择器，需要制作一个包含表单的网页，里面要包含文本框、多选框和下拉列表，HTML 代码如下：

pagenumber_ebook=57,pagenumber_book=41

pagenumber_ebook=58,pagenumber_book=42

生成的效果如图2.2 所示。

pagenumber_ebook=58,pagenumber_book=42

图2.2　表单页面

现在用jQuery 的表单过滤选择器来操作它们，见表2.18。

表2.18　表单过滤选择器

pagenumber_ebook=58,pagenumber_book=42

Web前端框架开发技术-过滤选择器

相关推荐