jQuery核心对象——文档处理

_洋

已于 2022-05-01 23:12:01 修改

阅读量146

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-05-01 20:06:53 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124531159

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

内部插入
外部插入
包裹
替换
删除
复制
练习
- 练习1
- 练习2

内部插入

append(content|fn)：向每个匹配的元素内部追加内容。
appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend(content)：向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
prependTo(content)：把所有匹配的元素前置到另一个、指定的元素元素集合中。

外部插入

after(content|fn)：在每个匹配的元素之后插入内容。
before(content|fn)：在每个匹配的元素之前插入内容。
insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

包裹

wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
wrapAll(html|ele)：将所有匹配的元素用单个元素包裹起来
wrapInner(htm|ele|fnl)：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

替换

replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素。
detach([expr])：从DOM中删除所有匹配的元素。

删除

empty()：删除匹配的元素集合中所有的子节点。
remove([expr])：从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])：从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

复制

clone([Even[,deepEven]])：克隆匹配的DOM元素并且选中这些克隆的副本。

练习

练习1

需求:
1.向id为ul1的ul下添加一个span(最后)
2.向id为ul1的ul下添加一个span(最前)
3．在id为ul1的ul下的Li(title为hello)的前面添加span
4．在id为ul1的ul下的Li(title为hello)的后面添加span
5．将在id为ul2的ul下的Li(title为hello)全部替换为p
6．移除id为ul2的ul下的所有li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档</title>
</head>
<body>
    <ul id="ul1">
        <li>AAAAA</li>

        <li title="hello">BBBBB</li>
        <li class='box'>CCCCC</li>

        <li title="hello">DDDDD</li>
        <li title="two">EEEEE</li>
        <li>FFFFF</li>
    </ul>
    <br>
    <br>
    <ul id="ul2">
        <li>aaa</li>
        <li title="hello">bbb</li>
        <li title="box">ccc</li>
        <li title="hello">ddd</li>
        <li title="two">eee</li>
    </ul>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>    
        // 1.向id为ul1的ul下添加一个span(最后)
        var $ul1=$('#ul1')
        $ul1.append('<span>append()添加的span</span><br>')
        $('<span>append()添加的span2</span><br>').appendTo($ul1)
        // 2.向id为ul1的ul下添加一个span(最前)
        $ul1.prepend('<span>prepend()添加的span</span><br>')
        $('<span>prepend()添加的span2</span><br>').prependTo( $ul1)
        // 3．在id为ul1的ul下的li(title为hello)的前面添加span
        $ul1.children('li[title=hello]').before('<span>before()添加的span</span><br>')
        // 4．在id为ul1的ul下的li(title为hello)的后面添加span
        $ul1.children('li[title=hello]').after('<span>after()添加的span</span><br>')
        // 5．将在id为ul2的ul下的li(title为hello)全部替换为p
        // $('#ul2').children('li[title=hello]').replaceAll('<p>replaceAll替换的p</p>')
        $('#ul2>li[title=hello]').replaceWith('<p>replaceWith替换的p</p>')
        // 6．移除id为ul2的ul下的所有li
        // $('#ul2').empty() p标签也删除了
        $('#ul2>li').remove()

    </script>
    
</body>
</html>

练习2

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      #employeeTable {
        border-collapse: collapse;
        margin: 0 auto;
      }
      #employeeTable td,
      th {
        padding: 5px 20px;
      }
      #formDiv {
        border: 1px solid black;
        width: 30%;
        margin: 80px auto;
        text-align: center;
      }
      #formDiv table {
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <table border="1" id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr id="Tom">
        <td>Tom</td>
        <td>TOM@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr id="Jerry">
        <td>Jerry</td>
        <td>Jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr id="Bob">
        <td>Bob</td>
        <td>Bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>

    <div id="formDiv">
      <h4>添加新员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="empName" id="empName" />
          </td>
        </tr>
        <tr>
          <td class="word">Email:</td>
          <td class="inp">
            <input type="text" name="empEmail" id="empEmail" />
          </td>
        </tr>

        <tr>
          <td class="word">Salary:</td>
          <td class="inp">
            <input type="text" name="empSalary" id="empSalary" />
          </td>
        </tr>

        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">提交</button>
          </td>
        </tr>
      </table>
    </div>

    <script type="text/javascript" src="./jquery库/jquery-1.12.4.js"></script>
    <script>
      $("#addEmpButton").click(function () {
        //    1.收集输入的数据
        var $empName = $("#empName");
        var $email = $("#empEmail");
        var $salary = $("#empSalary");
        var empName = $empName.val();
        var email = $email.val();
        var salary = $salary.val();
        // 2. 生成对应的<tr>标签结构，并插入#empLoyeeTable的tbody中
        $("<tr></tr>")
          .append("<td>" + empName + "</td>")
          .append("<td>" + email + "</td>")
          .append("<td>" + salary + "</td>")
          .append(
            '<td><a href="deleteEmp?id=' + Date.now() + '">Delete</a></td>'
          )
          .appendTo("#employeeTable>tbody")
          .find("a")
          .click(clickDelete);

        // 3.清除输入
        $empName.val("");
        $email.val("");
        $salary.val("");
      });

      $("#employeeTable a").click(clickDelete);

      function clickDelete() {
        var $tr = $(this).parent().parent();
        var name = $tr.children(":first").html();
        if (confirm("确定删除" + name + "吗？")) {
          $tr.remove();
        }
        return false;
      }
    </script>
  </body>
</html>