jQuery基础——DOM基础

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

这期主讲DOM和事件，下面开始。

DOM基础

DOM对象，也就是文档对象模型。

DOM操作，可以理解为“元素操作”。

这里可以参考之前的JS。

下面复习一下：

DOM结构

DOM结构，也就是“树形结构”，所谓树形结构也就是使用“树节点”来表示页面中的每一个元素。

DOM结构，也被称为“DOM树”。

其中，html是树根，也叫做“根元素”。

树结构中的关系：兄弟元素、父子元素、以及其他祖孙元素。

常见的DOM操作

创建元素

插入节点

删除元素

复制元素

替换元素

包裹元素

遍历元素

为什么其他都是元素，只有插入是节点，而不是元素？

这是因为，节点包含元素、属性、文本三种节点。

插入操作，不仅可以插入元素，还可以插入文本。

下面，我们着重讲一下重点的，一些非重点，我就去掉了。

创建元素

在JQ中，我们可以使用字符串的形式来创建一个元素节点，也就是“

这是标题

”这种形式。

语法：

$().append(str)

你也可以直接使用字符串来替代str，效果都是一样的。

这里写str是为了更加方便理解，str是一个形参。

一般来说，我们在命名的时候，喜欢使用$字符来作为前缀，以区分参数。

创建其实很简单，下面说说插入操作。

---

插入节点

在JS中，插入节点只有appendChild()和insertBefore()两种方法。

但是，在JQ中，主要有以下四种方法：

prepend()和prependTo()

append()和appendTo()

before()和insertBefore()

after()和insertAfter()

这种方法其实都很简单，我们要根据字面意思去理解、记忆。

这8个方法，一共分为两大类，左边一类，右边一类，具体细节，我们展开说。

---

prepend()和prependTo()

先说前面那个，下同。

插入位置：开始处。

语法：

$(A).prepend(B)

$(A)，这里指的是选取父元素A。

prepend(B)，这里指的是要插入的子元素B。

为了方便理解，下面我还是用A元素表示父元素，B元素表示要插入的子元素。

语法：

$(B).prependTo(A)

$(B)，这里指的是要插入的子元素B。

prependTo(A)，这里指的是插入到A元素。

注意，插入和插入到的区别。

虽然两者的效果是一致的，但是还是有以下区别。

区别：

两者的操作对象是颠倒的。

第一个的操作对象是A，第二个的操作对象是B。

注意这个区别。

append()和appendTo()

插入位置：末尾处

语法：

$(A).append(B)

$(B).appendTo(A)

区别跟上面的是一样的，虽然操作对象不一样，但是都表示是在A元素内的末尾处插入B元素。

上面说的都是在元素内部插入，下面说一下在元素外部插入。

before()和insertBefore()

插入位置：定位元素的前面

定位元素是什么？先接着看。

语法：

$(A).before(B)

$(B).insertBefore(A)

上面说的定位元素就是A，这里的定位指的并不是position定位，而是指元素插入位置的定位。

两者的区别还是操作对象的不同。

after()和insertAfter()

插入位置：定位元素的后面

语法：

$(A).after(B)

$(B).insertAfter(B)

不展开说。

总结：

我们一般都是使用第二类，因为To的含义已经非常明确了。

---

删除元素

在JS中，删除元素有一种方法。

在JQ中，删除元素有三个方法：

remove()、detach()、empty()

这三个别看功能都是为了删除元素，但实际上，还是有着不小的区别的。

不过，这三个的语法却是出奇地一致：

$(要删除的对象).删除方法()

remove()

remove方法的使用：

$().remove()

调用方法后，会返回一个值——被删除的元素。

这跟数组中的哪些方法是一致的？

使用场景：

跟插入节点操作组合，可以实现两个元素的互换。

detach()

这个方法跟remove有相同点，也有不同点，下面展开说说。

相同点：

将某个元素及其内部所有内容删除。

不同点：

remove()方法用于彻底删除元素，不仅会删除元素，还会把元素绑定的事件删除掉。

detach()方法只会删除元素，不会删除元素的事件。

empty()

这个方法是三个方法里面最不一样的方法。

它是清空的意思，主要是用来清空某个后代元素。

清空某个后代元素是什么意思？

也就是，不会删除本身，只会删除后代元素。

---

复制元素

这个方法其实没什么好说的。

语法：

$().clone(bool)

bool表示布尔值，布尔值就两个取值，要么true，要么false。

true：复制元素，也复制元素的事件

false：复制元素，不复制元素的事件

这跟JS中的复制元素是不一样的，JS中的true和false表示的是是否复制后代元素。

---

替换元素

替换元素，其实主要有两种方法：

replaceWith()

replaceAll()

下面展开细说。

replaceWith()

语法：

$(A).replaceWith(B)

也就是，用B元素替换A元素。

replaceAll()

语法：

$(B).replaceAll(A)

注意：

操作对象不一样。

前面的操作对象是A，后面的操作对象是B。

包裹元素

包裹元素一共有三个方法：

wrap()

wrapAll()

wrapInner()

wrap()

语法：

$(A).wrap(B)

将A元素用B元素包裹起来，这个是包裹单个的。

wrapAll()

语法：

$(A).wrapAll(B)

将所有的A元素用B元素包裹起来。

注意，这里说的是所有A元素，就算A元素不是连续在一起的，也会被包裹在一起——会打乱原有顺序。

这两个效果都是包裹A元素本身，下面这个效果是不一样的：包裹A的内容。

wrapInner()

语法：

$(A).wrapInner(B)

使用B元素将A元素里的所有内容包裹起来。

也就是说，A>B>A的内容。

---

最后一个是遍历元素，这个是最重要的，一定要掌握好。

遍历元素

遍历操作是最常用的一个功能，在很多地方上我们都会用到遍历。

比如说，数组的遍历。

在JQ中，我们不需要使用for循环来遍历元素，而是使用特定语法进行遍历。

语法：

$().each(function(index, ele){

        ...

)

each方法的参数是一个函数，这个函数是匿名函数。

匿名函数里有两个参数，第一个是index，也就是我们常说的下标；第二个是当前遍历到的元素。

不过，这两个参数都是可选的，我们一般都默认index是必选的，因为我们可以使用this来替代ele。

如果需要退出循环，直接return false即可。

使用场景：

给每个li添加不同的背景颜色。

不过，这需要我们先做好一个数组。

跟使用:first-child有所区别。

至此，DOM基础已经讲完了，下面展开说说DOM进阶。

---

跟JS一样，DOM进阶主要讲的也是属性操作、以及CSS属性相关这些知识。

OK, now let's GO.

DOM进阶

属性操作

属性操作，指的是HTML属性，不是CSS属性（这个待会说）。

HTML属性操作一共有：

获取属性

设置属性

删除属性

prop()方法

前面三个好理解，就是对属性值进行操作。

后面这个是补充操作，主要作用是啥，往下看~

获取属性

既然你要操作属性值，就要先获取到这个属性值，才能对这个属性值进行设置、删除操作。

语法：

$().attr('属性名')

返回结果是属性值。

在JS中，我们的获取属性操作是啥？

设置属性

语法：

$().attr("属性名", "属性值")

$().attr( { "属性名1": "属性值1", "属性名2": "属性值2", ... } )

第一个是设置一个属性的属性值。

第二个是设置多个属性的属性值，采用的是键值对的对象方式传值。

删除属性

语法：

$().removeAttr("属性名")

跟JS一样，更多是用于整体控制元素的样式属性。

可以看出，这些非常简单。

下面这个就有点难度了，但是也不多。

prop()

其实在本质上，prop()和attr()是差不多的，都是用来获取、设置元素的HTML属性的。

但是，两者使用的场景是有区别的：

prop()方法更适合用于具有true和false两种取值的属性。

比如说，表单里面的checked、selected、disabled属性。

也就是说，prop()方法是对attr()方法的补充。

语法：

$().prop("属性名")

样式操作

样式操作，也就是CSS操作。

在JQ中，样式操作分为以下三种：

CSS属性操作

CSS类名操作

个别样式操作

下面一个一个说。

CSS属性操作

CSS属性操作其实还分为两个操作，也就是获取，然后再进行设置操作。

但是，归根结底都是对CSS属性值的操作。

获取CSS属性：

$().css("属性名")

设置CSS属性：

$().css("属性", "取值")

$().css( { "属性1": "取值1", "属性2": "属性2", ... } )

可以设置一个，也可以使用键值对的对象形式同时设置多个。

CSS类名操作：

什么是类名？

也就是说自己定义的一串CSS属性：

.class {
    ...
}

其中class就是类名。

从结构来看，CSS类名操作主要作用就是整体控制元素的样式。

在JQ中，CSS类名操作主要有以下三种：

添加、删除、切换类名

添加类名：

顾名思义，就是给获取到的JQ对象加上某个CSS类。

语法：

$().addClass("类名")

这个方法跟同时设置多个CSS属性是一致的，但是这个可读性更好。

删除类名：

语法：

$().removeClass("类名")

上面两个方法组合在一起，可以进行样式的切换，可以用于网页的深色模式的切换。

但是，有个更加简单的方法，那就是切换类名。

切换类名：

语法：

$().toggleClass("类名")

很多以为，这切换是在两个类名之间进行切换，但实际上完全不是。

这个切换是指切换类名的状态——存在与否。

如果toggle()方法检测到类名存在，就删除；否则，就添加。

---

犯迷糊：

如果我们想要获取设置CSS样式属性，该用什么方法？是用CSS属性操作呢，还是用CSS类名操作？

如果样式比较少，使用CSS属性操作。

如果样式比较多，使用CSS类名操作——需要事先准备好对应的CSS类。

---

个别样式操作

什么叫做个别样式操作呢？

那就是一些很特别的样式。

主要包含以下三种：

元素的宽高

元素的位置

滚动条的距离

这么一看，是不是两眼一黑？

元素的宽高：

其实我们可以使用css()方法来获取到元素的宽高的，只不过这个不大方便，所以就有了以下两类方法（宽度和高度）：

width()和height()

innerWidth()和innerHeight()

outerWidth()和outHeight()

第一个我理解，但是后面两个，emm...下面展开说。

都知道盒子模型吧？

不知道的，可以去看CSS那篇，就专门说过，这里简单说一下：

一个盒子的构成：元素自身的宽高，padding、border、margin。

盒子模型主要分为两种：标准盒子模型，和怪异模式（IE盒子模型）。

至于什么是标准盒子模型，什么是怪异模式，建议去看CSS那篇。

补充：

什么是box-sizing呢？

box-sizing是CSS中的一个属性，主要是用来改变盒子模型的计算方式。

什么是content-box呢？什么是border-box？

content-box是box-sizing默认的，也就是只包括content区域——也就是元素的宽高。

border-box是另外一个常用的属性值，不仅包括content区域，还包括padding——背景，border——边框。

OK，补充完成，下面接着介绍。

width()方法，包括width（也就是content-box的宽度）。

innerWidth()方法，包括width和padding。

outerWidth()方法，包括width和padding、border（也就是border-box的宽度）。

高度是类似的，这里不展开讲。

值得注意的是，不管是什么方法，都没有包含外边距margin的，盒子模型也是如此。

获取和设置一个元素的宽高要怎么做？

$().width()

$().width(n)

第一个是获取，第二个是设置。

是的，获取和设置区别不大。

不过，要注意的是，n是一个正整数，而不是字符串——13px。

可以知道的是，获取宽度的返回值也是一个正整数。

高度是类似的，这里不展开讲。

元素的位置：

如何获取元素的位置？

offset()

postion()

offset()

$().offset().top

$().offset().left

offset()方法返回的是一个坐标对象，该对象有两个属性，这两个属性的返回值都是不带单位的数字。

top属性，表示获取元素相对于当前文档“顶部”的距离。

left属性，表示获取元素相对于当前文档“左侧”的距离。

注意参考对象。

position()

$().position().top

$().position().left

position()方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字。

top属性，表示获取元素相对于最近被定位的祖先元素“顶部”的距离。

left属性，表示获取元素相对于最近被定位的祖先元素“左侧”的距离。

滚动条的距离：

滚动条距离有什么用？

作用可不小~

$().scrollTop() 获取滚动距离

$().scrollTop(n) 设置滚动距离，n是一个整数，表示n像素

主要用于获取元素相对于滚动条“顶边”的距离。

使用场景：回到顶部。

---

说完了属性操作、CSS操作，咱们接着说说内容操作。

内容操作

什么是内容操作？

或者说，什么是内容？

内容就是元素内的文本内容、值内容等。

内容操作就是对这些东西进行操作，共分为以下三种方法：

html()

text()

val()

html()

$().html() 获取

$().html("html内容") 设置

html()方法和innerHTML的效果是一样的。

只不过，html()方法是JQ中的方法，innerHTML是JS中的方法。

text()

$().text() 获取

$().text("文本内容") 设置

text()方法和innerText的效果是一样的。

只不过，text()方法是JQ中的方法，innerText是JS中的方法。

区别：

html()获取的是元素内部所有的内容

text()获取的是仅仅是文本内容

---

val()

这个方法是独属于表单元素的。

为什么？

因为表格元素的值都是通过value属性来定义的，所以我们不能通过html()和text()方法去获取。

$().val() // 获取

$().val("值内容") // 设置

写在最后

OK，以上就这节的内容了。

本来还想着写事件的，但是发现写完DOM已经接近6K字了...算了，下次吧。