慕课网

jQuery基础(二)—DOM篇

最热最新

葫芦胡

如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法 .wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构听起来有点绕，可以用个简单的例子描述下，简单的看一段代码： <div>p元素</div> <div>p元素</div> 给所有元素增加一个p包裹内部元素被p包裹 $('div').wrapInner('<p></p>') 最后的结构，匹配的div元素的内部元素被p给包裹了里面的元素作为p的子元素 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div>

查看全部

0 采集收起来源：DOM包裹wrapInner()方法
2018-03-22
葫芦胡

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来即这些元素包裹在同一个父元素下面，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法给所有p元素增加一个div包裹 $('p').wrapAll('<div></div>') .wrapAll( function )一个回调函数,返回用于包裹匹配元素的HTML内容或jQuery对象 $('p').wrapAll(function() { return '<div><div></div>'; })

查看全部

0 采集收起来源：DOM包裹wrapAll()方法
2018-03-22
葫芦胡

jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置 $('p').unwrap(); 找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

查看全部

0 采集收起来源：DOM包裹unwrap()方法
2018-02-07
葫芦胡

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构 .wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已 $('p').wrap(function() { return '<div></div>'; //与第一种类似，只是写法不一样 }) $('p').wrap('<div></div>')

查看全部

0 采集收起来源：DOM包裹wrap()方法
2018-03-22
葫芦胡

$("p:eq(1)").replaceWith('<a >替换第二段的内容</a>') .replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理 $('<a >替换第二段的内容</a>').replaceAll('p:eq(1)')

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()
2018-03-22
葫芦胡

$(".aaron2").on('click', function() { console.log(1) $(".left").append( $(this).clone(true).css('color','blue') ) }) 在.left的后面添加这个的克隆同时将颜色变为蓝色

查看全部

0 采集收起来源：DOM拷贝clone()
2018-03-22
葫芦胡

HTML部分 <div></div> JavaScript部分 $("div").on('click', function() {//执行操作}) //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆需要传递一个布尔值

查看全部

0 采集收起来源：DOM拷贝clone()
2018-03-22
葫芦胡

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

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2018-03-22
葫芦胡

临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

查看全部

0 采集收起来源：DOM节点删除之保留数据的删除操作detach()
2018-03-22
葫芦胡

empty方法严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法该节点与该节点所包含的所有后代节点将同时被删除提供传递一个筛选的表达式，删除指定合集中的元素可以删除前面的元素中某些符合表达式条件的元素

查看全部

0 采集收起来源：DOM节点删除之empty和remove区别
2018-02-07
葫芦胡

$("button:first").on('click', function() { //删除整个 class=test1的div节点 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中，包含了3的元素 //这个也是一个过滤器的处理 $("p").remove(":contains('3')") })

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法
2018-03-22
葫芦胡

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单 //通过remove处理 $('.hello').remove() //结果：<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法
2018-03-22
葫芦胡

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML： <div class="hello"><p>慕课网</p></div> 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中通过empty移除了当前div元素下的所有p元素(子元素) 但是本身id=test的div元素没有被删除

查看全部

1 采集收起来源：DOM节点删除之empty()的基本用法
2018-03-22
葫芦胡

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面后者就类似有appendTo() .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()
2018-02-07
葫芦胡

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()). .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数要插入的内容是参数而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。等待插入是参数 append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中 ::after和::before是虚拟节点而不是正在的节点不在documont里面找到对应Node对象

查看全部

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

首页上一页 76 77 78 79 80 81 82 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、有HTML/CSS基础 2、有JavaScript基础

老师告诉你能学到什么？: 1、jQuery的语法 2、jQuery节点操作