jqueryDOM操作

一、

1 、 class 属性： .addClass() 、 .hasClass() 、 .removeClass() 、 .toggleClass()

 

2 、 DOM 插入并包裹现有内容

（ 1 ） .wrap(wrappingElement< 这个参数就是一个元素 >) ：在每个匹配的元素外层包上一个 html 元素

（ 2 ） .unwrap() ：将匹配元素集合的紧挨着的父级元素删除（再上一级就删不了了），保留自身（和兄弟元素，如果存在）在原来的位置（要注意这个方法不接收任何参数）

（ 3 ） .wrapAll(wrappingElement< 这个参数就是一个元素 >) ：在所有匹配元素外面包一层 HTML 结构

（ 4 ） .wrapInner(wrappingElement< 这个参数就是一个元素 >) ：在匹配元素里的内容外包一层结构

 

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 、复制元素 .clone() ：创建一个匹配的元素集合的深度拷贝副本

    <1> 深度拷贝：只是单纯的拷贝过来用，保持原来的位置和内容不变，而不是移过来（也就是说相当于一个 copy 的功能）

 

5 、 DOM 插入现有元素外

（ 1 ） .after() ：在匹配的元素集合中的每个元素后面插入参数指定的内容，作为其兄弟节点（同级元素，不是父子关系）

（ 2 ） .before() ：根据参数设定，在匹配元素的前面插入内容（外部插入，同级关系 < 也就是兄弟元素 > ）

（ 3 ） .insertAfter() ：在目标元素后面插入集合中每个匹配的元素（注：插入的元素作为目标元素的兄弟元素）

<1> 作用效果和 .after() 是一样的，不同的只是书写顺序不一样：

$( “目标元素” ).insertAfter( “被插入的内容” )

$( “被插入的内容” ).after($( “目标元素” ))

（ 4 ） .insertBefore() ：在目标元素前面插入集合中每个匹配的元素（注：插入的元素作为目标元素的兄弟元素）

<1>.insertBefore() 和 .before() 作用效果是一样的，不同的只是书写顺序：

$( “被插入的内容” ).insertBefore($( “目标元素” ))

$( “目标元素” ) .before( “被插入的内容” )

 

6 、 DOM 移除

（ 1 ） .detach() ：从 DOM 中移除所有匹配的元素（无论其有多少个父级，都可以被删除）

（ 2 ） .empty() 注意不接收任何参数：从 DOM 中移除集合中匹配元素的所有子节点（也就是子元素）

（ 3 ） .remove() ：将匹配元素集合从 DOM 中删除（注：同时移除元素上的事件和 jQuery 数据）

<1> 和 .detach() 不同的是 .detach() 只是删除元素而 .remove() 不止删除元素而且还删除掉元素上的事件和 jQuery 数据

（ 4 ） .unwrap() ：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置

 

7 、 DOM 替换

（ 1 ） .replaceAll() ：用集合的匹配元素替换每个目标元素

<1>$(“ 要用什么内容来更换 ”). replaceAll($( “被更换的内容” ))

（ 2 ） .replaceWith() ：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

 

8 、通用属性操作： .attr() 获得 / 改变属性值（可以获得所有的属性，包包括我们自己添加的，原本没有的属性）、 .prop() 获得 / 改变属性值（只能获得元素系统默认的属性值，我们自己定义的只会返回 undefined ）、 .removeAttr() 移除属性、 removeProp() 移除默认的属性、 .val() 获取表单元素里面的内容

 

9 、 CSS 属性

（ 1 ） .css() ：获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个 / 多个 CSS 属性

<1> 有两个参数的时候： .css( “属性”，“属性值” ) 表示设置样式

只有一个参数的时候： .css( “属性” ) 表示获取元素属性的属性值

<2> 如果想设置多个 css 属性： .css({

                                 “ 属性 ” ： ” 属性值 ” ，

                                “ 属性 ” ： ” 属性值 ” ，

                                “ 属性 ” ： ” 属性值 ”

})

（ 2 ） .height() ：获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值（获得的就是元素本身的高度，不计算 padding 和 margin ）

<1> 可以接收参数：接收参数就表示设置 / 更改，直接写数字就行，不用加双引号

（ 3 ） .width() ：为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置 CSS 宽度（获得的就是元素本身的宽度，不计算 padding 和 margin ）

<1> 可以接收参数：接收参数就表示设置 / 更改，直接写数字就行，不用加双引号

（ 4 ） .innerHeight() ：为匹配的元素集合中获取第一个元素的当前计算高度值，包括 padding （也就是说是本身 +padding ）但是不包括 border

<1> 不可以接收参数

（ 5 ） .innerWidth() ：为匹配的元素集合中获取第一个元素的当前计算宽度值，包括 padding （也就是说是本身 +padding ）但是不包括 border

<1> 不可以接收参数

（ 6 ） .offset() ：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档或设置匹配的元素集合中每一个元素的坐标，坐标相对于文档。

<1> 什么参数都没有的时候表示获取，如果添加了参数就是设置

（ 7 ） .outerHeight() ：获取元素集合中第一个元素的当前计算高度值，包括 padding 、 border 和选择性的 margin 。返回一个整数（不包含“ px ”）表示的值，或如果在一个空集合上调用该方法则会返回 null

<1> 可以有参数，参数是布尔类型，默认值为 false （计算的高度值不包括 margin ， true 则表示包含 margin 值）

（ 8 ） .outerWidth() ：获取元素集合中第一个元素的当前计算宽度值，包括 padding 、 border 和选择性的 margin （注：返回一个整数（不包含“ px ”）表示的值，或如果在一个空集合上调用该方法则会返回 null ）

<1> 可以有参数，参数是布尔类型，默认值为 false （计算的宽度值不包括 margin ， true 则表示包含 margin 值）

（ 9 ） .position() ：获取匹配元素中第一个元素的当前坐标，相对于 offset parent 的坐标（ offset parent 是指离该元素最近的而且被定位过的祖先元素）

（ 10 ） .scrollLeft() ：获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置

<1> 设置参数的时候（一个数字）表示设置滚动条的位置

（ 11 ） .scrollTop() ：获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置

<1> 设置参数的时候（一个数字）表示设置滚动条的位置

 

二、 CDN ：基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和缓解，使内容传输的更快更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础上的一层智能虚拟网路， CDN 系统能实时的根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可以就近取得所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度