快捷導(dǎo)航

jQuery中DOM操作原則實(shí)例分析

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

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

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

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

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

示例代碼

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

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

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

示例代碼

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

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

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

示例代碼

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

四丶智能DOM操作，靜默容錯(cuò)

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

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

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

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

您可能感興趣的文章: