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)的更多相关文章

  1. jQuery基础笔记(1)

    day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery?  MySQL Python              ...

  2. jquery基础 笔记一

    一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...

  3. jQuery基础笔记 each和data(7)

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...

  4. jQuery基础笔记 事件(6)

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 *****         1. 目前为止学过的绑定 ...

  5. jQuery基础笔记(4)

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...

  6. jQuery基础笔记(3)

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签 样式操作 样式类 addClass();// 添 ...

  7. jQuery基础笔记(2)

    day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...

  8. jquery基础 笔记三

    一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...

  9. jquery基础 笔记二

    动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...

  10. Jquery基础笔记

    1.$(function(){               等价于     window.onload=function(){ })                               } 2 ...

随机推荐

  1. linux-Centos 7下mysql 5.7.9的rpm包安装

    操作系统:Centos 7.1 mysql数据库版本:mysql5.7.18 1.安装新版mysql之前,我们需要将系统自带的mariadb-lib卸载 [root@123 ~]# rpm -qa|g ...

  2. [SoapUI] 获取当前时间包括年月日时分秒来作为命名

    import java.text.SimpleDateFormat GregorianCalendar calendar = new GregorianCalendar() def dateForma ...

  3. Netty 零拷贝(一)Linux 零拷贝

    Netty 零拷贝(一)Linux 零拷贝 本文探讨 Linux 中主要的几种零拷贝技术以及零拷贝技术适用的场景. 一.几个重要的概念 1.1 用户空间与内核空间 操作系统的核心是内核,独立于普通的应 ...

  4. part1:15-安装Linux系统到开发板

    1.Qtopia简介 Qtopia是Trolltech公司为采用嵌入式Linux操作系统的消费电子设备而开发的综合应用平台,Qtopia包含完整的应用层.灵活的界面用户.窗口操作系统.应用程序启动程序 ...

  5. 2018.10.08 NOIP模拟 斐波那契(贪心+hash/map)

    传送门 签到题. 显然是可以贪心分组的,也就是尽量跟当前的分成一组. 这时我们需要判断a[l]+a[r],a[l+1]+a[r]...a[r−1]+a[r]a[l]+a[r],a[l+1]+a[r]. ...

  6. 2018.08.09洛谷P3959 宝藏(随机化贪心)

    传送门 回想起了自己赛场上乱搜的20分. 好吧现在也就是写了一个随机化贪心就水过去了,不得不说随机化贪心大法好. 代码: #include<bits/stdc++.h> using nam ...

  7. 手机PC文件传输

    QQ啥的现在直接无法全部退出,很纠结后台运行,时不时的来条消息,明明电脑QQ还开着,越来越流氓了. 服务端代码: <%@ Page Language="C#" %> & ...

  8. S3 exercise -- 文件操作&函数

    编码 请说明python2 与python3中的默认编码是什么? # 答案 py2默认ASCII码,py3默认的utf8 为什么会出现中文乱码?你能列举出现乱码的情况有哪几种? # 答案 #codin ...

  9. IntelliJ IDEA 2017版 编译器使用学习笔记(三) (图文详尽版);IDE快捷键使用

    一.列操作 功能:操作多行列执行相同的功能,达到一次修改多行同类型数据的情况,如图:                 Json字符串,转为枚举类的字段: 首先进行,快捷键一行快速操作 1.选中命令,s ...

  10. hadoop 学习之异常篇

    本文旨在给予自己在学习hadoop过程中遇到的问题的一个记录和解决方法. 一. copyFromLocal: java.io.IOException: File /user/hadoop/slaves ...