jQuery关于DOM操作节点一些方法

最新推荐文章于 2024-02-28 16:51:01 发布

玛莎拉迪迦

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量603

点赞数

分类专栏：笔记文章标签： js jquery

本文链接：https://blog.csdn.net/weixin_46156304/article/details/109685546

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

查找节点

jQuery 查找页面元素 - 并没有参考 DOM 中的 Node 对象，而是 Element 对象

text()方法 - 类似于 DOM 中的 textContent 属性
- 获取 - text()
- 设置 - text(textContent)
  textContent - 表示新的文本内容
attr()方法
获取 - attr(name) - 类似于 DOM 中的 getAttr(attrName)
设置 - attr(name,value) - 类似于 DOM 中的 setAttribute(name,value)

代码：

<body>
  <button id="btn" name="button">按钮</button>

  <script>
    //定位页面元素 - jQuery的选择器
    var $btn = $("#btn");

    //指定元素的文本内容 - 类似于DOM中的textCont属性
    console.log($btn.text());

    //指定元素的指定属性名得到的属性值 - 类似于DOM中的getAttr(attrName)
    console.log($btn.attr("name"));

    //还可以为指定元素设置文本内容
    $btn.text("新按钮");

    //为指定元素增加属性
    $btn.attr("class", "cls");

    /*
            jQuery查找页面元素 - 并没有参考DOM中的Node对象，而是Element对象
              text()方法 - 类似于DOM中的textContent属性
                获取 - text()
                设置 - text(textContent)
                  textContent - 表示新的文本内容
              attr()方法
                获取 - attr(name) - 类似于DOM中的getAttribute(attrName)
                设置  - attr(name,value) - 类似于DOM中的setAttribute(name,value)
        */
  </script>
</body>

获取父节点

parent(expr)方法
parents(expr)方法
closest(expr)方法

<div class="container">
  <ul>
    <li id="bj">北京</li>
    <li>天津</li>
    <li>廊坊</li>
  </ul>
</div>

<script>
  //定位页面元素 - jQuery的选择器
  var $bj = $("#bj");

  /*
            获取北京节点的父节点
            parent(expr)方法
              作用 - 获取指定元素的父节点
              参数
                expr - 可选，表示为选择器，起到过滤作用
        */
  console.log($bj.parent("div"));

  /*
            获取北京节点的所有祖先节点
            parents(expr)方法
              作用 - 获取指定元素的所有祖先节点
              参数
                expr - 可选，表示为选择器，起到过滤作用
        */
  console.log($bj.parents("div"));

  /*
            closest()方法
              作用 - 获取指定元素的指定祖先元素，返回第一个匹配的元素
              参数
                expr - 表示为选择器，起到过滤作用
            注意：jQuery永不报错，只是不提供结果
        */
  console.log($bj.closest("div"));
</script>

获取子节点

children()方法

find()方法

<div class="container">
  <ul>
    <li id="bj">
      北京
      <ul>
        <li>东城</li>
        <li>西城</li>
        <li>海淀</li>
      </ul>
    </li>
    <li>天津</li>
    <li>廊坊</li>
  </ul>
</div>

<script>
  var $ul = $("ul:first");
  //获取指定元素的所有子元素
  console.log($ul.children());
  //获取指定元素的指定后代元素
  console.log($ul.find("li"));
</script>

自定义获取祖先元素

<!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>
    <div class="container">
      <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>廊坊</li>
      </ul>
    </div>

    <script>
      var bj = document.getElementById("bj");
      var ul = bj.parentElement;
      var div = ul.parentElement;
      var body = div.parentElement;
      var html = body.parentElement;
      var root = html.parentElement; //null

      var arr = []; //用于存储指定元素的所有祖先元素
      function parents(element) {
        //获取指定元素的父元素
        var parent = element.parentElement;
        if (parent === null) {
          return;
        }
        //将获取到的父元素，添加到指定数组中
        arr.push(parent);
        //定义递归函数
        parents(parent);
      }
      parents(bj);
      console.log(arr);
    </script>
  </body>
</html>

效果：
在这里插入图片描述

获取相邻兄弟节点

next()方法

prev()方法

<div class="container">
  <ul>
    <li>南京</li>
    <li>保定</li>
    <li id="bj">北京</li>
    <li>天津</li>
    <li>廊坊</li>
  </ul>
</div>

<script>
  var $bj = $("#bj");
  console.log($bj.next()); //获取上一个相邻兄弟结点
  console.log($bj.prev()); //获取下一个相邻兄弟结点
</script>

效果：
在这里插入图片描述

创建节点

$(‘jQuery 中这里可以直接传字符串型的 HTML’)

append()方法将其添加到指定位置

<div class="container">
  <ul id="city">
    <li>南京</li>
    <li>保定</li>
    <li id="bj">北京</li>
    <li>天津</li>
    <li>廊坊</li>
  </ul>
</div>

<script>
  // //创建元素结点
  // var $newli = $('<li></li>')
  // //设置文本内容
  // $newli.text('长春');
  // //设置属性
  // $newli.attr('id','cc');

  var $newli = $('<li id="cc">长春</li>');

  $("#city").append($newli);
</script>

插入节点

外部节点

append()方法

appendTo()方法

prepend()方法

<ul id="city">
  <li id="bj">北京</li>
  <li>天津</li>
  <li>廊坊</li>
</ul>
<script>
  // 创建新的<li>元素
  var $li = $('<li id="cc">长春</li>');
  var $li1 = $('<li id="cc">武汉</li>');
  var $li2 = $('<li id="cc">长沙</li>');

  //append() - 类似于DOM中的appendChild()
  $("ul").append($li);
  //appendTo()方法与append()互为逆操作
  $li1.appendTo($("ul"));

  //prepend()方法 - 插入到指定节点的所有子节点列表的最前面
  $("ul").prepend($li2);
</script>

效果：
在这里插入图片描述

外部节点

before()方法

after()方法

<ul id="city">
  <li id="bj">北京</li>
  <li>天津</li>
  <li>廊坊</li>
</ul>
<script>
  // 创建新的<li>元素
  var $li = $('<li id="cc">长春</li>');
  var $li1 = $('<li id="cc">武汉</li>');

  $("ul").before($li);
  $("ul").after($li1);
</script>

效果：
在这里插入图片描述

移动节点

插入节点的方法也可以实现移动效果

<ul id="city">
  <li id="bj">北京</li>
  <li>天津</li>
  <li>廊坊</li>
</ul>
<ul id="game">
  <li id="wz">王者</li>
  <li>跳一跳</li>
  <li>台球</li>
</ul>
<script>
  //插入节点的方法也可以实现移动效果
  var $wz = $("#wz"); //作为新结点
  $("#city").append($wz);
</script>

效果：
在这里插入图片描述

删除节点

remove()方法

empty()方法

<ul id="city">
  <li id="bj">北京</li>
  <li>南京</li>
  <li>廊坊</li>
</ul>
<script>
  //哪个元素调用了remove() - 哪个元素被删除
  //$('#bj').remove();
  //empty()表示删除后代节点，保留自身节点 - 清空
  $("#city").empty();
</script>

替换节点

replaceWith()方法

replaceAll()方法

<ul id="city">
  <li id="bj">北京</li>
  <li>南京</li>
  <li>廊坊</li>
</ul>
<script>
  //被替换的元素调用replaceWith()方法，该方法接收的参数是替换的元素
  $("#bj").replaceWith($('<li id="cc">长春</li>'));
  //replaceAll()方法就是颠倒了的replaceWith()方法

  $('<li id="cc">长春</li>').replaceAll($("#bj"));
</script>

复制节点

clone(boolean)方法

<button id="btn">按钮</button>
<script>
  $("#btn").click(function () {
    console.log("this is button");
  });

  /*
            jQuery的clone(boolean)方法 - 参数表示是否复制事件
            DOM的cloneNode(boolean)方法 - 参数表示是否复制后代节点
        */
  var $copy = $("#btn").clone(true);
  $("body").append($copy);
</script>

属性操作

removeAttr()方法

<ul id="city">
  <li id="bj">北京</li>
  <li>南京</li>
  <li>廊坊</li>
</ul>
<script>
  //removeAttr()方法 - 类似于DOM中的removeAttribute()
  $("#bj").removeAttr("id");
</script>

样式操作

addClass(ClassName)方法

removeClass()方法

toggleClass()方法

hasClass(className)方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--引入jquery-->
    <script src="jquery-3.5.1.js"></script>
    <style>
      .one {
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }
      .two {
        width: 400px;
        height: 400px;
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      //通过设置style属性为<div>元素添加内联样式 - 代码可读性
      //$('#box').attr('style','width:100px;height:100px;background-color:red;')

      //通过设置class属性为<div>元素添加外联样式 - 预先定义
      $("#box").attr("class", "one");

      //addClass(ClassName)方法 - 表示添加样式(并不影响指定元素原本的样式)
      $("#box").addClass("two"); //添加
      //$('#box').attr('class','two');//设置

      /*
            removeClass()方法 - 删除样式
            * 没有参数代表删除所有样式
            * 如果传递一个样式名称代表删除指定样式
        */
      //$('#box').removeClass();

      //toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
      //$('#box').toggleClass('noe');

      //hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
      console.log($("#box").hasClass("one"));

      /*
            css()方法
            * css(name) - 获取指定元素的指定样式属性值
            * css(name,value) - 为指定元素设置指定的样式属性值(内联样式)
            * css(options) - 未指定元素设置指定的样式属性值(内联样式)
        */
      console.log($("#box").css("width"));
      //$('#box').css('width','600px');

      //jQuery支持链式操作 - jQuery提供的方法都统一返回jQuery对象
      //$('#box').css('width','600px').css('height','600px');

      $("#box").css({
        width: "600px",
        height: "600px",
      });
    </script>
  </body>
</html>

HTML 操作

html()方法

val()方法

<ul id="city">
  <li id="bj">北京</li>
  <li>南京</li>
  <li>廊坊</li>
</ul>
<input type="text" value="请输入你的用户名" />
<script>
  console.log($("#city").html());

  var $html = $("#city").html();
  $html += "<li>长春</li>";
  console.log($("input").val());
  $("input").val("密码");
</script>

玛莎拉迪迦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery关于DOM操作节点一些方法

查找节点jQuery 查找页面元素 - 并没有参考 DOM 中的 Node 对象，而是 Element 对象text()方法 - 类似于 DOM 中的 textContent 属性获取 - text()设置 - text(textContent)textContent - 表示新的文本内容attr()方法获取 - attr(name) - 类似于 DOM 中的 getAttr(attrName)设置 - attr(name,value) - 类似于 DOM 中的 setAttribu
复制链接

扫一扫

专栏目录