慕课网

jQuery基础(二)—DOM篇

最热最新

闲杂人

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理 detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。通过 $("p").detach()把所有的P元素元素删除后，在通过append把删除的p放到页面上，可以通过点击文字测试，事件没有丢失 $('p').click(function(e) { alert(e.target.innerHTML) }) var p; $("#bt1").click(function() { if (!$("p").length) return; //去重 //通过detach方法删除元素 //只是页面不可见，但是这个节点还是保存在内存中 //数据与事件都不会丢失 p = $("p").detach() }); $("#bt2").click(function() { //把p元素在添加到页面中 //事件还是存在 $("body").append(p); }); </script>

查看全部

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

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

查看全部

0 采集收起来源：DOM节点删除之empty和remove区别
2016-09-28
闲杂人

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(

查看全部

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

//把html结构'<p>新的p元素</p>' //加入到li的合集中，为了能够在页面上显示 //需要在重新appendTo要指定的节点处 //值得注意：整个结构位置都改变了 $('li').add('<p>新的p元素</p>').appendTo($('.right'))

查看全部

0 采集收起来源：jQuery遍历之add()方法
2018-03-22
jazia

closest(),首先从本身开始向上匹配，若匹配到符合要求的第一个，即停止匹配。必须有参数，否则无效 .parents（），从元素父级一直向上匹配，找出所有匹配的符合要求元素

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2016-09-28
jazia

1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找 2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。 children()：向下找儿子 parent()：向上找爸爸 parents()：向上找祖宗 find()：向下查找后代

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2018-03-22
jazia

parent()有可能得到的是一个集合，传参数可以筛选出集合中的元素

查看全部

0 采集收起来源：jQuery遍历之parent()方法
2016-09-28
anfumin

//找到class=item-2的所有兄弟节点 //然后筛选出最后一个，加上蓝色的边 $('.item-2').siblings(':last').css('border', '2px solid blue')

查看全部

1 采集收起来源：jQuery遍历之siblings()
2016-12-20
anfumin

$('.item-3').prev(':last').css('border', '1px solid blue')

查看全部

0 采集收起来源：jQuery遍历之prev()方法
2016-09-28
jazia

$(".class1 .class2")这个是选择class1类下带class2类的元素还是选择所有包含class1类和class2类的元素？答案： $(".class1 .class2") 选择class1元素下class2的元素（中间有空格） $(".class1.class2") 选择同时含有class1和class2的元素（中间没有空格） $(".class1,.class2") 选择class1或者class2的元素（中间有逗号） $("li:last",".left").css("border","1px solid blue"); <=> $(".left").find("li:last").css("border","1px solid blue"); find()方法要注意的知识点： find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。 find只在后代中遍历，不包括自己。 1.children只查找第一级的子节点

查看全部

0 采集收起来源：jQuery遍历之find()方法
2018-03-22
anfumin

//找到所有class=item-3的li //然后给每个li,然后筛选出第一个，加上蓝色的边 $('.item-2').next(':first').css('border', '1px solid blue')

查看全部

0 采集收起来源：jQuery遍历之next()方法
2016-09-28
jazia

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系） .children() ==> 无参数,是一个合集 .children(".selected") ==> 有参，查找筛选出来的结果， $('.div').children().eq(1).css('border', '3px solid red')这里的eq(1)不能放在children()里面，否则无效。

查看全部

0 采集收起来源：jQuery遍历之children()方法
2018-03-22
jazia

jQuery中wrap、wrapAll和wrapInner用法以及区别 <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> 1、$("li").wrap("<div></div>"); 每一个选择器都添加 <ul> <div><li title="苹果">苹果</li></div> <div><li title="橘子">橘子</li></div> <div><li title="菠萝">菠萝</li></div> </ul> 2、$("li").wrapAll("<div></div>"); 在所有选中的选择器最外面添加 <ul> <div> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </div> </ul> 3、$("li").wrapInner("<div></div>"); 为选择器的内容添加 <ul> <li title='苹果'><div>苹果</div></li> <li title='橘子'>><div>橘子</div></li> <li title='菠萝'>><div>菠萝</div></li> </ul>

查看全部

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

在使用DOM包裹方法是通常需要把on()改成one()，只执行一次就解绑。否则每点一次会执行一次。 <div class="right"> <p>p元素</p> <p>p元素</p> </div> <script type="text/javascript"> $(".aaron1").on('click', function() { //给所有p元素，增加内部包裹父容器div if($('p').html() == "p元素"){ $('p').wrapInner('<div></div>'); }else{ return; } }) </script> 以上代码供参考，可以加一个判断，如果p标签内部是“p元素”，那么久直接返回，不做操作。已经经过证实。

查看全部

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

$('.item-b').parents().css('border',"2px solid #00f")

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2018-03-22

首页上一页 306 307 308 309 310 311 312 下一页尾页

0/150

提交

取消

开始学习

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

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