伪类选择器,可以看成是一种特殊的选择器。其中,伪类选择器都是以英文冒号(:)开头的。jQuery参考CSS伪类选择器的形式,为我们提供了大量的伪类选择器,常用的包括以下6种。

(1)“位置”伪类选择器

jquery 设置after伪元素 jquery选择伪元素_jquery 设置after伪元素

(2)“子元素”伪类选择器

(“ul li:first-child”)表示选择父元素(即ul)下的第一个子元素,这句代码等价于(“ul li:nth-child(1)”)。(“ul li:last-child”)表示选择父元素(即ul)下的最后一个子元素,这句代码等价于(“ul li:nth-child(5)”)。

在实际开发中,子元素伪类选择器特别适合操作列表的不同样式,绿叶学习网(本书配套网站)中就大量使用到

jquery 设置after伪元素 jquery选择伪元素_css3_02


jquery 设置after伪元素 jquery选择伪元素_jquery 设置after伪元素_03

(3)“可见性”伪类选择器

可见性伪类选择器,指的就是根据元素“可见”与“不可见”这两种状态来选取元素。在jQuery中,可见性伪类选择有两种,如下表所示。

jquery 设置after伪元素 jquery选择伪元素_jquery 设置after伪元素_04


所谓的不可见元素,指的是定义了display:none的元素。

(4)“内容”伪类选择器

内容伪类选择器,指的是根据元素的内部文本或者子元素来选取元素。在jQuery中,常用的内容伪类选择器如下表所示。

jquery 设置after伪元素 jquery选择伪元素_css3_05

(5)“表单”伪类选择器

表单伪类选择器,指的是专门操作表单元素的一种伪类选择器。在jQuery中,常用的表单伪类选择器如下表所示。

jquery 设置after伪元素 jquery选择伪元素_css3_06

(6)“表单属性”伪类选择器

表单属性伪类选择器,指的是根据表单元素的属性来选取的一种伪类选择器。在jQuery中,常见的表单属性伪类选择器如下表所示。

jquery 设置after伪元素 jquery选择伪元素_伪类选择器_07

(7)其他伪类选择器

jquery 设置after伪元素 jquery选择伪元素_css3_08

4.DOM基础

在jQuery中,常见的DOM操作有以下7种。
tips:凡是对于jQuery创建的节点字符串,我们命名的时候都习惯使用“$”开头,以便区别于其他的变量。
(1)创建元素
(2)插入元素
(2.1)prepend()和prependTo()
内部的“开始处”插入内容
(2.2)append()和appendTo()
内部的结尾处插入;To表示被插入;
(2.3)before()和insertBefore()
外部的“前面”插入内容;
(2.4)after()和insertAfter()
外部的“后面”插入
tips: 内部表示:最终插入结果在同一行
外部表示:最终插入结果不在同一行
tips:
(1)prepend()和prependTo()
(2)append()和appendTo()
(3)before()和insertBefore()
(4)after()和insertAfter()
对于这4组方法,我们可以这样划分:第1组和第2组是“内部插入节点”;第3组和第4组是“外部插入”。

(3)删除元素
(3.1)remove()
remove()方法来将某个元素及其内部所有内容删除
remove()方法可以返回一个值,其中返回值为被删除的元素
(3.2)detach()
(3.3)empty()
区别:
(1)remove()方法用于“彻底”删除元素。所谓的“彻底”,指的是不仅会删除元素,还会把元素绑定的事件删除。
(2)detach()方法用于“半彻底”删除元素。所谓的“半彻底”,指的是只会删除元素,不会把元素绑定的事件删除。
(4)复制元素
使用clone()方法来复制某一个元素
参数bool是一个布尔值,取值为true或false,默认值为false。
(1)true:表示不仅复制元素,并且还会复制元素所绑定的事件。(2)false:表示仅仅复制元素,但不会复制元素所绑定的事件。
(5)替换元素
(1)replaceWith()
$(A).replaceWith(B)表示使用B来替换A。
(2)replaceAll()
$(A).replaceAll(B)表示用A来替换B
(6)包裹元素
(1)wrap()
(2)wrapAll()
(3)wrapInner()
tips:wrap()方法是将所有元素进行“单独”包裹,而wrapAll()方法是将所匹配的元素“一起”包裹。

$(A).wrapInner(B)表示将A元素“内部所有元素以及文本”使用B元素包裹起来。注意,wrapInner()方法不会包裹A元素本身。
(7)遍历元素
使用each()方法轻松实现元素的遍历操作