之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子:

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '赵云';
oUl.appendChild(oLi);

一.插入操作

知识点1:

语法:

父元素.append(子元素)

解释:追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素

代码如下:

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作。

知识点2:

语法:

子元素.appendTo(父元素)

解释:追加到某元素 子元素添加到父元素

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

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

知识点3:

语法:

父元素.prepend(子元素);

解释:前置添加, 添加到父元素的第一个位置

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

知识点4:

语法:

父元素.prependTo(子元素);

解释:后置添加, 添加到父元素的最后一个位置

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

知识点5:

语法:

父元素.after(子元素);
子元素.inserAfter(父元素);

解释:在匹配的元素之后插入内容

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

知识点6:

语法:

父元素.before(子元素);
子元素.inserBefore(父元素);

解释:在匹配的元素之后插入内容

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

二、克隆操作

语法:

$(选择器).clone();

解释:克隆匹配的DOM元素

$('button').click(function() {

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

三、修改操作

知识点1:

语法:

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。

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

知识点2:

语法:

$('<p>哈哈哈</p>')replaceAll('h2');

解释:替换所有。将所有的h2标签替换成p标签。

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

4、删除操作

知识点1:

语法:

$(selector).remove(); 

解释:删除节点后,事件也会删除(简言之,删除了整个标签)

$('ul').remove();

知识点2:

语法:

$(selector).detach(); 

解释:删除节点后,事件会保留

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

知识点3:

语法:

$(selector).empty(); 

解释:清空选中元素中的所有后代节点

//清空掉ul中的子元素,保留ul
$('ul').empty()

06-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的文档操作

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

  7. jquery之文档操作

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

  8. jQuery系列(六):jQuery的文档操作

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

  9. 【JQuery】文档操作

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

  10. jQuery二——属性操作、文档操作、位置属性

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

随机推荐

  1. 常见的php模式

    php中6种常见的设计模式 单例模式 观察者模式 策略模式 工厂模式 注册模式 适配器模式 单例模式 Db.php<?php /** * 单例模式 */ class Db { private s ...

  2. sqlserver数据库镜像运行模式

    运行模式: 从大层面来说,SQL Server镜像只有两种模式:高安全模式和高性能模式.两种模式的主要区别在于在事务提交后的操作.可以从图1-1中查看运行模式. 在高性能模式下,主体服务器不需要等待镜 ...

  3. pass parameter by endpoint, this is for websocket

    使用了Java的字符串:@ServerEndpoint("/chat/{room}")public class MyEndpoint {@OnMessagepublic void ...

  4. 推特算法,分布式ID

    package casclient_demo1.util; import java.lang.management.ManagementFactory; import java.net.InetAdd ...

  5. Redis 主从集群搭建及哨兵模式配置

    最近搭建了redis集群及哨兵模式,为方便以后查看特此记录下来: 1.Redis安装 2.主从架构 2.1 Redis主从架构图 2.2Redis主从结构搭建 Redis集群不用安装多个Redis,只 ...

  6. centos密码策略

    centos7密码策略 https://blog.csdn.net/qq_36896749/article/details/80264280 centos7设置密码规则 https://blog.cs ...

  7. 【Java】获取二维数组行列长度

    二维数组int array[][] = new int[3][3]; 行长度:array.length 列长度:array[i].length

  8. firewalld 操作

    https://blog.csdn.net/s_p_j/article/details/80979450 firewall-cmd --permanent --add-rich-rule=" ...

  9. css选择器querySelectorAll

    * querySelectorAll(css的选择器)* 通过css的选择器获取到的一组元素* 获取的也是类数组** 主语* document 从整个页面去获取一组元素* 父级 从父级下去获取一组元素 ...

  10. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...