jQuery筆記（四）-- 操作DOM

DOM操作可分為3個(gè)方面：DOM Core(核心)宣虾、HTML DOM和CSS DOM
（1）DOM Core不屬于JavaScript語(yǔ)言范疇，任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以操作它，它的用于不限于處理網(wǎng)頁(yè)驻谆，也可以用來(lái)處理任何一種使用標(biāo)記語(yǔ)言編寫出來(lái)的文檔泥兰，如XML新啼。JavaScript中的createElement()鞋屈、getElementById()和removeAttribute()等方法都是DOM Core的組成部分范咨。
（2）HTML DOM的出現(xiàn)比DOM Core要早故觅，它提供了一些更簡(jiǎn)明的記號(hào)來(lái)描述各種HTML元素的屬性厂庇，如訪問表單document.forms等。
（3）CSS DOM主要操作CSS输吏。在JavaScript中权旷，CSS DOM主要作用是獲取和設(shè)置style對(duì)象的各種屬性。通過改變style對(duì)象的各種屬性贯溅，可以使網(wǎng)頁(yè)呈現(xiàn)出不同的效果拄氯。
jQuery作為一種JavaScript庫(kù)，繼承并優(yōu)化了JavaScript訪問DOM對(duì)象的特性它浅，是開發(fā)人員更加方便的操作DOM對(duì)象译柏。

1、創(chuàng)建節(jié)點(diǎn)

在Web開發(fā)中姐霍，要?jiǎng)?chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容鄙麦，主要操作的節(jié)點(diǎn)包括元素、屬性和文本镊折。

  • 創(chuàng)建元素：DOM中的createElement()方法能夠根據(jù)參數(shù)指定的標(biāo)簽名稱創(chuàng)建一個(gè)新的元素胯府，并返回新建元素的引用。在jQuery中恨胚，簡(jiǎn)化了DOM操作骂因，直接使用構(gòu)造函數(shù)$()創(chuàng)建元素對(duì)象。用法：$(html)赃泡，該函數(shù)能夠根據(jù)參數(shù)html所傳遞的HTML字符串寒波，創(chuàng)建一個(gè)DOM對(duì)象，并將該對(duì)象包裝為jQuery對(duì)象返回升熊。執(zhí)行效率上還是原生的JavaScript創(chuàng)建效率高
  • 創(chuàng)建文本：DOM中的createTextNode()方法可以創(chuàng)建文本節(jié)點(diǎn)俄烁，jQuery中直接將文本字符串添加到元素標(biāo)記字符串中即可，然后使用append()等方法將它們添加到DOM文檔樹中僚碎。執(zhí)行效率上還是原生的JavaScript創(chuàng)建效率高
  • 創(chuàng)建屬性：DOM中使用setAttribute(name,value)方法可以創(chuàng)建屬性節(jié)點(diǎn)猴娩，并設(shè)置屬性節(jié)點(diǎn)包含的值。如果元素中存在指定的屬性，它的值將被刷新卷中；如果不存在矛双，則setAttribute()方法將為元素創(chuàng)建該屬性并賦值，jQuery中直接使用即可
  • jQuery以一種簡(jiǎn)單的方法代替繁瑣的操作蟆豫，簡(jiǎn)化了Web開發(fā)的難度和門檻议忽，但是由于jQuery是對(duì)JavaScript的封裝，所以執(zhí)行速度并沒有得到優(yōu)化十减，相反卻影響了代碼的執(zhí)行效率栈幸。因此，在可能的情況下帮辟，建議混合使用JavaScript和jQuery方法速址，以提高代碼執(zhí)行效率
<!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 () {
        // 創(chuàng)建元素
        var $div1 = $("<div></div>");
        // 創(chuàng)建文本
        var $div2 = $("<div>我是新創(chuàng)建的節(jié)點(diǎn)</div>");
        // 創(chuàng)建屬性
        var $div3 = $("<div title='節(jié)點(diǎn)'>我是新創(chuàng)建的節(jié)點(diǎn)</div>");
        $("body").append($div1);
        $("body").append($div2);
        $("body").append($div3);
    })
    </script>
    <title>創(chuàng)建節(jié)點(diǎn)</title>
</head>
<body>

</body>
</html>

2、插入節(jié)點(diǎn)

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

3甥郑、刪除節(jié)點(diǎn)

方法 說明
remove() 從DOM中刪除所有匹配的元素
empty() 清空元素包含的內(nèi)容逃魄，不刪除當(dāng)前匹配元素
detach() 將匹配的元素從DOM中分離出來(lái) 
<!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>刪除節(jié)點(diǎn)</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、復(fù)制節(jié)點(diǎn)

jQuery使用clone()方法復(fù)制節(jié)點(diǎn)澜搅，用法：clone([withDataAndEvents])伍俘、clone([withDataAndEvents], [deepWithDataAndEvents])。參數(shù)withDataAndEvents表示一個(gè)布爾值店展，可以是true也可以是false养篓，用來(lái)設(shè)置是否復(fù)制事件處理函數(shù)等數(shù)據(jù)，默認(rèn)是false赂蕴。參數(shù)deepWithDataAndEvents也是一個(gè)布爾值柳弄，用來(lái)設(shè)置對(duì)事件處理函數(shù)和復(fù)制元素的所有子元素的數(shù)據(jù)是否應(yīng)該被復(fù)制。默認(rèn)情況下它的值為相匹配的第一個(gè)參數(shù)的值（默認(rèn)值是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>復(fù)制節(jié)點(diǎn)</title>
    <style type="text/css">
        .off{background: yellow;}
    </style>
</head>
<body>
<b>加粗文本</b>
<p>段落文本</p>
</body>
</html>

5概说、替換節(jié)點(diǎn)

  • replaceWith()方法能夠?qū)⑺衅ヅ涞脑靥鎿Q成指定的HTML或DOM元素碧注。用法：replaceWith(newContent)、replaceWith(function)
  • replaceAll()方法能夠用匹配的元素替換掉所有指定參數(shù)匹配到的元素糖赔。用法：replaceAll(selector)
  • 上述兩種方法實(shí)際上是一對(duì)相反的操作萍丐，$(A).replaceAll($B)等價(jià)于$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>替換節(jié)點(diǎn)</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()方法能夠在每個(gè)匹配的元素外層包上一個(gè)html元素基茵。用法：wrap(wrappingElement)和wrap(wrappingFunction)
  • 內(nèi)包：wrapInner()方法能夠在匹配元素的內(nèi)容外包裹一層結(jié)構(gòu)。用法：wrapInner(wrappingElement)和wrapInner(wrappingFunction)
  • 總包：wrapAll()方法能夠在所有匹配元素外包一層結(jié)構(gòu)
  • 卸包：unwrap()方法與wrap()方法的功能相反壳影，能夠?qū)⑵ヅ湓氐母讣?jí)元素刪除拱层，保留自身在原來(lái)的位置。用法：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="#">首頁(yè)</a>
<a href="#">社區(qū)</a>
<a href="#">新聞</a>
<button>包裝/卸包</button>
</body>
</html>

7宴咧、操作屬性

jQuery和DOM都提供了屬性的基本操作方法根灯。屬性操作包括設(shè)置屬性、訪問屬性掺栅、刪除屬性和修改屬性等烙肺。

  • 設(shè)置屬性
    • prop()能夠?yàn)槠ヅ涞脑卦O(shè)置一個(gè)或更多的屬性。用法：prop(propertyName, value)氧卧、prop(map)桃笙、prop(propertyName, function(index, oldPropertyValue))
    • attr()也能夠?yàn)槠ヅ涞脑卦O(shè)置一個(gè)或更多的屬性。用法：attr(attributeName, value)假抄、attr(map)怎栽、attr(attributeName, function(index, attr))
    • attr()和prop()方法都可以用來(lái)設(shè)置元素屬性，但在用法上還是有一些細(xì)微差別宿饱。一般使用prop()方法獲取表單屬性值。使用prop()方法的時(shí)候脚祟，返回值是標(biāo)準(zhǔn)屬性谬以，如$('#checked').prop('disabled')，不會(huì)返回disabled或者空字符串为黎，只會(huì)是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 ??
  • 訪問屬性：當(dāng)為prop()和attr()方法傳遞兩個(gè)參數(shù)時(shí)一般用來(lái)為指定的屬性設(shè)置值行您，而當(dāng)為這兩個(gè)方法傳遞一個(gè)參數(shù)時(shí)铭乾，則表示讀取指定屬性的值
    • prop()方法只獲得jQuery對(duì)象中第一個(gè)匹配元素的屬性值。如果元素的一個(gè)屬性沒有設(shè)置或者沒有匹配的元素娃循，則該方法將返回undefined值炕檩。為了獲得每個(gè)單獨(dú)的元素的屬性值，可以使用循環(huán)結(jié)構(gòu)的jQuery.each()或map()方法來(lái)逐一讀取
    • 根據(jù)W3C表單規(guī)范捌斧，checked屬性是一個(gè)布爾屬性笛质，這意味著該屬性值為布爾值，那么如果屬性沒有值捞蚂，或者為空字符串值妇押，這就為腳本中進(jìn)行邏輯判斷帶來(lái)了麻煩⌒昭福考慮到不同瀏覽器對(duì)其處理結(jié)果的不同敲霍，可以采取以下方式進(jìn)行檢測(cè)：
      • if(elem.checked)
      • if($(elem).prop("checked"))
      • if($(elem).is(":checked"))
      • 使用attr()進(jìn)行檢測(cè)俊马，就容易出現(xiàn)問題
    • attr()方法只獲取jQuery第一個(gè)匹配元素的屬性值。如果要獲取每個(gè)單獨(dú)的元素的屬性值肩杈，需要使用jQuery的each()或者map()方法做一個(gè)循環(huán)
<!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">復(fù)選框</label>
<button>激活文本框</button>
<input type="text" disabled="disabled" value="只讀文本框">
<p></p>
</body>
</html>
  • 刪除屬性
    • removeProp()方法主要用來(lái)刪除由prop()方法設(shè)置的屬性集
    • removeAttr()方法使用DOM原生的removeAttribute()方法潭袱，該方法的優(yōu)點(diǎn)是能夠直接被jQuery對(duì)象訪問調(diào)用，而且具有良好的瀏覽器兼容性

8锋恬、操作類

jQuery定義了幾個(gè)與類樣式相關(guān)的操作方法屯换。

  • 添加類樣式：addClass()方法為元素追加樣式，用法：addClass(className)与学、addClass(function(index, class))
  • 刪除類樣式：removeClass([className])彤悔、removeClass(function(index, class))
  • 切換類樣式：演示切換在Web開發(fā)中比較常用，如折疊索守、開關(guān)晕窑、伸縮及Tab切換等動(dòng)態(tài)效果。jQuery使用toggleClass()方法開/關(guān)定義類樣式卵佛。用法：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>低頭思故鄉(xiāng)</p>
<input type="button" value="切換樣式">
</body>
</html>

9截汪、操作內(nèi)容

jQuery提供多個(gè)方法操作文檔內(nèi)容疾牲，它們把HTML結(jié)構(gòu)視為字符串，并以字符串的形式進(jìn)行操作

  • 讀寫HTML字符串：html()方法以字符串的形式讀寫HTML文檔結(jié)構(gòu)衙解。用法：html()阳柔、html(htmlString)、html(function(index, html))蚓峦。當(dāng)html()方法不包含參數(shù)時(shí)舌剂，表示以字符串形式讀取指定節(jié)點(diǎn)下的多有HTML結(jié)構(gòu)，當(dāng)該方法包含參數(shù)的時(shí)候暑椰，表示向指定節(jié)點(diǎn)下寫入HTML結(jié)構(gòu)字符串霍转，同時(shí)會(huì)覆蓋該節(jié)點(diǎn)原來(lái)包含的所有內(nèi)容。注意：html()方法實(shí)際上是對(duì)DOM的innerHTML屬性包裝一汽，因此不支持XML文檔
  • 讀寫文本：text()方法讀寫指定元素下包含的文本內(nèi)容避消，這些文本內(nèi)容主要是指文本節(jié)點(diǎn)包含的數(shù)據(jù)。用法：text(textString)角虫、text(function(index, text))沾谓。當(dāng)text()方法不包含參數(shù)時(shí)，表示以字符串形式讀取指定節(jié)點(diǎn)下的所有文本內(nèi)容戳鹅。當(dāng)text()方法包含參數(shù)時(shí)均驶，表示向指定節(jié)點(diǎn)下寫入文本字符串，同時(shí)會(huì)覆蓋該節(jié)點(diǎn)原來(lái)包含的所有文本內(nèi)容
<!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() == "請(qǐng)輸入文本") $(this).val("");
       });
       $("input").blur(function () {
           if ($(this).val() == "") $(this).val("請(qǐng)輸入文本");
       });
   })
   </script>
   <title>操作內(nèi)容</title>
   <style type="text/css">
       div {border: solid 2px red;}
       p {border: solid 1px blue;}
   </style>
</head>
<body>
<div>
   <h1>標(biāo)題</h1>
   <p>段落文本</p>
</div>
<form action="" method="get">
   <input type="text" value="請(qǐng)輸入文本">
</form>
</body>
</html>
  • 讀寫值：val()方法用來(lái)讀寫指定表單對(duì)象包含的值枫虏。當(dāng)val()不包含參數(shù)并調(diào)用時(shí)妇穴，表示將讀取表單元素的值爬虱，當(dāng)val()方法包含參數(shù)時(shí)，表示向指定表單元素寫入值腾它。用法：val()跑筝、val(value)、val(function(index, value))瞒滴。val()方法在讀寫單選按鈕曲梗、復(fù)選框、下拉菜單和列表框的值時(shí)妓忍，比較實(shí)用且操作速度快虏两。對(duì)于val()方法來(lái)說，可以傳遞一個(gè)參數(shù)設(shè)置表單的顯示值世剖。由于下拉菜單和列表框定罢，顯示為每個(gè)選項(xiàng)的文本，而不是value屬性值旁瘫，故通過設(shè)置選項(xiàng)的顯示值祖凫，可以決定應(yīng)顯示的項(xiàng)目。對(duì)于其他表單元素來(lái)說酬凳，必須制定value值方才有效惠况。如果為元素指定多個(gè)值，則可以以數(shù)組的形式進(jìn)行參數(shù)傳遞粱年。
<!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">復(fù)選框1
   <input type="checkbox" value="7" checked="checked">復(fù)選框2<br/>
   <input type="radio" value="8">單選按鈕1
   <input type="radio" value="9" checked="checked">單選按鈕2<br/><br/>
   <button>顯示各個(gè)表單對(duì)象的值</button>
   <button>設(shè)置各個(gè)表單對(duì)象的值</button>
</form>
</body>
</html>

10售滤、操作樣式表

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

  • 讀寫CSS樣式：CSS樣式存在三種形式：行內(nèi)樣式台诗、文檔內(nèi)部樣式和文檔外部樣式。行內(nèi)樣式以元素屬性的形式存在赐俗，使用style屬性即可讀寫拉队，而文檔內(nèi)部樣式和文檔外部樣式統(tǒng)一被視為外部樣式，這些外部樣式只能通過DOM的StyleSheets阻逮、CSS和CSS2模塊提供的對(duì)象粱快、方法和屬性才能訪問和操作。jQuery使用css()方法讀取指定的樣式叔扼，也能夠?yàn)樵卦O(shè)置CSS樣式事哭。用法：css(propertyName)、css(propertyName, value)瓜富、css(propertyName, function(index, value))鳍咱、css(map)。參數(shù)map表示屬性名值對(duì)構(gòu)成的對(duì)象与柑，如：{name:value;}
    • css()方法能夠讀取指定元素的所有CSS樣式谤辜，不管它是行內(nèi)樣式蓄坏、文檔內(nèi)部樣式還是文檔外部樣式
    • css()方法可以傳入一個(gè)字符串形式的屬性名。對(duì)于多單詞構(gòu)成的屬性名丑念，jQuery既可以解釋連字符的CSS表示法涡戳，如background-color，也可以解釋駝峰大小寫形式的DOM表示法脯倚，如backgroundColor
    • 在設(shè)置樣式屬性時(shí)渔彰，css()方法能夠接受的參數(shù)有兩種：一種是為它傳遞一個(gè)單獨(dú)的樣式屬性和值；應(yīng)以重視為它傳遞一個(gè)由屬性名值對(duì)構(gòu)成的映射map推正，用戶可以將這些jQuery映射看成是JavaScript對(duì)象直接量恍涂。
    • 如果屬性值是數(shù)字值不需要加引號(hào)，而字符串值需要加引號(hào)舔稀。但是乳丰，當(dāng)使用映射表示法時(shí)，如果屬性名使用駝峰大小寫形式的DOM表示法内贮，則可以省略引號(hào)产园。
<!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>
  • 絕對(duì)定位：在DOM中使用offsetLeft和offsetTop屬性可以獲取元素的最近偏移位置。但是不同的瀏覽器定義元素的偏移參照對(duì)象不同夜郁。例如：IE總是以父元素為參照對(duì)象進(jìn)行偏移什燕，而非IE瀏覽器會(huì)以最近非靜態(tài)定位元素為參照對(duì)象進(jìn)行偏移。所有瀏覽器都支持offsetParent屬性竞端，該屬性能夠自動(dòng)識(shí)別當(dāng)前元素偏移的參照對(duì)象屎即。jQuery簡(jiǎn)化了定位操作，使用offset()方法可以獲取匹配元素在當(dāng)前視口的相對(duì)偏移事富。用法：offset()技俐、offset(coordinates)、offset(function(index, coods))统台。參數(shù)coordinates表示一個(gè)對(duì)象雕擂，包含top和left屬性，用整數(shù)指明元素的新頂部和左邊坐標(biāo)贱勃。
    • 如果調(diào)用offset()方法沒有傳遞參數(shù)井赌，則將返回一個(gè)對(duì)象，包含兩個(gè)屬性top和left贵扰，分別存儲(chǔ)匹配元素的頂部偏移和左側(cè)偏移仇穗。注意，該方法僅對(duì)可見元素有效
    • offset()方法允許用戶重新設(shè)置元素的位置戚绕，這個(gè)元素的位置是相對(duì)于document對(duì)象的纹坐。如果對(duì)象原先的position樣式屬性是static(靜態(tài)定位)的話，會(huì)被改成relative(相對(duì)定位)來(lái)實(shí)現(xiàn)重定位列肢。
<!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(); // 獲取第一個(gè)div元素的偏移信息
        $("div").eq(0).html("left: " + o1.left + "<br />top: " + o1.top);
        var o2 = $("div").eq(1).offset(); // 獲取第二個(gè)div元素的偏移信息
        $("div").eq(1).html("left: " + o2.left + "<br />top: " + o2.top);
        var o3 = $("div").eq(2).offset(); // 獲取第三個(gè)div元素的偏移信息
        $("div").eq(2).html("left: " + o3.left + "<br />top: " + o3.top);
    })
    </script>
    <title>絕對(duì)定位</title>
    <style type="text/css">
        body { padding: 0; margin: 0;} /*清除頁(yè)邊距*/
        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>
  • 相對(duì)定位：使用JavaScript獲取指定元素的相對(duì)便宜位置設(shè)計(jì)思路：利用offsetParent屬性獲取最近的父級(jí)定位元素恰画，然后判斷該元素的位置宾茂，如果它是父元素，則可以直接讀取當(dāng)前元素的offsetLeft和offsetTop屬性值拴还，如果不是父元素跨晴，則可以獲取當(dāng)前元素的絕對(duì)偏移位置減去定位元素的絕對(duì)偏移位置，即可獲得當(dāng)前元素距離定位元素的偏移距離片林。jQuery使用position()方法可以獲取匹配元素的相對(duì)偏移位置端盆。用法：position()
    • position()方法的用法與offset()方法相同，都返回一個(gè)包含兩個(gè)屬性(top和left)的對(duì)象费封。注意：為精確計(jì)算結(jié)果焕妙，在補(bǔ)白、邊框和填充屬性上使用像素單位弓摘，該方法只對(duì)可見元素有效
    • 獲取匹配元素中第一個(gè)元素的當(dāng)前坐標(biāo)焚鹊，相對(duì)于offset parent的坐標(biāo)。offset parent指離鈣元素最近的而且被定位過的祖先元素韧献。position()方法獲得該元素相對(duì)于offset parent的當(dāng)前坐標(biāo)末患。與offset()不同，offset()是獲得鈣元素相對(duì)于document的當(dāng)前坐標(biāo)锤窑，當(dāng)把一個(gè)新元素放在同一個(gè)容器里邊另一個(gè)元素附近時(shí)璧针，用position()最好
    • jQuery還定義了scrollTop()和scrollLeft()兩個(gè)方法分別獲取匹配元素相對(duì)滾動(dòng)條頂部和左側(cè)的偏移值
<!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(); // 獲取元素的相對(duì)偏移位置
          $("div").eq(0).html("left: " + o1.left + "<br />top: " + o1.top); // 顯示相對(duì)偏移位置
          var o2 = $("div").eq(2).position(); // 獲取第二個(gè)div元素的偏移信息
          $("div").eq(2).html("left: " + o2.left + "<br />top: " + o2.top);
      })
  </script>
  <title>相對(duì)定位</title>
  <style type="text/css">
      body { padding: 0; margin: 0;} /*清除頁(yè)邊距*/
      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>
  • 控制大小：jQuery使用width()和height()方法讀寫元素的大小渊啰。用法：width()探橱、width(value)、width(function(index, value))绘证、height()隧膏、height(value)、height(function(index, value))
    • width()和height()方法在沒有傳遞參數(shù)的時(shí)候嚷那，表示讀取元素的寬度和高度私植，返回值的單位是像素。也可以傳遞參數(shù)設(shè)置元素的寬和高车酣，如果直接傳遞一個(gè)數(shù)值，則默認(rèn)單位是像素px索绪，也可以以字符串形式傳遞值和單位
    • 除了width()和height()方法湖员，jQuery還定義了innerHeight()、innerWidth()瑞驱、outerHeight()娘摔、outerWidth()方法，這些方法實(shí)際上是在width()和height()方法基礎(chǔ)上唤反，計(jì)算了元素的邊框或補(bǔ)白凳寺。其中outerHeight()、outerWidth()方法能夠返回元素總寬和總高(包括寬高、補(bǔ)白和邊框?qū)挾?/strong>)改化，innerHeight()潜沦、innerWidth()方法能夠返回元素的內(nèi)容寬度和高度(包括寬高和補(bǔ)白）
<!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()方法獲取當(dāng)前元素包含的所有子元素魄眉，next()方法獲取當(dāng)前元素相鄰的而下一個(gè)同級(jí)元素，prev()方法獲取當(dāng)前元素相鄰的上一個(gè)同級(jí)元素闷袒，parent()犯法獲取當(dāng)前元素的父元素坑律，這些方法返回值都是jQuery對(duì)象，而不是DOM集合或?qū)ο蟆?/p> 

<!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()方法囊骤，遍歷到第一個(gè)li元素
        $(li).text("第一句").next().text("第二句").next().text("第三句"); // 利用next()方法晃择，遍歷li元素，并修改每個(gè)li元素的文本內(nèi)容
    })
    </script>
    <title>遍歷文檔</title>
</head>
<body>
<h1>《望岳》</h1>
<p>杜甫</p>
<ul>
    <li>岱宗夫如何淘捡，齊魯青未了藕各。</li>
    <li>造化鐘神秀，陰陽(yáng)割昏曉焦除。</li>
    <li>蕩胸生層云激况，決眥入歸鳥。</li>
    <li>會(huì)當(dāng)凌絕頂膘魄，一覽眾山小乌逐。</li>
</ul>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市创葡，隨后出現(xiàn)的幾起案子浙踢，更是在濱河造成了極大的恐慌，老刑警劉巖灿渴，帶你破解...
    沈念sama閱讀 210,978評(píng)論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件洛波，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡骚露，警方通過查閱死者的電腦和手機(jī)蹬挤，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)棘幸，“玉大人焰扳，你說我怎么就攤上這事。” “怎么了吨悍？”我有些...
    開封第一講書人閱讀 156,623評(píng)論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵扫茅，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我育瓜，道長(zhǎng)葫隙，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,324評(píng)論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任爆雹，我火速辦了婚禮停蕉，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘钙态。我一直安慰自己慧起，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布册倒。 她就那樣靜靜地躺著蚓挤，像睡著了一般。 火紅的嫁衣襯著肌膚如雪驻子。 梳的紋絲不亂的頭發(fā)上灿意，一...
    開封第一講書人閱讀 49,741評(píng)論 1贊 289
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音崇呵，去河邊找鬼缤剧。 笑死，一個(gè)胖子當(dāng)著我的面吹牛域慷，可吹牛的內(nèi)容都是我干的荒辕。 我是一名探鬼主播，決...
    沈念sama閱讀 38,892評(píng)論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼犹褒，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼抵窒！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起叠骑，我...
    開封第一講書人閱讀 37,655評(píng)論 0贊 266
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤李皇，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后宙枷，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掉房，經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年慰丛，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了圃阳。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1贊 340
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡璧帝，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出富寿，到底是詐尸還是另有隱情睬隶，我是刑警寧澤锣夹，帶...
    沈念sama閱讀 34,254評(píng)論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站苏潜，受9級(jí)特大地震影響银萍，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜恤左，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3贊 312
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一贴唇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧飞袋，春花似錦戳气、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評(píng)論 0贊 21
  • 一樁弒父案瓶您，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至纲仍，卻和暖如春呀袱，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背郑叠。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評(píng)論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工夜赵， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人乡革。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2贊 360
  • 代替公主和親
    正文 我出身青樓寇僧，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親署拟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子婉宰，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2贊 348

推薦閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識(shí)jQuery （1）環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,358評(píng)論 0贊 44
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,636評(píng)論 18贊 503
  • 第一章 jQuery簡(jiǎn)介 1-1 jQuery簡(jiǎn)介 1.簡(jiǎn)介 2.優(yōu)勢(shì) 3.特性與工具方法 1-2 環(huán)境搭建 進(jìn)入...
    mo默22閱讀 1,578評(píng)論 0贊 11
  • jQuery基礎(chǔ)（一）——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗(yàn) $(docume...
    croyance0601閱讀 1,078評(píng)論 0贊 8
  • 如果說喜歡一個(gè)人是一種病推穷， 病去如抽絲心包， 喝完這瓶牛欄山小二， 我也該病愈了馒铃。
    云曉拉閱讀 221評(píng)論 1贊 0