jQuery 之 DOM節點操作及位置和大小

阿新 • • 發佈：2019-01-06

1. jQuery建立DOM標籤

1.1 DOM動態建立標籤的方法

DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼：

// 動態建立標籤
var domDiv = document.createElment('div');
// 動態建立屬性
domDiv.setAttribute('id', 'box');
// 動態設定內部html標籤
domDiv.innerHTML = '<span>動態span</span>';
// 動態追加到body標籤中
document.body.appendChild(domDiv);

1.2 jQuery動態建立標籤的方式

jQuery的建構函式本身可以接收html標籤的字串來動態建立HTML標籤。

語法結構： jQuery(html, [props])

引數:

html:用於動態建立DOM元素的HTML標記字串，注意標籤儘量閉合。
props:用於附加到新建立元素上的屬性、事件和方法

返回值：返回新建立標籤的jQuery包裝物件

// jq的 appendTo，類似DOM的appendChild方法
$("<div><p>Hello</p></div>").appendTo("body");

// 兩次引數的情況
$("<div></div>" 
, {
  "class": "test", // 設定樣式類
  text: "Click me!",  // 設定內容
  click: function(){  // 設定點選事件處理程式
    $(this).toggleClass("test");
  }
}).appendTo("body"); // 追加到body標籤

2. DOM節點操作

2.1 新增子節點append(content|fn)方法

引數:
- content：型別String, Element, jQuery，新增的子節點。
- fn(index,html):返回一個HTML字串，用於追加到每一個匹配元素的裡邊。接受兩個引數，index引數為物件在這個集合中的索引值，html引數為這個物件原先的html值。
返回值：當前父包裝物件，jQuery
例項：

<div id="msg">hi</div>
<script>
  $(function(){
    // 新增字串
    $("#msg").append('<span>你好</span>');
    // 新增dom物件
    var domDiv = document.createElement('div');
    domDiv.innerHTML = "hi laoma q:515154084";
    $("#msg").append(domDiv);
    // 新增jQuery物件
    var $span = $('<span>我是 jQuery物件</span>');
    $(<span class="hljs-string">"#msg"</span>).append($span);

    $("#msg").append(function(index, oldHtml) {
      return "<span>==" + index + "==</span>";
    });
  });
</script>

prepend(content|fn)方法跟append(content|fn)的使用方法一致，只不過一個是在最後追加子節點，一個是在最前面追加子節點（prev vs after)

2.2 追加到appendTo(content)方法

引數：content：用於被追加的內容選擇器，String型別。
返回值：返回當前的jQuery包裝物件。
例項：

$("<div>****</div>").appendTo('body');

prependTo(content)方法，跟appendTo(content)的使用方法一致，一個是追加到最後，一個是追加到最前。

2.3 元素之後插入節點after(content|fn)方法

引數
- content：插入到每個目標後的內容，型別可以：String，DOM，jQuery
- fn(index,html)：函式必須返回一個html字串。
返回值： jQuery包裝物件
例項

// 字串
$('div').after('<p>1234</p>');
// jQuery物件
$(<span class="hljs-string">"p"</span>).after($("#msg"));
// dom物件
$(<span class="hljs-string">"p"</span>).after($("#msg")[0]);

// 傳入回撥函式
$("div").after(function(index, html) {
  return '<p>' + index  + '</p>'
})

before(content|fn) 方法正好是after(content|fn)相反的方法，用法一致。

2.4 插入某個元素之後insertAfter(content)方法

引數： content：插入到每個目標後的內容，型別可以：String，DOM，jQuery。

把所有匹配的元素插入到另一個、指定的元素元素集合的後面。實際上，使用這個方法是顛倒了常規的$(A).after(B)的操作，即不是把B插到A後面，而是把A插到B後面。

$("p").insertAfter("#foo");

insertBefore(content)跟此方法相反。

2.5 包裹節點wrap(html|element|fn)方法

概述：

把所有匹配的元素用其他元素的結構化標記包裹起來。
這種包裝對於在文件中插入額外的結構化標記最有用，而且它不會破壞原始文件的語義品質。這個函式的原理是檢查提供的第一個元素（它是由所提供的HTML標記程式碼動態生成的），並在它的程式碼結構中找到最上層的祖先元素－－這個祖先元素就是包裹元素。當HTML標記程式碼中的元素包含文字時無法使用這個函式。因此，如果要新增文字應該在包裹完成之後再行新增。

引數:
- html， String型別，HTML標記程式碼字串，用於動態生成元素幷包裹目標元素
- element， Element型別，用於包裝目標元素的DOM元素。
- fn: 生成包裹結構的一個函式,返回包裹結構html
返回值:jQuery包裝物件
例項

<script>
// 把所有的段落用一個新建立的div包裹起來
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div將每一個段落包裹起來
$("p").wrap(document.getElementById('content'));
// 用原先div的內容作為新div的class，並將每一個元素包裹起來
</script>

 <!-- HTML 程式碼: -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
// jQuery 程式碼:
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});
</script>

<!-- // 結果: -->
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

2.6 去掉父節點包裹unwrap()方法

這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素（以及他們的同輩元素）會在DOM結構上替換他們的父元素。

<!-- HTML 程式碼: -->
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
<script>
  // jQuery 程式碼:
  $("p").unwrap()
</script>
<!-- 結果: -->
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

2.7 集合包裝wrapAll(html|ele)方法

概述

將所有匹配的元素用單個元素包裹起來。這於 .wrap()是不同的，.wrap()為每一個匹配的元素都包裹一次。這種包裝對於在文件中插入額外的結構化標記最有用，而且它不會破壞原始文件的語義品質。這個函式的原理是檢查提供的第一個元素並在它的程式碼結構中找到最上層的祖先元素－－這個祖先元素就是包裝元素。

引數
- html， String型別，HTML標記程式碼字串，用於動態生成元素幷包裝目標元素
- elem， Element型別，用於包裝目標元素的DOM元素
示例

$("p").wrapAll("<div></div>");
// 用一個生成的div將所有段落包裹起來
$("p").wrapAll(document.createElement("div"));

2.8 包裹內部子元素wrapInner(htm|element|fnl)方法

概述

將每一個匹配的元素的子內容(包括文字節點)用一個HTML結構包裹起來
這個函式的原理是檢查提供的第一個元素（它是由所提供的HTML標記程式碼動態生成的），並在它的程式碼結構中找到最上層的祖先元素－－這個祖先元素就是包裝元素。

引數
- html， String型別，HTML標記程式碼字串，用於動態生成元素幷包裝目標元素
- element，Element型別，用於包裝目標元素的DOM元素
- fn，Function型別，生成包裹結構的一個函式
示例

// 把所有段落內的每個子內容加粗
$("p").wrapInner("<b></b>");
// 把所有段落內的每個子內容加粗
$("p").wrapInner(document.createElement("b"));

<!-- 用原先div的內容作為新div的class，並將每一個元素包裹起來 -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
  return '<div class="' + $(this).text() + '" />';
});
</script>

<!-- 結果: -->
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

2.9 替換階段

方法：replaceAll(selector),用匹配的元素替換掉所有 selector匹配到的元素。
方法：replaceWith(content),用於將匹配元素替換掉的內容。可以是String\DOM\jQuery

// 替換掉所有的p,以下兩種方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");

2.10 清空子元素

empty()方法，刪除匹配的元素集合中所有的子節點

$("p").empty();

2.11 刪除節點

remove()方法從DOM中刪除所有匹配的元素。

// 刪除所有的p標籤
$("p").remove();

2.12 複製節點

clone([Even[,deepEven]])方法可以對節點進行克隆。

Even:一個布林值（true 或者 false）指示事件處理函式是否會被複制。
deepEven:一個布林值，指示是否對事件處理程式和克隆的元素的所有子元素的資料應該被複制。


$("b").clone().prependTo("p");

上傳視訊標籤文字框特效案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>視訊標籤案例</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    html, body, div {
      padding: 0;
      margin: 0;
    }

    .label-wrap {
      width: 300px;
      /* height: 30px; */
      line-height: 30px;
      padding: 10px;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 100px auto;
    }

    .label-wrap .txt-lb {
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
      width: 60px;
      float: left;
    }

    .label-wrap .lb-span {
      float: left;
      border: 1px solid #ccc;
      padding: 0 10px;
      margin-right: 10px;
    }
  </style>
  <script src="./lib/jquery-1.12.4.js"></script>
</head>
<body>
  <div class="label-wrap">
    <span class="lb-span">jQuery<i class="glyphicon glyphicon-remove"></i></span>
    <input type="text" class="txt-lb">
  </div>
  <script>
    $(function(){

      // 當文字框按下按鍵時處理
      $('.txt-lb').on('keydown', function(e) {
        // 判斷使用者是否按下了回車： e.which == 13 回車鍵
        if( e.which == 13 ) {
          inputToLabel();
        } else if( e.which == 8) {
          // 按下了刪除鍵
          // 把最後一個lb-sapn標籤刪除，把裡面文字放到文字上去。
          if($(this).val().length <= 0) {
            var txt = $('.label-wrap span:last').text();
            $(this).val(txt);
            $('.label-wrap span:last').remove();

            // 取消預設行為，取消後退鍵刪除字元的預設行為
            e.preventDefault();
            e.stopPropagation();
          }
        }
      });

      // 給整個div繫結一個點選事件，進行給文字獲取焦點
      $('.label-wrap').on('click', function(e) {
        $('.txt-lb').focus();
      })

      // 當文字框失去焦點到時候，給div新增span標籤。另外input清空
      $('.txt-lb').on('blur', function(e) {
        inputToLabel();
      });

      // 刪除label按鈕點選事件
      $('.label-wrap').on('click', 'i', function(e) {
        $(this).parent().remove();
      });

      //  將文字框中的文字生成 label樣式的標籤。
      function inputToLabel() {
        // 判斷文字框不為空，則進行新增標籤操作
        if($(".txt-lb").val().length > 0 ) {
          // 當前文字框的 文字生成一個span標籤放到文字框之前
          var $lb = $('<span class="lb-span">' + $(".txt-lb").val() +'<i class="glyphicon glyphicon-remove"></i></span>');
          // 在文字框前面追加一個lb物件
          $(<span class="hljs-string">".txt-lb"</span>).before($lb);
          $(".txt-lb").val(''); // 設定value為空
        }
      }
    });
  </script>
</body>
</html>

3. DOM的CSS屬性讀寫

3.1 簡單獲取元素的內部寬高（不包括邊框和外邊距）

innerHeight()

獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。沒有引數，返回值是Integer型別

示例

獲取第一段落內部區域高度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
<!-- 結果: -->
<p>Hello</p><p>innerHeight: 16</p>

innerWidth()

獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。沒有引數，返回值是Integer型別

示例

<!-- 獲取第一段落內部區域寬度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
<!-- 結果: -->
<p>Hello</p><p>innerWidth: 40</p>

3.2 獲取元素的外部寬高（包括邊框或外邊距）

3.2.1 outerHeight([options])

概述

獲取第一個匹配元素外部高度（預設包括補白和邊框）。
此方法對可見和隱藏元素均有效。

引數： optionsBoolean預設值:’false’，設定為 true 時，計算邊距在內。
示例

<!-- 獲取第一段落外部高度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
<!-- 結果: -->
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

3.2.2 outerWidth([options])

概述

獲取第一個匹配元素外部寬度（預設包括補白和邊框）。
此方法對可見和隱藏元素均有效。

引數:optionsBoolean預設值:’false’,設定為 true 時，計算邊距在內。
示例

獲取第一段落外部寬度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
<!-- 結果: -->
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

3.3 jQuery獲取元素內容區域的寬高

3.3.1 height([val|fn])

概述

取得匹配元素當前計算的高度值（px）。在 jQuery 1.2 以後可以用來獲取 window 和 document 的高

引數

valString 可以是： Number, Function兩種類似。

Number: 設定CSS中 ‘height’ 的值，可以是字串或者數字，還可以是一個函式，返回要設定的數值。函式接受兩個引數，第一個引數是元素在原先集合中的索引位置，第二個引數為原先的高度。
function(index, height) index:String, height:Number 返回用於設定高度的一個函式。接收元素的索引位置和元素舊的高度值作為引數。
示例

//第一種：無引數描述:
// 獲取第一段的高
$("p").height();
// 第二種：一個引數引數val 
// 把所有段落的高設為 20:
$("p").height(20);

// 引數function(index, height) 
// 以 10 畫素的幅度增加 p 元素的高度
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

3.3.2 width([val|fn])

width的用法跟height一致，不再贅述。

3.4 獲取和設定滾動條的寬高

3.4.1 scrollTop([val])

概述

獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效。

引數: val 可以是：String, Number型別
例項：

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);

3.4.2 scrollLeft([val])

用法通scrollTop，不再贅述。

3.5 獲取位置和偏移量

3.5.1 position()

概述

獲取匹配元素相對父元素的偏移。此方法只對可見元素有效。從邊框開始計算。

返回值：Object{top,left} 返回的物件包含兩個整型屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用畫素單位。

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
// 結果：<p>Hello</p><p>left: 15, top: 15</p>

3.5.2 offset([coordinates])

概述

獲取匹配元素在當前視口的相對偏移。返回的物件包含兩個整型屬性：top 和 left，以畫素計。此方法只對可見元素有效。

引數可以省略（獲取），或者 coordinates 是Object型別，屬性：{top,left} 必需。規定以畫素計的 top 和 left 座標。比如 {top:100,left:0} ，或者：帶有 top 和 left 屬性的物件

// 獲取第二段的偏移
// <p>Hello</p><p>2nd Paragraph</p>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
// 結果:
// <p>Hello</p><p>left: 0, top: 35</p>

// 設定最後一個段落的top和left值
$("p:last").offset({ top: 10, left: 30 });