前端jQuery之文档操作
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之文档操作的更多相关文章
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- jQuery 的文档操作
在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...
- (20)jQuery的文档操作(创建,添加、设置样式和删除等)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
- jQuery的文档操作
1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...
- jquery之文档操作
append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...
- jQuery系列(六):jQuery的文档操作
1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...
- 【JQuery】文档操作
一.前言 接着上一章的内容,接着JQuery的学习 二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...
- 前端之JQuery:JQuery文档操作
jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
随机推荐
- (转)ssh-keygen 中文手册
ssh-keygen 中文手册 原文:http://www.jinbuguo.com/openssh/ssh-keygen.html 实例:http://blog.csdn.net/yl_1314/a ...
- LeetCode 454.四数相加 II(C++)
给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) ,使得 A[i] + B[j] + C[k] + D[l] = 0. 为了使问题简单化,所有的 A ...
- Hadoop学习笔记(3) Hadoop I/O
1. HDFS的数据完整性 HDFS会对写入的所有数据计算校验和,并在读取数据时验证校验和.datanode负责在验证收到的数据后存储数据及其校验和.正在写数据的客户端将数据及其校验和发送到由一系列d ...
- java解析json串常识
注意:JSONObject 和JSONArray的使用区别 报错:A JSONObject text must begin with '{' at character 1 of 分析: JSONOb ...
- [Java][Liferay] 模拟用户
以admin的帐号登陆 Navigation to Users and Organizations -> All Users 找到你要查看的user,点击Actions->Imperson ...
- AFNetworking 3.0修改指南
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于NSURLConnectionAPI的所有支持.如果 ...
- 如何修改eclipse的web项目默认浏览器
- Spring课程 Spring入门篇 4-3 Spring bean装配(下)之Autowired注解说明2 集合运用
课程链接: 本节主要讲了以下几块内容 1 注解相关解析 2 代码演练 集合for循环的使用 2.1 list集合应用 2.2 map集合应用 2.3 集合排序(只对list有效,对map无效(list ...
- 顺序链表(C++)
顺序表结构 struct Sq_list { ]; int length; }; 创建并初始化顺序表 int Init_list(Sq_list *L) { L->length = ; ; } ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...