1.文档操作
内部插入
    A.append(B)       吧B添加到A的后面
    A.appendTo(B)     吧A添加到B的后面
    A.prepend(B)      吧B添加到A的前面
    A.prependTo(B)    吧A添加到B的前面
外部插入
    A.after(B)        吧B添加到A的后面
    A.insertAfter(B)  吧A添加到B的后面
    A.before(B)       吧B添加到A的前面
    A.insertBefore(B) 吧A添加到B的前面
2.克隆操作
$(选择器).clone();

例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>克隆</title>

</head>

<body>

<button class="c1">点我</button>

<script src="jquery-3.2.1.min.js"></script>

<script>

    $(".c1").on("click",function () {

        $(this).clone(true).insertAfter($(this))

    })

</script>

</body>

</html>

3.替换操作

replaceWith(content|fn)
      A.replaceWith(B)  --> B替换A

replaceAll(selector)
      A.replaceAll(B)   --> A替换B
//将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')

//将所有h5标题标签替换成id为app的dom元素

$('h5').replaceWith($('#app'));

4.删除操作

删除节点后，整个标签都会被删除

$('ul').remove();

删除节点后，事件保留

$(selector).detach();

清空选中元素中的所有后代子节点

//清空掉ul中的子元素，保留ul

$('ul').empty()
 

前端jQuery之文档操作的更多相关文章

  1. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  2. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  3. jQuery 的文档操作

    在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...

  4. （20）jQuery的文档操作（创建，添加、设置样式和删除等）

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  5. jQuery的文档操作

    1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...

  6. jquery之文档操作

    append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...

  7. jQuery系列（六）：jQuery的文档操作

    1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...

  8. 【JQuery】文档操作

    一.前言 接着上一章的内容,接着JQuery的学习 二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...

  9. 前端之JQuery：JQuery文档操作

    jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...

随机推荐

  1. line-height 150%和1.5的区别

    好惨啊,九点多了没事做还不能下班,坑爹的测试啊~~~ 刚才拿这个问题调戏了下部门一位资深前端开发,结果发现,他居然不会,呵呵~~~ 这里就说下吧 html: <div class="p ...

  2. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

  3. 使用vue Devtools

    第一步: 在谷歌应用商店中查找 vue Devtools 并安装.安装之后,即使我们打开了vue项目发现vue标识是灰色的,说明并没有成功启动vue. 第二步: 默认安装的情况下,找到C:\Users ...

  4. Kure讲HTML_如何学习HTML

    HTML即是超文本标记语言,它主要是用来构建网页的轮廓的.HTML自身包含了众多的API(应用程序接口:即HTML暴露给Web前端开发者的语言特性,当然作为开发者就应该更多的关注这个.)话不多说,直接 ...

  5. 实例化php类的时候如何传参

    当我们实例化一个php类的时候,要怎么传递参数呢?这取决于该类的构造方法. 例: person.class.php <?php class person{ var $name; var $col ...

  6. CRLF注入攻击

      原理:http数据包通过\r\n\r\n来分开http header何http body 实现:首先这种攻击发生在应用层,且发生在服务器返回给我们的http reponse没有经过敏感字符的过滤, ...

  7. Aspose.Words导出图片 表格 Interop.Word

    先定义一个WORD 模板, 然后替换文本.域 ,定位开始表格 文本和段落 // Specify font formatting Aspose.Words.Font font = builder.Fon ...

  8. hibernate课程 初探一对多映射2-3 创建hibernateUtil工具类

    本节主要内容:创建hibernateUtil工具类:demo demo: HibernateUtil.java package hibernate_001; import org.hibernate. ...

  9. nopcommerce3.6中文包

    nopCommerce 语言包,xml文件 点击下载:3.60_language_pack_zh.rar (60.82 kb) 下载后解压通过后台导入即可使用.如何导入?点击这里

  10. Java 中的四种引用

    1.强引用(Strong Reference)在 Java 中四种引用中是“最强”的,我们平时通过 new 关键字创建的对象都属于强引用,如下面的代码: Person person = new Per ...