开发者学堂课程【jQuery 开发教程：jQuery_CDN、DOM 插入并包裹现有内容】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4293
jQuery_CDN、DOM 插入并包裹现有内容
目录：
一、DOM 操作
二、CDN 介绍
三、DOM 插入并包裹现有内容
一、DOM 操作
1、class属性
addClass（）、hasClass （）、removeClass（）、toggleClass（）
addClass（）为添加一个类名
hasClass （）为判断元素是否是指定的类
removeClass（）是移除掉一个类
toggleClass（）是有则删除，则添加
2、DOM 插入并包裹现有内容
3、DOM 插入现有元素内
（ 1 ） .append()
<1> 在每个匹配元素里面的末尾处追加参数内容（父子关系）
<2> 在页面上选择页面上已有的存在的元素插在另一个元素里面（相当于元素的移动）
（ 2 ） .appendTo() ：将匹配的元素插入到目标元素的最后面（内部注入，父子关系）
<1> 其实 .appendTo() 和 .append() 的作用效果是一样的，只不过是书写顺序不同： $( “追加内容” ).appendTo($(“ 目标元素 < 就是要加到哪个元素上 >)”)
$( “目标元素” ).append( “追加内容” )
（ 3 ） .html() ：获取集合中第一个匹配元素的 HTML 内容或设置 ( 更改 ) 每一个匹配元素的 html 内容
<1> 作用是获取的时候只能获取到第一个匹配的元素
<2> 作用是设置的时候可以设置所有匹配元素的内容
（ 4 ） .prepend() ：将参数内容插入到每个匹配元素内容的前面（元素内，父子关系）
（ 5 ） .prependTo() ：将所有元素插入到目标前面（元素内，父子关系）
<1> 和 .prepend() 的作用效果是相同的，不同的只是书写的顺序：
$( “目标元素” ).prepend( “追加的内容” )
$( “追加的内容” ).prependTo($( “目标元素” ))
（ 6 ） .text() ：得到匹配元素集合中每个元素的合并文本，包括它们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容
<1> 作用和 .html() 差不多，不同的地方在于作用是获取的时候可以获取所的匹配元素
<2> 作用是设置的时候可以设置所有匹配元素的内容
4、DOM 移除
5、DOM 替换
（ 1 ） .replaceAll() ：用集合的匹配元素替换每个目标元素
<1>$(“ 要用什么内容来更换 ”). replaceAll($( “被更换的内容” ))
（ 2 ） .replaceWith() ：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
6、通用属性操作:
attr（）、prop（）、removeAttr（）、removeProp（）、.val()
Attr() 获得 / 改变属性值（可以获得所有的属性，包括我们自己添加的，原本没有的属性）
prop 获得 / 改变属性值（只能获得元素系统默认的属性值，我们自己定义的只会返回 undefined ）
removeAttr 移除属性
removeProp 移除默认的属性
val获取表单元素里面的内容
7、CSS 属性
8、复制元素
二、CDN
CDN 的全称是 Content Delivery Network, 即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN 系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。
<! DOCTYPE html >
<html lang ="en”>
<head>
<meta charset ="UTF-8">
<title></title>
<script src="http://apps,bdimg. . com/libs/jquery-2.1.4/jquery.min.js"></script>
<head>
<body>
()Console.log($);|
</script>
< /body
</html>
(1).<! DOCTYPE html >
<html lang ="en”>
<head>
<meta charset ="UTF-8">
<title></title>
<script src="http://apps,bdimg. . com/libs/jquery/2.1.4/jquery.min.js"></script>
<head>
<body>
<p>哈哈 </p>
<p>哈哈 </p>
<script>
$(document).ready(function(){
$(“p”).wrap(“<div></div>”)
$(“p”).unwrap();
</script>
< /body
</html>
2.
<! DOCTYPE html >
<html lang ="en”>
<head>
<meta charset ="UTF-8">
<title></title>
<script src="http://apps,bdimg. . com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.container{
Border:1px solid red;
}
</style>
<head>
<body>
<p>哈哈 </p>
<p>哈哈 </p>
<script>
$(document).ready(function(){
$(“p”).wrapAll(“<div class =’ container’></div>”)
$(“p”).wrapdInner(“<div class =’inner’></div>”)
$(“p”).unwrap();
</script>
< /body
</html>
三、DOM 插入并包裹现有内容
（ 1 ） .wrap(wrappingElement< 这个参数就是一个元素 >) ：在每个匹配的元素外层包上一个 html 元素
（ 2 ） .unwrap() ：将匹配元素集合的紧挨着的父级元素删除（再上一级就删不了了），保留自身（和兄弟元素，如果存在）在原来的位置（要注意这个方法不接收任何参数）
（ 3 ） .wrapAll(wrappingElement< 这个参数就是一个元素 >) ：在所有匹配元素外面包一层 HTML 结构
（ 4 ） .wrapInner(wrappingElement< 这个参数就是一个元素 >) ：在匹配元素里的内容外包一层结构