jQuery關於DOM操作節點一些方法

小肖愛睡覺發表於2020-11-14

查詢節點

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>

jQuery操作dom節點empty()方法
2021-09-11
jQuery
jquery中dom節點操作方法empty和remove的區別
2021-09-11
jQueryREM
jQuery DOM節點的遍歷
2017-08-15
jQuery
JavaScript學習之DOM（節點、節點層級、節點操作）
2021-09-09
JavaScript
jQuery 操作 DOM
2019-08-21
jQuery
JS中的DOM— —節點以及操作
2021-09-09
JS
jquery常用表單&DOM操作方法
2016-07-26
jQuery
jQuery 之 [ DOM操作 ]
2018-09-06
jQuery
【jQuery】之DOM操作
2018-09-07
jQuery
jQuery的DOM操作、
2017-03-09
jQuery
jQuery中DOM操作
2016-01-06
jQuery
[jQuery] DOM操作薦
2013-08-10
jQuery
jQuery系列：DOM操作
2015-06-07
jQuery
javascript DOM元素節點操作簡單介紹
2017-04-14
JavaScript
jQuery入門-DOM操作
2018-09-23
jQuery
jQuery中的DOM操作
2018-09-06
jQuery
jquery 中的dom操作
2018-12-15
jQuery
js中dom節點刪除remove方法
2021-09-11
JSREM
關於效率的一些思考：節點創新
2016-12-27
原生JS中DOM節點相關API合集
2019-02-16
JSAPI
js獲取dom節點的方法有哪些
2021-09-11
JS
關於SAX，DOM，JAXP，JDOM，DOM4J的一些理解
2010-04-17
jQuery基礎DOM和CSS操作
2017-10-13
jQueryCSS
<react學習筆記(7)>操作DOM節點，元件傳參
2018-12-24
React筆記元件
關於JQuery操作checkbox問題
2018-11-11
jQuery
關於table的一些操作
2018-06-05
關於insert操作造成索引葉節點分裂的驗證
2006-04-30
索引
jQuery知識總結之DOM操作
2019-03-22
jQuery
使用jaxp解析器dom方式對xml節點進行操作
2018-03-25
XML
軟體測試：DOM節點
2019-08-01
關於dom（javascript）
2020-12-24
JavaScript
關於CSS一些細節問題
2016-12-29
CSS
《關於MySQL的一些騷操作》
2019-11-18
MySql
dom操作新增一個帶有文字的節點程式碼例項
2017-03-26
jquery遍歷節點
2020-12-20
jQuery
js判斷dom節點是否存在
2021-09-11
JS
你所不瞭解的javascript操作DOM的細節知識點(一)
2015-06-15
JavaScript
關於 DOM 的理解
2019-04-10

jQuery關於DOM操作節點一些方法

查詢節點

獲取父節點

獲取子節點

自定義獲取祖先元素

獲取相鄰兄弟節點

建立節點

插入節點

外部節點

外部節點

移動節點

刪除節點

替換節點

複製節點

屬性操作

樣式操作

HTML 操作

相關文章