慕课网

jQuery基础(二)—DOM篇

最热最新

煎饼学徒

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数所以大体上了解3个重点： each是一个for循环的包装迭代器 each通过回调的方式处理，并且会有2个固定的实参，索引与元素 each回调方法中的this指向当前迭代的dom元素

查看全部

0 采集收起来源：jQuery遍历之each()
2017-09-07
锦色流年

元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个不会被复制的意思就是两者公用一套数据，当你修改了其中一处的数据时，另一处也会随之变化这里为什么一定要用this？ $(".left").append($(this).clone().css("color","red")) 我用 $(".left").append($(".aaron1").clone().css("color","red"))为什么不可以 console.log("内容"); 慕课网的学习里一般用alert()来测试脚本，但是该方法有两个非常严重的弊端： 1.在alert()弹窗出现时，后续的脚本是阻塞的。这意味着，如果你需要做一个数值比较大的循环的时候，它不会一瞬间执行完，你必须要点掉弹出窗口后，它再继续执行，这测试效率是相当低的。 2.alert()会将所有内容隐式转换为字符串型（即toString()），这会输出开发者不可预料的内容，例如使用alert()输出对象型： 1 2 3 4 5 6 var a = { myNum:1, myArr:[1,2,3] }; alert(a); 你本希望能得到对象a中的键值对内容，但alert()只会输出[object,Object]。 this在这里不仅仅是指代aaron1它还有一层意思是指代，onclick这个行为下的aaron1，如果你只用aaron1，那么得到的结果会是错的，因为从第二次点击开始，class=aaron1的元素变成了两个，那么这时候就复制两个并添加到div里面，第三次点击就变成了8个，以此类推。但是你要达到的效果是每次点击就克隆一个，所以需要用this表明我要复制的是这个我附加了点击事件的class=aaron1的元素，而不是所有的class=aaron1的元素

查看全部

0 采集收起来源：DOM拷贝clone()
2018-03-22
锦色流年

var p = $("p:first").remove(); $("p:first"),选取第一个p元素，然后删除它的子元素和自身，最后，把这个赋值给变量p，实际上，remove会把所有的数据全部删除，所以这里的变量p是无意义的，但是改用detach，则是储存被删除的变量，因为detach还是会在内存中的 var p=$("p:first").detach()

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2018-03-22
锦色流年

多次点击第二个按钮，出现了几次“p2通过detach处理后,点击该元素事件存在”之后，这个p2的点击事件就没有了，刚开始几次还有的，后面重复点第二个按钮多点两次就没有，是怎么回事呀？因为是p元素的绑定事件，而代码里面只有两个p元素，所以最多只能响应2次，remove()也是这样，你多加一个p元素，就能多一次点击事件

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2017-09-07
锦色流年

如果文档中没有p的标签，就返回（$("p").length为假，!$("p").length为真）。 $("#bt1").click(function() { if (!$("p").length) return; //去重 //通过detach方法删除元素 //只是页面不可见，但是这个节点还是保存在内存中 //数据与事件都不会丢失 p = $("p").detach() }); 若是先点击bt2，就出现了4个p 若是先点击bt2，就出现了4个p了，这种情况如何避免？在append 里面加一个判断 if ($("p").length) return; 就好了

查看全部

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

$('p').click(function(e) { alert(e.target.innerHTML) }) 在触发DOM上的事件都会产生一个对象，即事件对象（也称event对象），这里用e接收事件对象。事件对象有很多属性和方法，此处的target属性是获取事件目标，即p元素DOM对象，然后获取其相应的属性 var p 就是定义了一个变量p；分别点击第一二个p标签，弹窗所显示的文本内容不同是因为一个用的是remove 还有一个是detach 他们定义的css样式文本内容不一样 if (!$("p").length) return; //去重应该是去重复的意思，避免之前有调用过这个对象

查看全部

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

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。，empty只清空其内容，容器本身不变化，而remove是连自己也一起丢掉了。 cpu资源耗尽：估计是机器没有反应了，键盘，鼠标，以及网络等等。在中了计算机病毒的设备上非常常见。进程id耗尽：没法创建新的进程了，串口或者telnet都没法创建了。内存泄漏:内存中的某一块正在被其他程序使用这时如果再有其他程序试图使用这块内存就会发生内存泄露.内存泄漏后果:硬盘耗尽：机器要死了，交换内存没法用，日志也没法用了，死是很正常的。内存泄漏或者内存耗尽：新的连接无法创建，free的内存比较少。发生内存泄漏的程序很多，但是要想产生一定的后果，就需要这个进程是无限循环的，是个服务进程。当然，内核也是无限循环的，所以，如果内核发生了内存泄漏，情况就更加不妙。如果不通过remove方法删除这个节点其实也很简单销毁事件第一种，对于$('.hello').on("click",fn)，销毁事件则是$('.hello').off("click")，off是on的反义词，很好理解；还有第二种方法，$('.hello').unbind()，这个方法的好处是如果$('.hello')绑定了不止一个事件，可以一次性全部解除事件绑定

查看全部

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

来看看jquery官方文档的解释：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

查看全部

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

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单 //通过remove处理 $('.hello').remove() //结果：<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁

查看全部

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

.wrap 每个人加个爸爸之前的： .append 最后面加个兄弟 (结合appendTo()来记) .prepend 最前面加个兄弟(prependTo()来记) .before 我的前面加个兄弟(结合insertBefore来记) .after我的后面加个兄弟(结合insertAfter()来记) .detach() 隐身 .remove 自杀 .empty 身体被掏空 .clone 复制（true全复制 false 浅复制，无事件） .replaceWith 删除并替换节点（结合.replaceAll()来记）

查看全部

0 采集收起来源：DOM包裹wrap()方法
2017-09-06
qq_诺诺

append（）在后面追加子元素 prepend（）在前面追加子元素

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-09-06
锦色流年

p:first-child 选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式,可能选到多个P。 first-child：父元素的第一个子元素且必须符合指定类型 first-of-type：父元素的符合指定类型的第一个子元素 <i>第1行</i> <p>第2行</p> <p>第3行</p> <p>第4行</p> </div> 则p:first-of-type的话，<p>第2行</p>会被选中；而p:first-child的话，将没有任何元素被选中！

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法
2018-03-22
锦色流年

内容.insertBefore(位置) 位置.before(内容)， empty（）只是移除子代，自己本身不受影响。在div里加文本也会被清空，就是说文本也属于div的子元素了,本属于里面的innerHtml，文本节点。 $("#test p:first-child").empty() 这样写可以，.empty()不能有参数 $("#test").html("");这样写有区别吗两种方法都是删除了test内部的所有html代码

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法
2018-03-22
锦色流年

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

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()
2017-09-05
锦色流年

•append()向每个匹配的元素内部追加内容 •prepend()向每个匹配的元素内部前置内容 •appendTo()把所有匹配的元素追加到另一个指定元素的集合中 •prependTo()把所有匹配的元素前置到另一个指定的元素集合中 4个都是从div内部插入内容，插入的p与div是父子关系 pre-pend pre在...前面，前缀但是另外的after(),before()从外部在p1前，后插入p2,兄弟关系

查看全部

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

首页上一页 114 115 116 117 118 119 120 下一页尾页

0/150

提交

取消

开始学习

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

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