`
gaofan0528
  • 浏览: 18814 次
社区版块
存档分类
最新评论

替换复制包裹

 
阅读更多

替换节点有两个方法 分别是replaceWith()   replaceAll()  all在许多地方都是全部的意思

举个例子用第一中replaceWith()

 

$("button").click(function(){
   $("p").replaceWith("<b>Hello world!</b>");
});

获取button按钮 添加一个click事件 
再获取p元素 替换成b标签里的Hello world

replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容
 $(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素,content为替换的内容

替换后元素中全部事件消失

 

复制节点   clone()

 

$("button").click(function(){
$("p").clone().appendTo("body");
}); 
所有的 <p> 元素,并插入到 <body> 元素的结尾
appendTo插到元素结尾
也可以使用prepend插到元素的开头

 复制节点后新的元素没有任何行为事件

 

可以使用下边这种写法让他带有行为

 

$(this).clone(true).appendTo("body")
在clone()中传入一个参数true 意义是复制所有元素的同时复制所带的事件

包裹节点 就是可以用标签包裹所获取的元素

 

包裹节点有三种方法 wrap()   wrapAll() 

wrap()

wrap()方法是将所有的元素进行单独的包裹

 

$("#li_1").wrap("<strong></strong>");

<strong>
  <li id="li_1" title="编程">gaofan</li>
</strong>

 wrapAll()

会将所有匹配的元素用一个元素来包裹

$(".li_2").wrapAll("<strong></strong>");

<strong>
  <li class="li_2" title="编程">gao</li>
  <li class="li_2" title="JavaScript">lalala</li>
</strong>

 

判断是否含有某个样式hasClass方法()

$("button").click(function(){
alert($("p").hasClass("intro"))
})
判断p是否使用了intro类   
如果有   返回true   

 jquery里有children()方法它可以遍历找到你所需要的元素

$("div").children(".selected").css("color", "blue")
找到类名为 "selected" 的所有 div 的子元素并设置为蓝色

 

分享到:
评论

相关推荐

    juqery 学习之五 文档处理 包裹、替换、删除、复制

    在jQuery库中,文档处理是一组非常重要的功能,它们允许开发者对HTML结构进行操作,包括包裹、替换、删除和复制元素。这些操作极大地提升了页面动态更新和内容管理的灵活性。 首先,我们来看`wrap()`函数。`wrap...

    在网上复制代码 前面总是带序号 这个可以去掉序号

    - 如果你是在编写Markdown文档,可以利用Markdown的代码块语法(如```),在粘贴代码时先将其包裹在这些符号内,这样在解析时不会显示序号。 总之,去除代码复制过程中的序号有多种方式,从简单的手动操作到利用...

    jQuery插入节点1

    在本文中,我们将详细介绍 jQuery 中的插入节点方法,包括创建节点、插入节点、删除节点、克隆节点、替换节点和包裹节点等。 创建节点 在 jQuery 中,可以使用工厂函数 `$()` 来创建节点。例如,`$("&lt;p&gt;")` 将创建...

    详解jQuery中的DOM操作

    这篇关于“详解jQuery中的DOM操作”的文章深入介绍了jQuery如何帮助我们查找、创建、修改、插入、删除、复制、替换和包裹DOM节点,以及处理元素的属性。 首先,jQuery提供了强大的选择器系统来查找DOM节点。例如,...

    AngularJS自定义指令之复制指令实现方法

    1. `transclude: 'element'`: 这表明我们要进行元素级别的插槽(transclusion),即将指令包裹的元素内容替换为实际的DOM元素。 2. `replace: true`: 指令元素将被替换为其生成的DOM结构。 3. `priority: 2`: 设置...

    AssetsCopier:因为我们在开发android应用程序时无法在C ++(JNI)代码中使用文件的绝对路径。 因此,我们将资产文件复制到SdCard

    因此,我们将资产文件复制到SdCard。 这样我们就可以通过绝对路径读取文件了。 我们可以使用AssetsCopier的静态函数: 公共静态无效copyAllAssets(上下文上下文,字符串目标) 基本用法如下: AssetsCopier....

    jQuery学习笔记 操作jQuery对象 文档处理

    在jQuery中,文档处理是指通过jQuery对象对HTML文档结构进行操作,这种操作包括添加、移动、复制、替换和包裹元素等。HTML文档结构被视为树型结构,每个HTML标签都是树中的一个节点,文档处理实际上就是对这棵树进行...

    asp 使用正则表达式替换word中的标签,转为纯文本

    \*/"模式可以匹配斜杠和星号包裹的注释内容,包括斜杠、星号以及它们之间的所有字符。这一步骤确保了所有隐藏的格式标签或指令不会在网页上展示。 除了上述正则表达式,还有一种Word特有的表格标记“table....

    CONCPY:Windows命令行工具,用于复制控制台窗口内容。-开源

    也就是说,在窗口右边缘包裹的长行也将被包裹在复制的文本中。 制表符停止符将替换为控制台窗口中的空格。 尾随空格被剥离。 该工具在窗口缓冲区的开头(左上角)和文本光标的当前位置之间复制内容。

    dart_algolia:[非官方] Algolia是一个纯Dart SDK,包裹在Algolia REST API中,可轻松实现Flutter或Dart项目

    - 特征查询/搜索/类似查询获取对象添加对象添加对象替换索引中的所有对象更新对象部分更新对象删除物件执行批处理活动添加索引删除索引清除索引复制索引移动索引索引设定版本兼容性有关所有重大更改(和非重大更改...

    eclipse快捷键大全

    在编写代码时经常需要复制某行代码进行修改,这个快捷键可以轻松实现行的复制,并自动将复制的内容放置于下一行。 - **Alt+/**:自动补全。当输入代码时,可以通过此快捷键调用Eclipse的自动补全功能,大大提高了...

    selenium自动化笔记

    这些快捷键包括复制文件、移动文件、重命名、安全删除、改变函数形式参数、将代码提取为函数、将代码提取为变量、将代码提取为常数、将代码提取为字段、将代码提取为参数等。 动态模块快捷键 动态模块快捷键是...

    CHATGPT无法正确显示数学公式问题解决

    单行公式可以使用`$`包裹,但ChatGPT可能不支持这种方式,推荐使用多行公式环境。 四、检查特殊字符转义 某些字符在LaTeX中具有特殊含义,如`#`、`%`、`&`和`_`,在输入时需要使用反斜杠`\`进行转义。例如,若要...

    testGAD:TUM 的 GAD 简单测试包

    测试GAD TUM 的 GAD 简单测试包 使用: 只需将其复制到项目的 src 文件夹中即可。... 包裹名字将其替换为您要测试的包的名称 如果你运行 Main,它应该测试它在文件夹中找到的所有案例,直到它遇到错误答案的测试。

    全屏代码使用

    在第二段代码中,`&lt;a&gt;`标签包裹着`&lt;img&gt;`标签,形成了一个可点击的链接,`target="_blank"`表示新窗口打开链接。 4. **HTML替换区域**: 代码中的`&lt;!--可以 HTML 代码替换本区域 开始--&gt;`和`&lt;!--可以 HTML 代码...

    java源码直接复制jsp-htmlcompressor:HTMLCompressor和Minifier,可以独立使用,也可以作为Java库使

    直接复制 jsp HtmlCompressor 是一个小巧、快速且非常易于使用的 Java 库,它通过在不破坏内容结构的情况下删除额外的空格、注释和其他不需要的字符来缩小给定的 HTML 或 XML 源。 结果页面变得更小,加载速度更快。...

    锋利的jQuery jQuery中的DOM操作

    总结来说,文档中归纳了在jQuery中进行DOM操作的多种方法,涵盖了从元素的查找、创建、插入、移动、删除、复制、替换到属性和样式的操作,为Web开发人员提供了强大的工具来管理DOM结构,从而实现丰富、动态的用户...

    锋利的jQuery_高清_书签.part2

    3.2.5 复制节点 3.2.6 替换节点 3.2.7 包裹节点 3.2.8 属性操作 3.2.9 样式操作 3.2.10 设置和获取HTML、文本和值 3.2.11 遍历节点 3.2.12 CSS—DOM操作 3.3 案例研究——某网站的超链接和图片提示效果 3.4 小结 第4...

    sed 用法介绍

    sed接收来自文件、标准输入或其他来源的文本流,将其复制到内部缓冲区进行处理。处理过程涉及命令解析、模式匹配以及文本修改,之后将修改后的文本输出。值得注意的是,sed默认不会修改原文件,而是将处理结果输出到...

Global site tag (gtag.js) - Google Analytics