`

jquery匹配元素替换目标元素

 
阅读更多
DOM树结构如下:
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>


replaceAll(target) 删除与节点相关联的所有数据和事件处理程序
   用来替换的元素从老地方移到新位置,而不是复制:
$('.first').replaceAll('.third');
DOM树变为:
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>


replaceWith(newContent) 从DOM中移除内容,然后在这个地方插入新的内容

$('div.second').replaceWith('<h2>New heading</h2>');
DOM树变为:
<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>


replaceAll()和.replaceWith()功能类似,但是目标和源相反:$('.first').replaceAll('.third');等价于$('div.third').replaceWith($('.first'));
注意:jQuery1.9之前replaceWith()返回一个新的jQuery集合,
jQuery1.9开始replaceWith()返回原始未修改的集合
分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    其中`document`可以替换为任何包含目标元素的父级元素,`#dynamic-element-id`是目标元素的选择器,`function() {}`是事件触发时执行的回调函数。 5. 示例代码分析:文章中提供的代码展示了如何为动态生成的select...

    jQuery 删除/替换DOM元素的几种方式

    - `replaceAll()`: 这个方法则相反,它接受一个选择器作为参数,将指定的选择器匹配到的元素替换为调用该方法的jQuery对象。例如: ```javascript $('&lt;li&gt;removed&lt;/li&gt;').replaceAll('li.remove'); ``` 同样,这也...

    Jquery节点插入、复制和替换方法

    外部插入是指在目标元素外部进行新节点的添加,即在目标元素的前后添加新的节点。同样有两种方法: - **before(content)**:此方法会在每个匹配元素之前插入内容。 - 例如: ```javascript $("div").before("我...

    jQuery 实现搜索查找目标字符加红高亮功能.rar

    3. **查找匹配项**:使用 jQuery 选择器遍历整个页面,找到包含输入关键字的元素。这可能涉及到 `html()` 或 `text()` 方法来获取元素的文本内容,并使用正则表达式进行匹配。 4. **高亮匹配项**:找到匹配项后,...

    jQuery 文档操作方法

    replaceAll() 方法用于用匹配的元素替换所有匹配到的元素。 语法:`$(selector).replaceAll(target)` 参数: * `selector`:选择器,用于选择要替换的元素。 * `target`:要替换的目标元素。 返回值:无 示例...

    jquery基础教程(jquery in action)

    - `replaceAll(target)`:将每个匹配的元素替换为目标元素。 - **查找元素**: - `find(expression)`:获取当前元素集合中每一个元素的后代元素,这些后代元素都满足给定的选择器。 - `children([selector])`:...

    jQuery权威指南(完整版)

    - `.replaceAll(target)`:将每个匹配的元素插入到目标元素的当前位置,然后删除目标元素。 4. **查找元素**: - `.find(selector)`:获取由当前匹配元素集合中的每个元素后代组成的元素集合。 5. **遍历元素**...

    jQuery对指定元素中指定字符串进行替换的方法

    1. **多元素替换**:如果需要在多个元素中替换相同字符串,可以使用类选择器或`$.each()`遍历元素集合。 2. **动态内容替换**:当内容是动态加载或用户交互生成时,需要确保替换操作发生在正确的时间,如`$(document...

    JQuery方法事件大全

    - **功能**: 将每个匹配元素移动到另一个指定的元素末尾。 - **语法**: `$("元素名称").appendTo("目标元素");` - **示例**: 若要将所有`&lt;p&gt;`标签移到`&lt;div&gt;`标签的末尾,可以使用`$("p").appendTo("div");` **2.4 ...

    jQuery页内查找关键词

    可以将所有`&lt;span class="highlight"&gt;`元素替换回原始文本,使用`$(".highlight").contents().unwrap()`。 6. **优化性能**:对于大型文档,遍历所有文本节点可能会有性能问题。可以考虑仅对可见元素进行查找,或者...

    Jquery学习笔记分享

    4. **替换节点**:`replaceWith()`用于替换匹配元素,`replaceAll()`则是用选择的元素替换其他元素。 5. **包裹节点**:`wrap()`, `wrapAll()`, `wrapInner()`可以将元素包裹在其他元素内。 6. **属性操作**:`...

    jqueryUi基础教程

    SwitchClass 方法用于将匹配元素的一个类名替换为另一个类名。 **依赖的 JS 库:** - jQuery 核心库 **调用方法:** ```javascript $("#element").switchClass("oldClassName", "newClassName", [duration]); ``` ...

    jQuery 1.8 api

    - `replaceAll()`: 用一个新的元素替换已存在的元素。 3. **事件处理(Event Handling)** - `on()`: jQuery 1.7引入的新事件绑定函数,可以替代`bind()`, `live()`, `delegate()`,在1.8中进一步优化,支持多...

    jQuery插件-多选全选实时搜索下拉框

    这通常通过将`&lt;select&gt;`元素替换为一组`&lt;input type="checkbox"&gt;`和相应的`&lt;label&gt;`元素来实现,同时借助CSS和JavaScript进行样式和行为的定制。 **三、全选功能** 全选功能使得用户可以一键选择所有选项,这对于...

    jquery使用技巧,轻轻松松入门,30分钟精通

    - **功能**:将匹配元素移动到另一个元素的末尾。 - **示例**: ```javascript $("p").appendTo("#container"); ``` 4. **`before()`** - **语法**:`$("选择器").before("内容")` - **功能**:在匹配元素...

    JQuery 关键字高亮插件

    关键字高亮通常涉及到文本的搜索和替换操作,jQuery插件通过遍历DOM元素,查找包含目标关键字的文本节点,并对这些节点进行样式修改,以实现高亮效果。通常,这种高亮是通过添加特定CSS类或直接修改内联样式来完成的...

    JQuery元素快速查找与操作

    - `replaceAll()` 使用匹配的元素集合替换目标元素。 - `replaceWith()` 用提供的内容替换所有匹配的元素。 **类操作** - `addClass()` 添加一个或多个类到元素。 - `removeClass()` 移除一个或多个类。 - `...

    jquery pocket reference

    - **`.replaceAll()`**:用当前元素替换另一个元素。 ##### 4.2 复制元素 - **`.clone()`**:创建一个元素的副本。 - **深复制**:可以选择是否复制元素的子节点及其所有属性。 - **浅复制**:仅复制元素本身。 ...

    jquery技巧

    替换`path/to/`为jQuery文件的实际路径。加载完成后,即可在整个页面内使用jQuery提供的功能。 #### 三、学习资源 为了更深入地学习jQuery,建议参考以下资料: - **《jQuery中文API手册》**:提供详细的API说明...

Global site tag (gtag.js) - Google Analytics