jQuery基础笔记（5）
day56
参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-5
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档操作示例</title>
</head>
<body> <ul id="u1">
<li id="l1">1</li>
<li>2</li>
<li>3</li>
</ul> <script src="jquery-3.2.1.min.js"></script>
</body>
</html>
实践：
添加到内部的前后两端。
另一种方式append、appendTo：
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
02点击在表格最后添加一条记录.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead> <!--表格的整体-->
<tbody>
<tr>
<td>1</td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>二哥</td>
<td>Girl</td>
<td>
<button class="delete">删除</button>
</td>
</tr> </tbody>
</table> <button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 绑定事件
$("#b1").click(function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
$(trEle).html("<td>3</td>" +
"<td>小东北</td>" +
"<td>社会摇</td>" +
"<td><button class='delete'>删除</button></td>");
// 把生成的tr插入到表格中
$("#t1").find("tbody").append(trEle);//添加 找到tbody标签添加
}); // 每一行的=删除按钮绑定事件
$(".delete").click(function () { //this表示删除这一个键
$(this).parent().parent().remove(); //删除，父标签的父标签，整行删除
}); </script>
</body>
</html>
效果：
替换
replaceWith()
replaceAll()
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>替换操作示例</title>
</head>
<body>
<!--跳转-->
<p><a href="http://www.sogo.com">aaa</a></p>
<p><a href="">bbb</a></p>
<p><a href="">ccc</a></p> <button id="b1">点我!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
// 创建一个img标签
var imgEle = document.createElement("img");//生成src标签
$(imgEle).attr("src", "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2927529377,3058292508&fm=27&gp=0.jpg");
$("a").replaceWith(imgEle);//将a标签中全部替换为img标签
// $(imgEle).replaceAll("a");
}); </script>
</body>
</html>
实践：
克隆
clone()// 参数
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
</head>
<body> <button id="b1">屠龙宝刀,点我就送!</button> <script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
$(this).clone(true).insertAfter(this);//克隆一份添加,关注clone()和clone(true)的区别
});
</script>
</body>
</html>
实践：
以上每个id都一样。
jQuery基础笔记（5）的更多相关文章
- jQuery基础笔记（1）
day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery? MySQL Python ...
- jquery基础 笔记一
一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...
- jQuery基础笔记 each和data（7）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...
- jQuery基础笔记 事件（6）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
- jQuery基础笔记（4）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...
- jQuery基础笔记（3）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签 样式操作 样式类 addClass();// 添 ...
- jQuery基础笔记（2）
day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...
- jquery基础 笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
- jquery基础 笔记二
动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
- Jquery基础笔记
1.$(function(){ 等价于 window.onload=function(){ }) } 2 ...
随机推荐
- Java jdk 8 新特性
list 统计(求和.最大.最小.平均) 第一种方式 int suma = listUsers.stream().map(e -> e.getAge()).reduce(Integer::sum ...
- inline 引起undefined reference to
main.cc:57: undefined reference to `evpp::udp::UdpDecoder::GetHeader()'collect2: error: ld returned ...
- laravel-excel文档翻译笔记
1.安装 1>composer 安装 "maatwebsite/excel": "~2.1.0" 2>app/config/ap ...
- Storm 系列（一）基本概念
Storm 系列(一)基本概念 Apache Storm(http://storm.apache.org/)是由 Twitter 开源的分布式实时计算系统. Storm 可以非常容易并且可靠地处理无限 ...
- 常见sql for oracle
select to_char(current_timestamp,'yyyy-mm-dd hh24:mi:ss.ff3'),to_char(sysdate,'yyyy-mm-dd hh24:mi:ss ...
- 2018.09.20 atcoder Painting Graphs with AtCoDeer（tarjan+polya）
传送门 一道思维题. 如果没有环那么对答案有k的贡献. 如果恰为一个环,可以用polya求贡献. 如果是一个有多个环重叠的双联通的话,直接转化为组合数问题(可以证明只要每种颜色被选取的次数相同一定可以 ...
- 20170908工作日记--Volley源码详解
Volley没有jar包,需要从官网上下载源码自己编译出来,或者做成相关moudle引入项目中.我们先从最简单的使用方法入手进行分析: //创建一个网络请求队列 RequestQueue reques ...
- Getting Started with Google Tango(Google Tango开始教程)
https://developers.google.com/tango/ Build apps that understand space and motion in high fidelity on ...
- 解决Error creating bean with name 'huayuanjingguanDaoimp' defined in file [D:\apache-tomcat-7.0.52\webapps\landscapings\WEB-INF\classes\com\itheima\landscaping\dao\imp\huayuanjingguanDaoimp.class]: Invo
问题描述: 10:23:13,585 ERROR ContextLoader:307 - Context initialization failedorg.springframework.beans. ...
- IT人员如何有效规划自己时间
中午和任职 DBA 的朋友聊天,他说:"老板老是要我把工作时间填长一点,让整个部门的工作时间比较好看,所以本来做 1 个小时的事要写 3 个小时."但我回答说若这件事情 ...