jQuery中DOM操作原則實例分析

更新時間：2019年08月01日 11:05:39 作者：迎著冷眼與嘲笑

這篇文章主要介紹了jQuery中DOM操作原則,結(jié)合實例形式分析了jQuery針對dom元素操作的四種常見原則,需要的朋友可以參考下

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

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

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

示例代碼

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

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

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

示例代碼

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

三丶鏈?zhǔn)骄幊田L(fēng)格

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

示例代碼

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

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

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

與此不同的是，jQuery在匹配不到對應(yīng)元素時將返回一個空的jQuery對象，我們?nèi)匀豢梢哉{(diào)用jQuery對象的方法，而且并不會報錯。因為jQuery會智能地處理這種情況。如果該方法用于獲取數(shù)據(jù)，則返回null或undefined；如果該方法用于設(shè)置數(shù)據(jù)，則忽略設(shè)置操作，并返回該空對象本身；如果該方法用于篩選元素，則同樣返回一個新的jQuery空對象

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

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

您可能感興趣的文章: