慕课网

jQuery基础(二)—DOM篇

最热最新

qq时光是记忆de橡皮檫

<p>P元素1，默认给绑定一个点击事件</p><br> <p>P元素2，默认给绑定一个点击事件</p><br> <button id="bt1">点击删除 p 元素</button><br> <button id="bt2">点击移动 p 元素</button><br> <script type="text/javascript"><br> $('p').click(function(e) {<br> alert(e.target.innerHTML)<br> })<br> 弹出框内容“P元素1，默认给绑定一个点击事件” detach方法是JQuery特有的，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

查看全部

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

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对象，所以可以和其他方法链接使用返回的jQuery对象引用的是被删除的节点，而不是通过replaceWith/replaceAll方法替换的节点

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()
2018-03-22
qq时光是记忆de橡皮檫

要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别 empty方法严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法该节点与该节点所包含的所有后代节点将同时被删除提供传递一个筛选的表达式，用来指定删除选中合集中的元素

查看全部

0 采集收起来源：DOM节点删除之empty和remove区别
2016-08-03
qq_茯苓糯米_03658625

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法
2016-08-03
慕粉1462849184

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

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2018-03-22
qq_茯苓糯米_03658625

通过empty移除了当前div元素下的所有p元素但是本身id=test的div元素没有被删除

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法
2016-08-03
qq_茯苓糯米_03658625

$('<p >测试insertBefore方法增加</p>', '<p >多参数</p>').insertBefore($(".test1")) ($(".test1")).before($('<p >测试insertBefore方法增加</p>', '<p >多参数</p>'))

查看全部

1 采集收起来源：DOM外部插入insertAfter()与insertBefore()
2018-03-22
qq_茯苓糯米_03658625

append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2016-08-03
qq_茯苓糯米_03658625

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

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2016-08-03
jobing_sz

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

查看全部

0 采集收起来源：jQuery遍历之each()
2016-08-03
小儒生

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

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2016-08-03
棚倪

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

查看全部

0 采集收起来源：jQuery遍历之each()
2016-08-03
qq_茯苓糯米_03658625

innerHTML和createTextNode都可以把一段内容添加到一个节点中，区别是如果这段内容中有html标签（如你的例子中的<strong></strong>）时表现就不同了，在createTextNode中会当作文本处理，不会被浏览器解析，但用innerHTML就会被当作HTML代码处理 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 appendChild() 方法向节点添加最后一个子节点。

查看全部

0 采集收起来源：DOM创建节点及节点属性
2018-03-22
jobing_sz

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了起始位置不同：.closest开始于当前元素 .parents开始于父元素遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2016-08-03
棚倪

快速查找指定元集合中每一个元素紧邻的前面后面同辈元素，此时可以用siblings()方法

查看全部

0 采集收起来源：jQuery遍历之siblings()
2016-08-03

首页上一页 354 355 356 357 358 359 360 下一页尾页

0/150

提交

取消

开始学习

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

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