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

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

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

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

示例代碼

// 沒有傳入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è),寫操作所有) 原則

jQuery對(duì)象幾乎所有的DOM操作方法都遵守”Get first Set all”原則。簡而言之，假設(shè)當(dāng)前jQuery對(duì)象匹配多個(gè)元素，如果使用jQuery對(duì)象的方法來獲取數(shù)據(jù)(“讀”數(shù)據(jù))，則只會(huì)獲取第一個(gè)匹配元素的數(shù)據(jù)；如果使用jQuery對(duì)象的方法來設(shè)置元素?cái)?shù)據(jù)(“寫”數(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í)例方法，在沒有特殊的返回需求的情況下，一般都會(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操作中，如果通過getElementById()、getElementsByName()等方式獲取不到對(duì)應(yīng)的元素，那么將返回null，在null上訪問屬性或方法，將會(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)容還可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com