jQuery学习教程，写更少的代码,做更多的事情（五）

• • 1.jQuery DOM插入并包裹现有内容

• 2.jQuery DOM插入现有元素内

• 3.深度克隆

• 4.jQuery DOM插入现有元素外

• 5.jQuery DOM移除

• • 1detach()方法

• 2.empty()方法

• 3.remove()方法

• 4.unwrap()方法

• 6.jQuery DOM 替换

• • 1.replaceAll()方法

• 2.replaceWith()方法

这一篇内容一定跟着例子和注释来学习。

1.jQuery DOM属性

===========================================================================

1. addClass()：给元素添加类名。

2. attr()：设置元素的一个或者多个属性，还可以来获取属性的值。

3. hasClass()：判断元素中是否有指定的类，有返回true，没有返回false。

4. html()：读取和修改一个元素的HTML内容。

5. prop()：显示或者修改元素的属性值，这里prop()自己添加的属性值。无法自己显示！

6. removeAttr()：移除元素中的属性。

7. removeClass()：移除元素类名。

8. removeProp()：为元素删除属性。

9. toggleClass()：样式类存在，就删除一个类；不存在，就添加一个类。

10. val()：设置元素中每个元素的值。

这里解释以下html(),text()和val()方法区别：

.html():读取和修改一个元素的HTML内容，详情.html()；

.text()：读取和修改一个元素的文本内容，详情.text()；

.val()：读取和修改一个表单元素的value字段值，详情.val()

例1： 使用attr()来添加属性和获取属性值。

百度

你好厉害啊！

例2：html事件来显示或者改变文本

你好厉害啊！

例3: prop()显示和改变属性值

点我啊。

2.jQuery DOM操作

===========================================================================

讲述一下内容时，介绍一下CDN：

CDN非常重要，在百度中搜索CDN静态资源库就可以找到。

然后，直接搜索 jQuery 得到相应的库。

点入搜索到的内容，会得到相应的库的版本，直接复制到script下的src属性中就可以，通过网络来获取jQuery库了。

通过以上操作，平时咱们就不需要再下载jQuery库，然后再从本地导入了。直接通过网络来实现。

1.jQuery DOM插入并包裹现有内容

---

例1：wrap英文意思就是包裹的意思。

first blood

double kill

例2：unwrap相反，除去父元素包裹,只能除去父元素。

first blood

double kill

例3：使用wrapAll将两个p标签都使用同一个div包裹起来

first blood

double kill

例4：使用warpAll()方法

first blood

double kill

2.jQuery DOM插入现有元素内

---

例1：append()和appendTo的用法，直接看注释

你好啦。

first blood

double kill

例2：prepend()和prependTo()与append()和appendTo()一样。

first blood

double kill

3.深度克隆

===================================================================

clone复制元素

.clone()

克隆一个元素。

例如：