溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
