1、插入操作

一、父元素.append(子元素) 追加某元素 父元素中添加新的元素

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
//jquery中的dom操作
//1.append(content)追加 往父元素中添加新的元素
//content:string | element | jquery元素
$('ul').append('<li>1233</li>')
$('ul').append(oli)
//如果直接的内容是当前页面中的某些元素,那么这些元素将从原位置上消失。简言之,就是一个移动操作
$('ul').append($('#app'))

二、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素


$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')

三、prepend() 前置添加, 添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

四、prependTo 后置添加,第一个元素添加到父元素中

 $('<a href="#">路飞学诚</a>').prependTo('ul')

五、父.after(子) 在匹配的元素之后插入内容 与 子.insertAfter(父)

$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')

六、父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)

$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

2、复制操作

clone() 克隆匹配的DOM元素并且选中这些克隆的副本


$('button').click(function() { // 1.clone():克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})

3、替换操作

一、replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

4、删除操作

一、remove() 删除节点后,事件也会删除(简言之,删除了整个标签)

$('ul').remove();

二、detach() 删除节点后,事件会保留

 var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)

三、empty(): 清空元素中的所有后代节点

//清空掉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.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...

  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对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

随机推荐

  1. Nginx 多进程连接请求/事件分发流程分析

    Nginx使用多进程的方法进行任务处理,每个worker进程只有一个线程,单线程循环处理全部监听的事件.本文重点分析一下多进程间的负载均衡问题以及Nginx多进程事件处理流程,方便大家自己写程序的时候 ...

  2. 理解 Ruby Symbol (Ruby中的冒号)

    http://blog.csdn.net/besfanfei/article/details/7966850 一直不明白:的作用 直到看到这篇文章 豁然开朗 处理符号相比字符串,占用更少的资源

  3. Laravel框架中Validor中错误信息$error的输出

    @if (count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($e ...

  4. CF 148D Bag of mice 概率dp 难度:0

    D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  5. linux 命令 --if

    if else-if else 语法格式: if condition1 then command1 elif condition2 then command2 else commandN fi 例如: ...

  6. js固定表头的实现(转)

    原文链接:http://www.th7.cn/web/js/201509/121055.shtml 参考链接:http://www.jb51.net/article/102568.htm 写两个表格, ...

  7. [QT][SQLITE]学习记录二 日期查询

    资料例程: 1.dongfangyu SQL时间段查询 : http://blog.csdn.net/dongfangyu/article/details/4607236 2.痕网 - henw  S ...

  8. springboot整合mybatis增删改查(一):项目创建

    新建 打开 IDEA 工具,通过 File -> New -> Project->Spring Initializr 主要步骤包括: 选择 Spring Initializr 项目 ...

  9. RabbitMQ引入

    引入MQ话题 可能很多人有疑惑:MQ到底是什么?哪些场景下要使用MQ? 前段时间安装了RabbitMQ,现在就记录下自己的学习心得吧.首先看段程序: class Program { static vo ...

  10. python面试(十四)

    1.下面代码会输出什么? map(lambda x:x*x,[y for y in range(3)]) [, , ] 答案 2.下面代码会输出什么? def f(x, l = [] ) for i ...