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 ...

随机推荐

Ubuntu下部分软件的简介及安装
1.安装linux摄像头应用软件cheese sudo apt-get install cheese 2.Ubuntu Tweak Ubuntu Tweak是一款专门为Ubuntu(GNOME桌 ...
详解python2 和 python3的区别-乾颐堂
看到这个题目大家可能猜到了我接下来要讲些什么,呵呵,对了,那就是列出这两个不同版本间的却别!搜索一下大家就会知道,python有两个主要的版本,python2 和 python3 ,但是python又 ...
gruop by报错this is incompatible with sql_mode=only_full_group_by
set @@GLOBAL.sql_mode=''; set sql_mode ='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_ ...
[原创汉化] 价值990美元的顶级专业数据恢复软件O&O DiskRecovery 11（技术员版）汉化绿色版
百度没搜索到11有汉化版的,有空就把它汉化了,大部分借鉴的是以前汉化版的词条.另外,顺便做了个二合一的单文件版给有需要的朋友. 运行环境: 可用于 Windows 2000/XP/2003/Vista ...
2018.08.20 loj#115. 无源汇有上下界可行流（模板）
传送门又get到一个新技能,好兴奋的说啊. 一道无源汇有上下界可行流的模板题. 其实这东西也不难,就是将下界变形而已. 准确来说,就是对于每个点,我们算出会从它那里强制流入与流出的流量,然后与超级源 ...
Class^=,Class*= ,Class$=含义(转)
在Twitter 中有看到如下selector: .show-grid [class*="span"] { background-color: #eee; text-align: ...
string的常用操作
操作符 1.+:可以把两个字符串加起来插入 iterator insert(iterator i, const char &ch); basic_string &insert(siz ...
AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析
前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...
generate
一:generate Verilog-2001添加了generate循环,允许产生module和primitive的多个实例化,同时也可以产生多个variable,net,task,function, ...
webuploader传递参数
实际开发过程中,比如我有个工单提交系统,提交工单的时候用webuploader上传图片,如果工单的ID是自增长类型的,那么我在上传图片的时候肯定需要关联上工单的id,这时候就需要通过webupload ...

jQuery基础笔记（5）

文档处理

jQuery基础笔记（5）的更多相关文章

随机推荐

热门专题