jq学习笔记（二）

jq笔记-dom篇-慕课网学习笔记

1.jQuery节点创建与属性的处理

创建元素节点：
　　1.$("<div></div>")
创建为本节点：
　　1.$("<div>我是文本节点</div>")
创建为属性节点：
　　1.$("<div id='test' class='aaron'>我是文本节点</div>")
　　2.$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

2.DOM内部插入append()与appendTo()

　　①append() 向每个匹配的元素内部追加内容
　　②appendTo() 把所有匹配的元素追加到另一个

　　简单的总结就是：

　　.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

　　　　—— append()前面是被插入的对象，后面是要在对象内插入的元素内容
　　　　—— appendTo()前面是要插入的元素内容，而后面是被插入的对象

3.DOM外部插入after()与before()

　　①after() 在匹配元素几何中的每个元素后面插入参数所指定的内容，作为其兄弟节点
　　②before() 据参数设定，在匹配元素的面前插入内容

　　注意：
　　　　①after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
　　　　②before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

4.DOM内部插入prepend()与prependTo()

　　①prepend() 向每个匹配的元素内部前置内容
　　②prependTop() 把所有匹配的元素前置到另一个指定的元素几何中

　　总结dom内部插入的四个方法的区别
　　　　①append()向每个匹配的元素内部追加内容
　　　　②prepend()向每个匹配的元素内部前置内容
　　　　③appendTo()把所有匹配的元素追加到另一个指定元素的集合中
　　　　④prependTo()把所有匹配的元素前置到另一个指定的元素集合中

5.DOM外部插入insertAfter()与insertBefore()

　　①insertBefore() 在目标元素前面插入几何中的每一个元素
　　②insertAfter() 在目标元素后面插入几何中的每个匹配的元素

6.DOM节点删除之empty()的基本用法

　　empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。

7.DOM节点删除之remove()的有参用法和无参用法

　　remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

8.DOM节点删除之empty和remove区别

　　①empty方法
　　　　严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
　　　　empty不能删除自己本身这个节点

　　②remove方法
　　　　该节点与该节点所包含的所有后代节点将同时被删除
　　　　提供传递一个筛选的表达式，删除指定合集中的元素

9.DOM节点删除之保留数据的删除操作detach()

10.DOM节点删除之detach()和remove()区别

　　remove：移除节点
　　　　①无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
　　　　②有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

　　detach：移除节点
　　　　①移除的处理与remove一致
　　　　②与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
　　　　③例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

11.DOM拷贝clone()

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了说

使用上就是这样简单，使用克隆的我们需要额外知道的细节：

　　①clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色
　　②通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
　　③clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
　　④元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

12.DOM替换replaceWith()和replaceAll()

　　①.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
　　②.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

　　总结：
　　　　①replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
　　　　②.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
　　　　③.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
　　　　④.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

　　　　例子:

　　　　　　①$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
　　　　　　②$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

13.DOM包裹wrap()方法

　　如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法

　　①.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

　　例子：
　　　　<p>p元素</p>

　　　　给p元素增加一个div包裹

　　　　$('p').wrap('<div></div>')

　　　　最后的结构，p元素增加了一个父div的结构

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　②.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

　　例子：
　　　　$('p').wrap(function() {
　　　　　　return '<div></div>'; //与第一种类似，只是写法不一样
　　　　})

　　　　使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已

　　注意：
　　　　.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。

14.DOM包裹unwrap()方法

　　作用：删除父元素

　　jQuery提供了一个unwarp()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置

　　例子：
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　　　——>

　　　　$('p').unwarp();

　　　　——>

　　　　<p>p元素</p>

15.DOM包裹wrapAll()方法

　　①.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

　　例子一：
　　　　<p>p元素</p>
　　　　<p>p元素</p>

　　　　——> 给所有p元素增加一个div包裹

　　　　$('p').wrapAll('<div></div>')

　　　　——> 结果 2个P元素都增加了一个父div的结构

　　　　<div>
　　　　　　<p>p元素</p>
　　　　　　<p>p元素</p>
　　　　</div>

　　②.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

　　通过回调的方式可以单独处理每一个元素

　　例子二：
　　　　$('p').wrapAll(function() {
　　　　　　return '<div><div/>';
　　　　})

　　　　——> 以上的写法的结果如下，等同于warp的处理了

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　注意：
　　　　.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

16.DOM包裹wrapInner()方法

　　①.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

　　例子一：
　　　　<div>p元素</div>
　　　　<div>p元素</div>

　　　　——> 给所有元素增加一个p包裹

　　　　$('div').wrapInner('<p></p>')

　　　　——> 结果

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　②.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

　　例子二：

　　　　$('div').wrapInner(function() {
　　　　　　return '<p></p>';
　　　　})

　　　　——>

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　注意：
　　　　当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。

17.jQuery遍历之children()方法

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

18.jQuery遍历之find()方法

例子：
<div class="div">
　　<ul class="son">
　　　　<li class="grandson">1</li>
　　</ul>
</div>

代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

.find()方法要注意的知识点：
　　①find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
　　②与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
　　③find只在后代中遍历，不包括自己。
　　④选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

注意重点：
　　.find()和.children()方法是相似的
　　　　1.children只查找第一级的子节点
　　　　2.find查找范围包括子节点的所有后代节点

19.jQuery遍历之parent()方法

parent()方法作用：查找父元素

因为是父元素，这个方法只会向上查找一级

20.jQuery遍历之parents()方法

作用：parents()方法可以查找祖辈元素

例子：
<div class="div">
　　<ul class="son">
　　　　<li class="grandson">1</li>
　　</ul>
</div>

在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法

注意：
　　1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
　　2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

21.jQuery遍历之closest()方法

作用：也是祖辈查找器，但更偏向与祖辈过滤查找器

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

　　①起始位置不同：.closest开始于当前元素 .parents开始于父元素
　　②遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
　　③结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

22.jQuery遍历之next()方法

作用：查找下一个兄弟元素

例：
　　①$("li.item-1").next().css("border","1px solid red")
　　② $('.item-2').next(':first').css('border', '1px solid blue')

23.jQuery遍历之prev()方法

作用：查找紧邻的前一个兄弟元素

24.jQuery遍历之siblings()

siblings()作用：快速查找指定元素几何中每一个元素的同辈元素

25.add方法

　　jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

26.jquery历遍之 each()

each()是什么?
　　①each是一个for循环的包装迭代器
　　②each通过回调的方式处理，并且会有2个固定的实参，索引与元素
　　③each回调方法中的this指向当前迭代的dom元素

个人感觉，each更适合做“斑马线”之类的效果