慕课网

Lalunashine

5-4 DOM包裹unwrap()方法我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ? jQuery提供了一个unwarp()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。看一段简单案例： <div> <p>p元素</p> </div> 我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法 $('div').remove(); 但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwarp方法很方便的处理了这个问题 $('p').unwarp(); 找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了结果： <p>p元素</p> 这个方法比较简单，也不接受任何参数，注意参考下案例的使用即可来自评论： $('p').unwrap('在此处随便加任何字符串都会被忽略的，完全不影响这个功能') jquery-3.1.1，不可传参，传参出错！

查看全部

0 采集收起来源：DOM包裹unwrap()方法

2018-03-22

Lalunashine

5-3 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结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。来自评论： 1.$('p').wrap('<div>')。。 2.$('p').wrap('<div/>')。。 3.$('p').wrap('<div></div>')。。以上三种写法都可以。但若写成$('p').wrap('div')，它就会将你文档中的第一个div元素（也就是那个.left）作为包裹元素。。。。 ‘$(this).text()’在此处的值为“a元素”，也就相当于return '<div class='a元素'></div>'

查看全部

0 采集收起来源：DOM包裹wrap()方法

2018-03-22

贝贝0_0

$("li").each(function(index, element) { index 索引 0,1,从0开始 element是对应的li节点 li,li this 指向的是li return false; 提前退出循环 })

查看全部

0 采集收起来源：jQuery遍历之each()

2018-03-22

贝贝0_0

【注意】容易引发歧义，add()有两种意思：【第一】：不是增加某个元素标签，而是又附加选择了一个元素操作：$('li').add('p')选择所有的li元素，之后把p元素也加入到li的合集中，仅仅是增加一个元素进入集合，而不是在某（类）元素中新建元素【第二】增加的同时又动态新增了一个 $('li').add('<p>add新增的p元素</p>').appendTo(目标位置) 新建的元素是在$('li')之后

查看全部

0 采集收起来源：jQuery遍历之add()方法

2018-03-22

贝贝0_0

【注意】： 1.起始位置不同：.closest开始于当前元素(当前元素也认为是自己的父元素) .parents\.parent开始于父元素（当前元素的上一级元素开始） 2.遍历的目标不同：.closest/.parent要找到指定的目标，.parents遍历到文档根元素 .closest/.parent向上查找，直到找到一个匹配的就停止查找 .parents一直查找到根元素，并将匹配的元素加入集合 3.结果不同： .closest/.parent返回的是包含零个或一个元素的jquery对象 parents返回的是包含零个或一个或多个元素的jquery对象

查看全部

0 采集收起来源：jQuery遍历之closest()方法

2017-03-07

Lalunashine

5-2 DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A 看个简单的例子：一段HTML代码 <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> 替换第二段的节点与内容 $("p:eq(1)").replaceWith('<a >替换第二段的内容</a>') 通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下 <div> <p>第一段</p> <a >替换第二段的内容</a>' <p>第三段</p> </div> .replaceAll( target ) ：用集合的匹配元素替换每个目标元素 .replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理 $('<a >替换第二段的内容</a>').replaceAll('p:eq(1)') 总结： .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别 .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 .replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用 .replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点来自评论： replaceWith()和html()实现的功能确实很像，但是最重要的一点 html()只是把所匹配到的节点里的内容给替换掉，而replaceWith()是把匹配到的这节点替换掉；

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()

2018-03-22

贝贝0_0

选择器 context 是由 .find() 方法实现的；因此： $('.item-ii').find('li') 等价于 $('li', '.item-ii') (找到类名为item-ii的标签下的li标签)。

查看全部

0 采集收起来源：jQuery遍历之find()方法

2017-03-07

Lalunashine

5-1 DOM拷贝clone() 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了例如： HTML部分 <div></div> JavaScript部分 $("div").on('click', function() {//执行操作}) //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆使用上就是这样简单，使用克隆的我们需要额外知道的细节： clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上 clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个来自评论： detach是剪切的话，clone就是复制了　 clone()就是画虎画皮难画骨　就是模仿了个结构　细节缺失　　｜　　就像复制了我同学的某盘的目录树　视频>日本战国文化>日本足轻　全是空文件夹………… clone(true)就是扫描仪　3d打印　了吧　或者说是一个分身　｜　这个就是把同学那个目录下所有东西复制过来了 “元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个。”有点绕…ａａａｓ…什么意思就是说　里面的对象和数组其实是共享的　复制的分身和本尊运用对象和数据时　其实针对的只是原本的那个对象和数组　就像快捷方式而已？

查看全部

0 采集收起来源：DOM拷贝clone()

2018-03-22

Lalunashine

4-5 DOM节点删除之detach()和remove()区别 JQuery是一个很大强的工具库，在工作开发中，有些方法因为不常用到，或是没有注意到而被我们忽略。 remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了通过一张对比表来解释2个方法之间的不同（表）方法名参数事件及数据是否也被移除元素自身是否被移除 remove 支持选择器表达是是（无参数时），有参数时要根据参数所涉及的范围 detach 参数同remove 否情况同remove remove：移除节点无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据 detach：移除节点移除的处理与remove一致与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。具体可以参考右边的代码区域的对比来自评论：简单点说，这一节讨论的是 detach和remove的返回值。 detach和remove都会返回“删除掉的节点”，区别是remove的返回值不会有事件。

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别

2018-03-22

Lalunashine

4-4 DOM节点删除之保留数据的删除操作detach() 如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理 detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。来看看jquery官方文档的解释：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据参考右边的代码区域，通过 $("p").detach()把所有的P元素删除后，再通过append把删除的p元素放到页面上，通过点击文字，可以证明事件没有丢失来自评论：为什么要去重？因为如果不去重，当你点击btn1后，再点一次btn1，它会把空内容赋给p，然后再点击btn2是没有内容出现。 if (!$("p").length) return，这句话是当你点击bt1的时候判断p有没有长度，也就是还有没有p元素，如果没有.length为0也就是false再加！就是true直接运行return，不运行下面的p = $("p").detach()，这样会避免当你连续点两次bt1时候重复给p赋值，这时再点bt2就加不回来p了。 if($("p").length) return；添加的时候，如果有p就直接返回，空则添加。这样就不会出现4个p了

查看全部

0 采集收起来源：DOM节点删除之保留数据的删除操作detach()

2018-03-22

Lalunashine

4-3 DOM节点删除之empty和remove区别要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别 empty方法严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法该节点与该节点所包含的所有后代节点将同时被删除提供传递一个筛选的表达式，删除指定合集中的元素以上就是二者的区别，我们具体通过右边代码部分加深理解

查看全部

0 采集收起来源：DOM节点删除之empty和remove区别

2017-03-07

Lalunashine

4-2 DOM节点删除之remove()的有参用法和无参用法 remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。例如一段节点，绑定点击事件 <div class="hello"><p>慕课网</p></div> $('.hello').on("click",fn) 如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单 //通过remove处理 $('.hello').remove() //结果：<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁 remove表达式参数： remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理对比右边的代码区域，我们可以通过类似于这样处理 $("p").filter(":contains('3')").remove() 来自评论： $("p").remove(":contains('3')") $("p").filter(":contains('3')").remove(); $("p:contains('3')").remove(); 这三种方式结果是一样的，不过处理方式不一样 remove会删除div，empty只是清空了div的内容，div本身还存在。就好像empty只是把可乐倒了装可乐的瓶子还留着，remove直接把可乐瓶一起丢了

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法

2018-03-22

Lalunashine

4-1 DOM节点删除之empty()的基本用法要移除页面上节点是开发者常见的操作，jQuery提供了几种不同的方法用来处理这个问题，这里我们开仔细了解下empty方法 empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML： <div class="hello"><p>慕课网</p></div> 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中 //通过empty处理 $('.hello').empty() //结果：<p>慕课网</p>被移除 <div class="hello"></div> 可以参考右边的代码区域：通过empty移除了当前div元素下的所有p元素但是本身id=test的div元素没有被删除来自评论：相当于 div.innerHTML=""; 我想意思就是　就是感觉身体被掏空吧　空只是一种感觉(清空内部的html代码)　脏器都还在呢　可以检查到（但是标记仍然留在DOM中）

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法

2018-03-22

Lalunashine

3-4 DOM外部插入insertAfter()与insertBefore() 与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore tu .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理注意事项： insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入； insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入； tip： insert(ed)Before insert(ed)After

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()

2017-03-07

Lalunashine

3-3 DOM内部插入prepend()与prependTo() 在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo 选择器的描述：tu 通过右边代码可以看到prepend与prependTo的使用及区别： .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()). .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。这里总结下内部操作四个方法的区别： append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中来自评论： (爹).prepend(大儿子)　　　主动收一个大儿子 (大儿子).prependto（爹）　　　主动来认爹当大儿子

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()

2017-03-07

jQuery基础(二)—DOM篇