jQuery 节点操作（增删改查）

卡尔特斯
277 阅读1分钟
  • 创建节点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul></ul>
  <script src="jquery-3.4.1.js"></script>
  <script>
    // 创建节点1: $('标签'); 相当于原生js中的 doument.createElement('li');
    console.log($('<li class="dzm">content</li>'));

    // 创建节点2: $('ul').html(''); 相当于原生js中的 innerHTML 属性，因为这个属性识别标签。
    $('ul').html('<li class="dzm">content</li>')
  </script>
</body>
</html>
  • 添加节点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(document).ready(function () {
      $('button').click(function () {
        // 创建一个新的jquery对象li
        var jqNewLi = $('<li>new dzm</li>');

        // append(); 在子盒子末尾添加元素 推荐使用
        // $('ul').append(jqNewLi);

        // appendTo(); 将元素塞到子盒子末尾
        // jqNewLi.appendTo($('ul'));

        // prepend(); 在子盒子最前面添加元素 推荐使用
        // $('ul').prepend(jqNewLi);

        // prependTo(); 将元素塞到子盒子最前面
        // jqNewLi.prependTo($('ul'));

        // after(); 将元素插入到指定盒子的后面，兄弟节点方式
        // $('li').after(jqNewLi)

        // before(); 将元素插入到指定盒子的前面，兄弟节点方式
        $('li').before(jqNewLi)
      })
    })
  </script>
</head>
<body>
  <button>添加li</button>
  <ul>
    <li>dzm</li>
  </ul>
</body> 
</html>
  • 添加节点 效果：

  • 删除清空节点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(document).ready(function () {
      // 清空
      $('button:eq(0)').click(function () {
        // 方法1
        // $('ul').html('');

        // 方法2
        $('ul').empty();
      })
      // 删除第一个li
      $('button:eq(1)').click(function () {
        // 方法： 自杀
        // $('li:eq(0)').remove()
      })
    })
  </script>
</head>
<body>
  <button>清空li</button>
  <button>删除第一个li</button>
  <ul>
    <li>dzm1</li>
    <li>dzm2</li>
    <li>dzm3</li>
  </ul>
</body> 
</html>
  • 删除清空节点 效果：

  • 复制节点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(document).ready(function () {
      // 复制节点
      $('button').click(function () {
        var newUl = $('.box ul').clone();
        $('.box').append(newUl);
      })
    })
  </script>
</head>
<body>
  <button>复制节点</button>
  <div class="box">
    <ul>
      <li>dzm1</li>
      <li>dzm2</li>
      <li>dzm3</li>
    </ul>
  </div>
</body> 
</html>
  • 复制节点 效果：

avatar
文章
阅读
粉丝