jQuery中DOM操作原則實例分析

本文實例講述了jQuery中DOM操作原則。分享給大家供大家參考，具體如下：

一丶Get and Set in One(讀寫一體) 原則

為了更加易于使用，jQuery提供了簡潔的DOM操作API，其方法往往是讀寫一體的。也就是說，某個方法既可用于讀取操作，也可用于設置操作。如果沒有為其傳入表示值的參數，則表示獲取操作，將返回獲取到的數據；如果為其傳入了表示值的參數，則表示設置操作，它將設置DOM元素指定屬性的值。

示例代碼

// 沒有傳入value參數，返回第一個匹配元素的value元素
var $a = $("a");
//只會取第一個匹配的
var $color = a.css("color");
//// 傳入了value參數，設置所有匹配元素的color樣式為"red"
$a.css("color", "red");

二丶Get first Set all(讀取第一個,寫操作所有) 原則

jQuery對象幾乎所有的DOM操作方法都遵守”Get first Set all”原則。簡而言之，假設當前jQuery對象匹配多個元素，如果使用jQuery對象的方法來獲取數據(“讀”數據)，則只會獲取第一個匹配元素的數據；如果使用jQuery對象的方法來設置元素數據(“寫”數據)，則會對所有匹配元素都進行設置操作

示例代碼

var $lis = $("ul li"); // 匹配ul元素的所有后代li元素
var $className = $lis.attr("class"); // 只獲取第一個匹配的li元素的class屬性
$lis.attr("class", "left"); // 將所有匹配的li元素的class屬性設為"left"

三丶鏈式編程風格

jQuery對象的所有實例方法，在沒有特殊的返回需求的情況下，一般都會返回該jQuery對象本身(或者其它jQuery對象)，因此我們可以繼續調用返回的jQuery對象上的方法

示例代碼

$("div") // 返回一個匹配所有div元素的jQuery對象
.find("ul") // 返回匹配這些div元素中的所有后代ul元素的jQuery對象
.children() // 返回匹配這些ul元素中的所有子代元素的jQuery對象
.css("color", "red") // 為這些子代元素設置css樣式"color: red，并返回當前對象本身
.hide(); // 隱藏這些子代元素，并返回當前對象本身

四丶智能DOM操作，靜默容錯

在JS原生DOM操作中，如果通過getElementById()、getElementsByName()等方式獲取不到對應的元素，那么將返回null，在null上訪問屬性或方法，將會拋出異常。

與此不同的是，jQuery在匹配不到對應元素時將返回一個空的jQuery對象，我們仍然可以調用jQuery對象的方法，而且并不會報錯。因為jQuery會智能地處理這種情況。如果該方法用于獲取數據，則返回null或undefined；如果該方法用于設置數據，則忽略設置操作，并返回該空對象本身；如果該方法用于篩選元素，則同樣返回一個新的jQuery空對象

更多關于jQuery相關內容還可查看本站專題：《jQuery操作DOM節點方法總結》、《jQuery遍歷算法與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com