jQuery筆記（四）-- 操作DOM

DOM操作可分為3個方面：DOM Core(核心)、HTML DOM和CSS DOM
（1）DOM Core不屬于JavaScript語言范疇，任何一種支持DOM的程序設計語言都可以操作它，它的用于不限于處理網頁，也可以用來處理任何一種使用標記語言編寫出來的文檔，如XML。JavaScript中的createElement()、getElementById()和removeAttribute()等方法都是DOM Core的組成部分。
（2）HTML DOM的出現比DOM Core要早，它提供了一些更簡明的記號來描述各種HTML元素的屬性，如訪問表單document.forms等。
（3）CSS DOM主要操作CSS。在JavaScript中，CSS DOM主要作用是獲取和設置style對象的各種屬性。通過改變style對象的各種屬性，可以使網頁呈現出不同的效果。
jQuery作為一種JavaScript庫，繼承并優化了JavaScript訪問DOM對象的特性，是開發人員更加方便的操作DOM對象。

1、創建節點

在Web開發中，要創建動態網頁內容，主要操作的節點包括元素、屬性和文本。

  • 創建元素：DOM中的createElement()方法能夠根據參數指定的標簽名稱創建一個新的元素，并返回新建元素的引用。在jQuery中，簡化了DOM操作，直接使用構造函數$()創建元素對象。用法：$(html)，該函數能夠根據參數html所傳遞的HTML字符串，創建一個DOM對象，并將該對象包裝為jQuery對象返回。執行效率上還是原生的JavaScript創建效率高
  • 創建文本：DOM中的createTextNode()方法可以創建文本節點，jQuery中直接將文本字符串添加到元素標記字符串中即可，然后使用append()等方法將它們添加到DOM文檔樹中。執行效率上還是原生的JavaScript創建效率高
  • 創建屬性：DOM中使用setAttribute(name,value)方法可以創建屬性節點，并設置屬性節點包含的值。如果元素中存在指定的屬性，它的值將被刷新；如果不存在，則setAttribute()方法將為元素創建該屬性并賦值，jQuery中直接使用即可
  • jQuery以一種簡單的方法代替繁瑣的操作，簡化了Web開發的難度和門檻，但是由于jQuery是對JavaScript的封裝，所以執行速度并沒有得到優化，相反卻影響了代碼的執行效率。因此，在可能的情況下，建議混合使用JavaScript和jQuery方法，以提高代碼執行效率
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        // 創建元素
        var $div1 = $("<div></div>");
        // 創建文本
        var $div2 = $("<div>我是新創建的節點</div>");
        // 創建屬性
        var $div3 = $("<div title='節點'>我是新創建的節點</div>");
        $("body").append($div1);
        $("body").append($div2);
        $("body").append($div3);
    })
    </script>
    <title>創建節點</title>
</head>
<body>

</body>
</html>

2、插入節點

  • 內部插入
方法 說明
append() 向每個匹配的元素內部追加內容
appendTo() 把所有匹配的元素追加到另一個指定的元素集合中。實際上，該方法顛倒了append()的用法。例如$(A).append(B)與$(B).appendTo(A)是等價的
prepend() 向每個匹配的元素內部前置內容
prependTo() 把所有匹配的元素前置到另一個指定的元素集合中。實際上，該方法顛倒了prepend()的用法。例如$(A).prepend(B)與$(B).prependTo(A)是等價的
  • 外部插入
方法 說明
after() 在每個匹配的元素之后插入內容
before() 在每個匹配的元素之前插入內容
insertAfter() 把所有匹配的元素插入到另一個指定的元素集合后面
insertBefore() 把所有匹配的元素插入到另一個指定的元素集合前面

3、刪除節點

方法 說明
remove() 從DOM中刪除所有匹配的元素
empty() 清空元素包含的內容，不刪除當前匹配元素
detach() 將匹配的元素從DOM中分離出來 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
//        $("button").click(function () {
//            $("p").empty();
//        })
        $("p").click(function () {
            $(this).toggleClass("off");
        });
        var p;
        $("button").click(function () {
            if (p) {
                p.appendTo("body");
                p = null;
            } else {
                p = $("p").detach();
            }
        });
    })
    </script>
    <title>刪除節點</title>
    <style type="text/css">
        p {
            background: yellow;
            margin: 6px 0;
            cursor: pointer;
        }
        p.off {background: white;}
    </style>
</head>
<body>
<p>段落文本1</p>
<div>布局文本</div>
<p>段落文本2</p>
<button>清除段落文本</button>
</body>
</html>

4、復制節點

jQuery使用clone()方法復制節點，用法：clone([withDataAndEvents])、clone([withDataAndEvents], [deepWithDataAndEvents])。參數withDataAndEvents表示一個布爾值，可以是true也可以是false，用來設置是否復制事件處理函數等數據，默認是false。參數deepWithDataAndEvents也是一個布爾值，用來設置對事件處理函數和復制元素的所有子元素的數據是否應該被復制。默認情況下它的值為相匹配的第一個參數的值（默認值是false）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("b").click(function () {
            $(this).toggleClass("off");
        });
        $("b").clone(true).insertAfter("p");
    })
    </script>
    <title>復制節點</title>
    <style type="text/css">
        .off{background: yellow;}
    </style>
</head>
<body>
<b>加粗文本</b>
<p>段落文本</p>
</body>
</html>

5、替換節點

  • replaceWith()方法能夠將所有匹配的元素替換成指定的HTML或DOM元素。用法：replaceWith(newContent)、replaceWith(function)
  • replaceAll()方法能夠用匹配的元素替換掉所有指定參數匹配到的元素。用法：replaceAll(selector)
  • 上述兩種方法實際上是一對相反的操作，$(A).replaceAll($B)等價于$B.replaceWith($A) 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("button").click(function () {
//            $(this).replaceWith("<div>" + $(this).text() + "</div>");
           $("<div>" + $(this).text() + "</div>").replaceAll(this);
       });
   })
   </script>
   <title>替換節點</title>
   <style type="text/css">
       button {display: block;margin: 3px; color: red; width: 200px;}
       div {color: red; border: solid 2px blue;
           width: 200px; margin: 3px; text-align: center;}
   </style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
</body>
</html>

6、包裹元素

DOM沒有提供包裹元素的方法，jQuery定義了3種包裹元素的方法：wrap()、wrapAll()和wrapInner()

  • 外包：wrap()方法能夠在每個匹配的元素外層包上一個html元素。用法：wrap(wrappingElement)和wrap(wrappingFunction)
  • 內包：wrapInner()方法能夠在匹配元素的內容外包裹一層結構。用法：wrapInner(wrappingElement)和wrapInner(wrappingFunction)
  • 總包：wrapAll()方法能夠在所有匹配元素外包一層結構
  • 卸包：unwrap()方法與wrap()方法的功能相反，能夠將匹配元素的父級元素刪除，保留自身在原來的位置。用法：unwrap() 
   <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
//        $("a").wrap("<ul><li></li></ul>");
//        $("a").wrap("<li></li>");
//        $("body").wrapInner("<ul></ul>");
//        $("li").wrapAll("<ul></ul>"); // 效果和上邊的等效
       var i = 0, $a = $("a");
       $("button").click(function () {
           if ( i== 0) {
               $a.wrap("<li></li>");
               i = 1;
           } else  {
               $a.unwrap();
               i = 0;
           }
       })
   })
   </script>
   <title>包裹元素</title>
   <style type="text/css">
       li {border: solid 1px red; padding: 2px;}
       a {background: #FCF;}
       /*ul {border: solid 2px blue;}*/
   </style>
</head>
<body>
<a href="#">首頁</a>
<a href="#">社區</a>
<a href="#">新聞</a>
<button>包裝/卸包</button>
</body>
</html>

7、操作屬性

jQuery和DOM都提供了屬性的基本操作方法。屬性操作包括設置屬性、訪問屬性、刪除屬性和修改屬性等。

  • 設置屬性
    • prop()能夠為匹配的元素設置一個或更多的屬性。用法：prop(propertyName, value)、prop(map)、prop(propertyName, function(index, oldPropertyValue))
    • attr()也能夠為匹配的元素設置一個或更多的屬性。用法：attr(attributeName, value)、attr(map)、attr(attributeName, function(index, attr))
    • attr()和prop()方法都可以用來設置元素屬性，但在用法上還是有一些細微差別。一般使用prop()方法獲取表單屬性值。使用prop()方法的時候，返回值是標準屬性，如$('#checked').prop('disabled')，不會返回disabled或者空字符串，只會是true/false。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("input[checked='checked']").prop({
           disabled: true
       });
//        $("img").attr("src", function () {
//            return "../resource/test_image.jpeg";
//        });
       $("img").attr({"src" : "../resource/test_image.jpeg"});
   })
   </script>
   <title>操作屬性</title>
</head>
<body>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked="checked">
<img>
</body>
</html>
屬性(Attribute/Property) attr() prop()
accessKey ??
align ??
class ??
contenteditable ??
draggable ??
href ??
id ??
label ??
rel ??
src ??
tabindex ??
title ??
type ??
width(if needed over width()) ??
async ??
autofocus ??
checked ??
loaction(IE window.loaction) ??
multiple ??
readOnly ??
selected ??
  • 訪問屬性：當為prop()和attr()方法傳遞兩個參數時一般用來為指定的屬性設置值，而當為這兩個方法傳遞一個參數時，則表示讀取指定屬性的值
    • prop()方法只獲得jQuery對象中第一個匹配元素的屬性值。如果元素的一個屬性沒有設置或者沒有匹配的元素，則該方法將返回undefined值。為了獲得每個單獨的元素的屬性值，可以使用循環結構的jQuery.each()或map()方法來逐一讀取
    • 根據W3C表單規范，checked屬性是一個布爾屬性，這意味著該屬性值為布爾值，那么如果屬性沒有值，或者為空字符串值，這就為腳本中進行邏輯判斷帶來了麻煩?？紤]到不同瀏覽器對其處理結果的不同，可以采取以下方式進行檢測：
      • if(elem.checked)
      • if($(elem).prop("checked"))
      • if($(elem).is(":checked"))
      • 使用attr()進行檢測，就容易出現問題
    • attr()方法只獲取jQuery第一個匹配元素的屬性值。如果要獲取每個單獨的元素的屬性值，需要使用jQuery的each()或者map()方法做一個循環
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("#check").change(function () {
            var $input = $(this);
            $("p").html(".attr('checked') = <b>" + $input.attr('checked') + "</b><br>"
                    + ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>"
                    + ".is(':checked') = <b>" + $input.is(':checked'));
        }).change();
        $("button").click(function () {
            $(this).next().removeAttr("disabled").focus().val("可編輯文本框")
        })
    })
    </script>
    <title>訪問屬性</title>
    <style type="text/css">
        b {color: red;}
    </style>
</head>
<body>
<input type="checkbox" id="check" checked="checked">
<label for="check">復選框</label>
<button>激活文本框</button>
<input type="text" disabled="disabled" value="只讀文本框">
<p></p>
</body>
</html>
  • 刪除屬性
    • removeProp()方法主要用來刪除由prop()方法設置的屬性集
    • removeAttr()方法使用DOM原生的removeAttribute()方法，該方法的優點是能夠直接被jQuery對象訪問調用，而且具有良好的瀏覽器兼容性

8、操作類

jQuery定義了幾個與類樣式相關的操作方法。

  • 添加類樣式：addClass()方法為元素追加樣式，用法：addClass(className)、addClass(function(index, class))
  • 刪除類樣式：removeClass([className])、removeClass(function(index, class))
  • 切換類樣式：演示切換在Web開發中比較常用，如折疊、開關、伸縮及Tab切換等動態效果。jQuery使用toggleClass()方法開/關定義類樣式。用法：toggleClass(className)、toggleClass(className, switch)、toggleClass(function(incex, class), [switch])
  • 判斷類樣式：hasClass(className)方法判斷元素是否包含指定的類樣式
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("p:last").addClass("selected");
       $("p").eq(1).addClass("highlight");
       $("p:last").removeClass("selected");
       $("input").eq(0).click(function () {
           $("p:last").toggleClass("hidden");
           alert($("p:last").hasClass("hidden"));
       });

   })
   </script>
   <title>添加類樣式</title>
   <style type="text/css">
       .selected {font-weight: bold;}
       .highlight {background: yellow;}
       .hidden {display: none;}
   </style>
</head>
<body>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>舉頭望明月</p>
<p>低頭思故鄉</p>
<input type="button" value="切換樣式">
</body>
</html>

9、操作內容

jQuery提供多個方法操作文檔內容，它們把HTML結構視為字符串，并以字符串的形式進行操作

  • 讀寫HTML字符串：html()方法以字符串的形式讀寫HTML文檔結構。用法：html()、html(htmlString)、html(function(index, html))。當html()方法不包含參數時，表示以字符串形式讀取指定節點下的多有HTML結構，當該方法包含參數的時候，表示向指定節點下寫入HTML結構字符串，同時會覆蓋該節點原來包含的所有內容。注意：html()方法實際上是對DOM的innerHTML屬性包裝，因此不支持XML文檔
  • 讀寫文本：text()方法讀寫指定元素下包含的文本內容，這些文本內容主要是指文本節點包含的數據。用法：text(textString)、text(function(index, text))。當text()方法不包含參數時，表示以字符串形式讀取指定節點下的所有文本內容。當text()方法包含參數時，表示向指定節點下寫入文本字符串，同時會覆蓋該節點原來包含的所有文本內容
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
//        var s = $("div").html();
//        $("p").html(s);
       var s = $("div").text();
       $("p").text(s);
       $("input").focus(function () {
           if ($(this).val() == "請輸入文本") $(this).val("");
       });
       $("input").blur(function () {
           if ($(this).val() == "") $(this).val("請輸入文本");
       });
   })
   </script>
   <title>操作內容</title>
   <style type="text/css">
       div {border: solid 2px red;}
       p {border: solid 1px blue;}
   </style>
</head>
<body>
<div>
   <h1>標題</h1>
   <p>段落文本</p>
</div>
<form action="" method="get">
   <input type="text" value="請輸入文本">
</form>
</body>
</html>
  • 讀寫值：val()方法用來讀寫指定表單對象包含的值。當val()不包含參數并調用時，表示將讀取表單元素的值，當val()方法包含參數時，表示向指定表單元素寫入值。用法：val()、val(value)、val(function(index, value))。val()方法在讀寫單選按鈕、復選框、下拉菜單和列表框的值時，比較實用且操作速度快。對于val()方法來說，可以傳遞一個參數設置表單的顯示值。由于下拉菜單和列表框，顯示為每個選項的文本，而不是value屬性值，故通過設置選項的顯示值，可以決定應顯示的項目。對于其他表單元素來說，必須制定value值方才有效。如果為元素指定多個值，則可以以數組的形式進行參數傳遞。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("button").eq(0).click(function () {
           alert($("#s1").val() + $("#s2").val() + $("input").val() + $(":radio").val());
       });
       $("button").eq(1).click(function () {
           $("#s1").val("單選2");
           $("#s2").val(["多選2", "多選3"]);
           $("input").val(["6", "8"]);
       })
   })
   </script>
   <title>讀寫表單值</title>
</head>
<body>
<form action="" method="get">
   <select name="" id="s1">
       <option value="1" selected="selected">單選1</option>
       <option value="2">單選2</option>
   </select>
   <select name="" id="s2" size="3" multiple="multiple">
       <option value="3" selected="selected">多選1</option>
       <option value="4">多選2</option>
       <option value="5" selected="selected">多選3</option>
   </select>
   <input type="checkbox" value="6">復選框1
   <input type="checkbox" value="7" checked="checked">復選框2<br/>
   <input type="radio" value="8">單選按鈕1
   <input type="radio" value="9" checked="checked">單選按鈕2<br/><br/>
   <button>顯示各個表單對象的值</button>
   <button>設置各個表單對象的值</button>
</form>
</body>
</html>

10、操作樣式表

jQuery把所有與CSS樣式相關的操作都封裝到css()方法中。

  • 讀寫CSS樣式：CSS樣式存在三種形式：行內樣式、文檔內部樣式和文檔外部樣式。行內樣式以元素屬性的形式存在，使用style屬性即可讀寫，而文檔內部樣式和文檔外部樣式統一被視為外部樣式，這些外部樣式只能通過DOM的StyleSheets、CSS和CSS2模塊提供的對象、方法和屬性才能訪問和操作。jQuery使用css()方法讀取指定的樣式，也能夠為元素設置CSS樣式。用法：css(propertyName)、css(propertyName, value)、css(propertyName, function(index, value))、css(map)。參數map表示屬性名值對構成的對象，如：{name:value;}
    • css()方法能夠讀取指定元素的所有CSS樣式，不管它是行內樣式、文檔內部樣式還是文檔外部樣式
    • css()方法可以傳入一個字符串形式的屬性名。對于多單詞構成的屬性名，jQuery既可以解釋連字符的CSS表示法，如background-color，也可以解釋駝峰大小寫形式的DOM表示法，如backgroundColor
    • 在設置樣式屬性時，css()方法能夠接受的參數有兩種：一種是為它傳遞一個單獨的樣式屬性和值；應以重視為它傳遞一個由屬性名值對構成的映射map，用戶可以將這些jQuery映射看成是JavaScript對象直接量。
    • 如果屬性值是數字值不需要加引號，而字符串值需要加引號。但是，當使用映射表示法時，如果屬性名使用駝峰大小寫形式的DOM表示法，則可以省略引號。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("p").html("color=" + $("p").css("color") + "<br/>font-weight=" + $("p").css("font-weight"));
        $("p").css("font-style","italic");
        $("p").css({color: "blue", fontWeight: "bold"});
        $("p").css({textDecoration:"line-through"});
        $("p").click(function () {
           $(this).css({
               "fontSize": function (index, value) {
                   return parseFloat(value) * 1.2;
               }
           });
        })
    })
    </script>
    <title>讀寫CSS樣式</title>
    <style type="text/css">
        .red {color: red;}
    </style>
</head>
<body>
<p class="red" style="font-weight: bold">段落文本</p>
</body>
</html>
  • 絕對定位：在DOM中使用offsetLeft和offsetTop屬性可以獲取元素的最近偏移位置。但是不同的瀏覽器定義元素的偏移參照對象不同。例如：IE總是以父元素為參照對象進行偏移，而非IE瀏覽器會以最近非靜態定位元素為參照對象進行偏移。所有瀏覽器都支持offsetParent屬性，該屬性能夠自動識別當前元素偏移的參照對象。jQuery簡化了定位操作，使用offset()方法可以獲取匹配元素在當前視口的相對偏移。用法：offset()、offset(coordinates)、offset(function(index, coods))。參數coordinates表示一個對象，包含top和left屬性，用整數指明元素的新頂部和左邊坐標。
    • 如果調用offset()方法沒有傳遞參數，則將返回一個對象，包含兩個屬性top和left，分別存儲匹配元素的頂部偏移和左側偏移。注意，該方法僅對可見元素有效
    • offset()方法允許用戶重新設置元素的位置，這個元素的位置是相對于document對象的。如果對象原先的position樣式屬性是static(靜態定位)的話，會被改成relative(相對定位)來實現重定位。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var o1 = $("div").eq(0).offset(); // 獲取第一個div元素的偏移信息
        $("div").eq(0).html("left: " + o1.left + "<br />top: " + o1.top);
        var o2 = $("div").eq(1).offset(); // 獲取第二個div元素的偏移信息
        $("div").eq(1).html("left: " + o2.left + "<br />top: " + o2.top);
        var o3 = $("div").eq(2).offset(); // 獲取第三個div元素的偏移信息
        $("div").eq(2).html("left: " + o3.left + "<br />top: " + o3.top);
    })
    </script>
    <title>絕對定位</title>
    <style type="text/css">
        body { padding: 0; margin: 0;} /*清除頁邊距*/
        div {height: 60px; width: 200px; border: 10px solid red;}
    </style>
</head>
<body>
<div>盒子1</div>
<div style="float: left">盒子2</div>
<div style="float: left">盒子3</div>
</body>
</html>
  • 相對定位：使用JavaScript獲取指定元素的相對便宜位置設計思路：利用offsetParent屬性獲取最近的父級定位元素，然后判斷該元素的位置，如果它是父元素，則可以直接讀取當前元素的offsetLeft和offsetTop屬性值，如果不是父元素，則可以獲取當前元素的絕對偏移位置減去定位元素的絕對偏移位置，即可獲得當前元素距離定位元素的偏移距離。jQuery使用position()方法可以獲取匹配元素的相對偏移位置。用法：position()
    • position()方法的用法與offset()方法相同，都返回一個包含兩個屬性(top和left)的對象。注意：為精確計算結果，在補白、邊框和填充屬性上使用像素單位，該方法只對可見元素有效
    • 獲取匹配元素中第一個元素的當前坐標，相對于offset parent的坐標。offset parent指離鈣元素最近的而且被定位過的祖先元素。position()方法獲得該元素相對于offset parent的當前坐標。與offset()不同，offset()是獲得鈣元素相對于document的當前坐標，當把一個新元素放在同一個容器里邊另一個元素附近時，用position()最好
    • jQuery還定義了scrollTop()和scrollLeft()兩個方法分別獲取匹配元素相對滾動條頂部和左側的偏移值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function () {
          var o1 = $("div").eq(0).position(); // 獲取元素的相對偏移位置
          $("div").eq(0).html("left: " + o1.left + "<br />top: " + o1.top); // 顯示相對偏移位置
          var o2 = $("div").eq(2).position(); // 獲取第二個div元素的偏移信息
          $("div").eq(2).html("left: " + o2.left + "<br />top: " + o2.top);
      })
  </script>
  <title>相對定位</title>
  <style type="text/css">
      body { padding: 0; margin: 0;} /*清除頁邊距*/
      div {height: 60px; width: 200px; border: 10px solid red;}
  </style>
</head>
<body>
<div>盒子1</div>
<div style="position: relative; float: right; width: 300px; height: 100px; border-color: blue;">
  <div>盒子2</div>
</div>
</body>
</html>
  • 控制大?。簀Query使用width()和height()方法讀寫元素的大小。用法：width()、width(value)、width(function(index, value))、height()、height(value)、height(function(index, value))
    • width()和height()方法在沒有傳遞參數的時候，表示讀取元素的寬度和高度，返回值的單位是像素。也可以傳遞參數設置元素的寬和高，如果直接傳遞一個數值，則默認單位是像素px，也可以以字符串形式傳遞值和單位
    • 除了width()和height()方法，jQuery還定義了innerHeight()、innerWidth()、outerHeight()、outerWidth()方法，這些方法實際上是在width()和height()方法基礎上，計算了元素的邊框或補白。其中outerHeight()、outerWidth()方法能夠返回元素總寬和總高(包括寬高、補白和邊框寬度)，innerHeight()、innerWidth()方法能夠返回元素的內容寬度和高度(包括寬高和補白）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("div").html("innerHeight=" + $("div").innerHeight() + "<br/>innerWidth=" + $("div").innerWidth() + "<br/>outerHeight=" + $("div").outerHeight() + "<br/>outerWidth=" + $("div").outerWidth());
    })
    </script>
    <title>控制大小</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 50px;
            margin: 50px;
            padding: 50px;
            border: solid 50px red;}
    </style>
</head>
<body>
<div style="border: solid 10px red;">盒子</div>
</body>
</html>

11、遍歷文檔

jQuery使用children()、next()、prev()、parent()方法遍歷文檔中任何元素。其中children()方法獲取當前元素包含的所有子元素，next()方法獲取當前元素相鄰的而下一個同級元素，prev()方法獲取當前元素相鄰的上一個同級元素，parent()犯法獲取當前元素的父元素，這些方法返回值都是jQuery對象，而不是DOM集合或對象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var $body = $("body"); // 獲取body元素
        var li = $body.children().eq(2).children()[0]; //利用children()方法，遍歷到第一個li元素
        $(li).text("第一句").next().text("第二句").next().text("第三句"); // 利用next()方法，遍歷li元素，并修改每個li元素的文本內容
    })
    </script>
    <title>遍歷文檔</title>
</head>
<body>
<h1>《望岳》</h1>
<p>杜甫</p>
<ul>
    <li>岱宗夫如何，齊魯青未了。</li>
    <li>造化鐘神秀，陰陽割昏曉。</li>
    <li>蕩胸生層云，決眥入歸鳥。</li>
    <li>會當凌絕頂，一覽眾山小。</li>
</ul>

</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,401評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,011評論 3贊 413
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,263評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,543評論 1贊 307
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,323評論 6贊 404
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,874評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 42,968評論 3贊 439
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,095評論 0贊 286
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,605評論 1贊 331
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,551評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,720評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,242評論 5贊 355
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 43,961評論 3贊 345
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,358評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,612評論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,330評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,690評論 2贊 370

推薦閱讀更多精彩內容

  • 一、樣式篇 第1章 初識jQuery （1）環境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,414評論 0贊 44
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,657評論 18贊 503
  • 第一章 jQuery簡介 1-1 jQuery簡介 1.簡介 2.優勢 3.特性與工具方法 1-2 環境搭建 進入...
    mo默22閱讀 1,592評論 0贊 11
  • jQuery基礎（一）——樣式篇 1-2環境搭建 1-3 jQuery HelloWorld體驗 $(docume...
    croyance0601閱讀 1,092評論 0贊 8
  • 如果說喜歡一個人是一種病， 病去如抽絲， 喝完這瓶牛欄山小二， 我也該病愈了。
    云曉拉閱讀 224評論 1贊 0