當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

04-老马jQuery教程-DOM节点操作及位置和大小

發布時間：2024/4/17 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 04-老马jQuery教程-DOM节点操作及位置和大小小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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的appendTo方法 $("<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>');$("#msg").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對象 $("p").after($("#msg")); // dom對象 $("p").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包裝對象
實例

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

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

<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 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");

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 });

預告：
下一篇：jQuery的動畫系統詳解。

對應視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼

微信：Flydragon_malun 或者18911865673

總結

以上是生活随笔為你收集整理的04-老马jQuery教程-DOM节点操作及位置和大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AngularDart4.0 指南- 显
下一篇：一些常见的兼容问题