慕课网

jQuery基础(二)—DOM篇

最热最新

湖南小白

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

简单的总结就是：
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2018-10-08
PinkySWEARr

.wrapAll(wrappingElement): 给集合中匹配的元素增加一个外面包裹HTML结构
.wrapAll(function)：一个回调函数，返回用于包裹匹配元素的HTML内容或jQuery对象

查看全部

0 采集收起来源：DOM包裹wrapAll()方法
2018-10-06
PinkySWEARr

.replaceWith(newContent): 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll(target): 用集合的匹配元素替换每个目标元素

查看全部

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

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

<table><tbody><tr class="firstRow"><td><br /></td><td><br /></td><td><br /></td><td><br /></td></tr><tr><td><p>方法名</p></td><td><p>参数</p></td><td><p>事件及数据是否也被移除</p></td><td><p>元素自身是否被移除</p></td></tr><tr><td><p>remove</p></td><td><p>支持选择器表达</p></td><td><p>是</p></td><td><p>是（无参数时），有参数时要根据参数所涉及的范围</p></td></tr><tr><td><p>detach</p></td><td><p>参数同remove</p></td><td><p>否</p></td><td><br /></td></tr></tbody></table><p><br /></p>

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2020-09-11
PinkySWEARr
empty方法
- 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
- empty不能删除自己本身这个节点
remove方法
- 该节点与该节点所包含的所有后代节点将同时被删除
- 提供传递一个筛选的表达式，删除指定合集中的元素
查看全部

0 采集收起来源：DOM节点删除之empty和remove区别
2018-10-06
PinkySWEARr

append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

查看全部

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

外部插入
.before() 在匹配元素之前插入
.after() 在匹配元素之后插入

查看全部

0 采集收起来源：DOM外部插入after()与before()
2018-10-06
PinkySWEARr

内部插入
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
.append(),内容在方法的后面
.appendTo(),内容在方法前面

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2018-10-06
慕仔8853991

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>方法</td><td>描述</td></tr><tr><td>children()</td><td>.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）</td></tr><tr><td>find()</td><td>find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。<br />与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'<br />find只在后代中遍历，不包括自己。<br />选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。</td></tr><tr><td>parent()</td><td>快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系）</td></tr><tr><td>parents()</td><td>快速查找合集里面的每一个元素的所有祖辈元素</td></tr><tr><td>closest()</td><td>起始位置不同：.closest开始于当前元素 .parents开始于父元素<br />遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合<br />结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象</td></tr><tr><td>next()</td><td>快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合</td></tr><tr><td>prev()</td><td>快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合</td></tr><tr><td>siblings()</td><td>快速查找指定元素集合中每一个元素的同辈元素</td></tr><tr><td>add()</td><td>动态添加新元素</td></tr><tr><td>.each()</td><td>一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数</td></tr></tbody></table><p><br /></p>

查看全部

0 采集收起来源：jQuery遍历之each()
2020-09-11
慕仔8853991

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>方法</td><td>描述</td></tr><tr><td>.clone()</td><td>复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了，clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据，元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个</td></tr><tr><td>.replaceWith( newContent )</td><td>用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合</td></tr><tr><td>.replaceAll( target ) </td><td>用集合的匹配元素替换每个目标元素</td></tr><tr><td>.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别<br />.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序<br />.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用<br />.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点</td><td><br /></td></tr><tr><td>.wrap( wrappingElement )</td><td>在集合中匹配的每个元素周围包裹一个HTML结构</td></tr><tr><td>.unwrap()</td><td>作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。</td></tr><tr><td>.wrapAll( wrappingElement )</td><td>给集合中匹配的元素增加一个外面包裹HTML结构</td></tr><tr><td>.wrapInner( wrappingElement )</td><td>给集合中匹配的元素的内部，增加包裹的HTML结构</td></tr></tbody></table><p><br /></p>

查看全部

0 采集收起来源：DOM包裹wrapInner()方法
2020-09-11
慕仔8853991

<table><colgroup><col /><col /><col /><col /><col /></colgroup><tbody><tr class="firstRow"><td>方法</td><td>描述</td><td><br /></td><td><br /></td><td><br /></td></tr><tr><td>.clone()</td><td>复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了，clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据，元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个</td><td><br /></td><td><br /></td><td><br /></td></tr><tr><td>.replaceWith( newContent )</td><td>用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合</td><td><br /></td><td><br /></td><td><br /></td></tr><tr><td>.replaceAll( target ) </td><td>用集合的匹配元素替换每个目标元素</td><td><br /></td><td><br /></td><td><br /></td></tr><tr><td>.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别<br />.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序<br />.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用<br />.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点</td><td><br /></td><td><br /></td><td><br /></td><td><br /></td></tr></tbody></table><p><br /></p>

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()
2020-09-11
慕仔8853991
- clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色
- 通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
- clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
- 元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个
查看全部

0 采集收起来源：DOM拷贝clone()
2018-10-05
慕仔8853991

remove：移除节点

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

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

empty：清空节点

清空节点下的HTMl语法，HTML语法不可恢复，节点下样式、事件等依然保留

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2018-10-05
慕仔8853991
empty方法
- 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
- empty不能删除自己本身这个节点
remove方法
- 该节点与该节点所包含的所有后代节点将同时被删除
- 提供传递一个筛选的表达式，删除指定合集中的元素
查看全部

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

首页上一页 34 35 36 37 38 39 40 下一页尾页

0/150

提交

取消

开始学习

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

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