2019-5-24 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
DOM樹(shù)
在訪問(wèn)頁(yè)面時(shí)，需要與頁(yè)面中的元素進(jìn)行交互式的操作。在操作中，元素的訪問(wèn)是最頻繁、最常用的，主要包括對(duì)元素屬性、內(nèi)容、值CSS的操作。
一、操作元素的屬性
attr() prop() 獲取或設(shè)置元素的屬性值
兩者區(qū)別：簡(jiǎn)單來(lái)說(shuō)，對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
針對(duì)屬性對(duì)象不同
prop( )是針對(duì)Dom元素屬性，attr( )針對(duì)HTML元素屬性，和attribute與property區(qū)別一樣。
用于設(shè)置的屬性值類(lèi)型不同
attr()函數(shù)操作的是文檔節(jié)點(diǎn)的屬性，因此設(shè)置的屬性值只能是字符串類(lèi)型，如果不是字符串類(lèi)型，也會(huì)調(diào)用其toString()方法，將其轉(zhuǎn)為字符串類(lèi)型。
prop()函數(shù)操作的是JS對(duì)象的屬性，因此設(shè)置的屬性值可以為包括數(shù)組和對(duì)象在內(nèi)的任意類(lèi)型。
應(yīng)用版本不同
attr()是jQuery 1.0版本就有的函數(shù)，prop()是jQuery 1.6版本新增的函數(shù)。毫無(wú)疑問(wèn)，在1.6之前，你只能使用attr()函數(shù)；1.6及以后版本，你可以根據(jù)實(shí)際需要選擇對(duì)應(yīng)的函數(shù)。
其他不同
對(duì)于表單元素的checked、selected、disabled等屬性，Attr()方法拿不到值，請(qǐng)使用prop()函數(shù)來(lái)設(shè)置或獲取checked、selected、disabled等屬性。對(duì)于其它能夠用prop()實(shí)現(xiàn)的操作，也盡量使用prop()函數(shù)。如下圖代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按鈕">
<input type="button" id="btn2" value="按鈕">
<script>
//操作元素的屬性
//attr() prop()獲取或設(shè)置元素的屬性值
$("#btn1").attr("value","按鈕1");//將#btn1的value值改為按鈕1
$("#btn1").prop("value","按鈕2");//將#btn1的value值改為按鈕2
console.log( $("input[type='button']").prop("value"));//獲取#btn1的value值,輸出為按鈕2
console.log($("#btn2").attr("value"));//獲取#btn1的value值,輸出為按鈕
//設(shè)置多個(gè)屬性值
$("input[type='button']").prop({
width:"200px",
value:"hello"
});//同時(shí)設(shè)置寬度為100px,value值為hello
//根據(jù)輸出結(jié)果，width值設(shè)置失敗，value值設(shè)置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//0
$("input[type='button']").attr({
width:"200px",
value:"HELLO"
})//同時(shí)設(shè)置寬度為200px,value值為HELLO
//根據(jù)輸出結(jié)果可以看到，width和value均設(shè)置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//200px
// var btn=$("input[type='button']");
// btn.attr("data-src","pink");
// console.log(btn.attr("data-src"));//pink
// console.log(btn.prop("data-src"));//undefined
var btn=$("input[type='button']");
btn.prop("data-src","pink");
console.log(btn.attr("data-src"));//undefined
console.log(btn.prop("data-src"));//pink
</script>
二、刪除元素的屬性
removeAttr( name ) ,其中name為元素屬性的名稱(chēng)
removeProp( name ) ,其中name為元素屬性的名稱(chēng)
三、元素內(nèi)容的操作
在JQuery中，操作元素內(nèi)容的方法包括html( )和text( )。前者與JavaScript中的innerHTML屬性類(lèi)似，即獲取或設(shè)置元素的HTML內(nèi)容；后者類(lèi)似于JavaScript中的innerText屬性，即獲取或設(shè)置元素的文本內(nèi)容。區(qū)別如下：
語(yǔ)法格式 參數(shù)說(shuō)明 功能描述
html() 無(wú)參數(shù) 用于獲取元素的HTML內(nèi)容
html(val) val參數(shù)為元素的HTML內(nèi)容 用于設(shè)置元素的HTML內(nèi)容
text() 無(wú)參數(shù) 用于獲取元素 的文本內(nèi)容
text(val) val參數(shù)為元素的文本內(nèi)容 用于設(shè)置元素的文本內(nèi)容
<script>
//js中的寫(xiě)法 innerHTML innerText
var sd=document.getElementById("block");
sd.innerText="小貓吃魚(yú)";
console.log(sd.innerHTML);//小貓吃魚(yú)
console.log(sd.innerText);//小貓吃魚(yú)
// //jquery html() text() 和js一致 獲取或設(shè)置元素的html值或文本值
console.log($("#block").html());//小貓吃魚(yú)
console.log($("#block").text());//小貓吃魚(yú)
$("#block").text("小貓抓老鼠");//修改innerText內(nèi)容
console.log($("#block").html());//小貓抓老鼠
console.log($("#block").text());//小貓抓老鼠
$("#block").html("小貓吃肉肉");//修改innerHTML內(nèi)容
console.log($("#block").html());//小貓吃肉肉
console.log($("#block").text());//小貓吃肉肉
</script>
四、操作表單元素的值
val() 獲取或設(shè)置表單元素的value值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="請(qǐng)輸入...">
<script>
console.log( $("#txt").val());// 獲取#txt的value值 輸出為：請(qǐng)輸入...
$("#txt").val("12345");//修改#txt的value值為12345
console.log( $("#txt").val());//12345
</script>
</body>
</html>
五、元素樣式的操作
1.直接設(shè)置元素樣式值
在JQuery中，通過(guò)css()方法為某個(gè)指定的元素設(shè)置樣式值，語(yǔ)法格式如下：
css(name,value) ,其中name為樣式名稱(chēng)，value為樣式的值
css()可以設(shè)置樣式也可以獲取樣式
2.增加CSS類(lèi)別
通過(guò)addClass()方法增加元素類(lèi)別的名稱(chēng)，語(yǔ)法格式如下：
addClass(class) ,其中參數(shù)class為類(lèi)名稱(chēng)，可以同時(shí)增加多個(gè)，用空格隔開(kāi)即可，如addClass(class0 class1 class2 ...)
3.刪除CSS類(lèi)別
與addClass()方法相對(duì)應(yīng)，removeClass()方法用于刪除類(lèi)別，語(yǔ)法格式與addClass()相同，如果不設(shè)定參數(shù)，則刪除元素中的所有類(lèi)名稱(chēng)
4.類(lèi)別切換
通過(guò)toggleClass()方法切換不同的元素類(lèi)別，語(yǔ)法格式如下:
toggleClass(class) ,其中參數(shù)class為類(lèi)別名稱(chēng)，其功能是當(dāng)元素中含有名稱(chēng)為class的CSS類(lèi)別時(shí)，刪除該類(lèi)別，若沒(méi)有，則增加該類(lèi)別
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按鈕</button>
<script>
$("#btn").addClass("btn1");//追加一個(gè)類(lèi)名稱(chēng)
$("#btn").addClass("btn2 btn3");//追加多個(gè)類(lèi)名稱(chēng)
$("#btn").removeClass("btn2 btn1");//移除類(lèi)名稱(chēng)
$("#btn").removeClass();//移除所有類(lèi)名稱(chēng)
$("#btn").toggleClass("btn1");//類(lèi)的切換 toggleClass() 如果有類(lèi)名稱(chēng)則替換 如果沒(méi)有就添加
</script>
</body>
</html>
六、jquery操作子父節(jié)點(diǎn)
children() 找父元素里面的子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li class="lilist">1</li>
<li class="lidata">2</li>
<span>6</span>
<li class="lilist">3</li>
<span>5</span>
<li class="lilist">4</li>
<span>7</span>
</ul>
<script>
console.log($("ul").children());//輸出ul 下的所有子節(jié)點(diǎn)
console.log($("ul").children()[0]);//輸出ul下索引為0的子節(jié)點(diǎn)
console.log($("ul>li").first());//輸出ul里面第一個(gè)li
console.log($("ul>li").last());//輸出ul里面最后一個(gè)li
console.log($("ul>li").eq(2));//eq() 根據(jù)索引找元素
console.log($("ul>li").first().siblings(".lilist"));//找同胞元素 輸出和first()相同類(lèi)名稱(chēng)的元素
console.log($("ul>li").eq(1).prev());//找當(dāng)前元素的前一個(gè)元素
console.log($("ul>li").eq(2).prevAll("span"));//當(dāng)前元素前面的所有指定元素
console.log($("ul>li").eq(2).prevAll());//當(dāng)前元素前面的所有元素
console.log($("ul>li").eq(1).next());//找當(dāng)前元素的下一個(gè)元素
console.log($("ul>li").eq(1).nextAll("li"));//當(dāng)前元素后面的所有指定元素
console.log($("ul>li").eq(1).nextAll());//當(dāng)前元素后面的所有元素
console.log($("ul>li").eq(0).is(".qq"));//is() 判斷當(dāng)前對(duì)象是誰(shuí) 輸出true or false 當(dāng)前元素與類(lèi)名稱(chēng)相符 輸出true
</script>
</body>
</html>
七、JQuery中的尺寸問(wèn)題
下面以高度為例進(jìn)行說(shuō)明
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.ss{
width: 200px;
height: 200px;
margin: 10px 10px;
padding: 20px 20px;
}
</style>
</head>
<body>
<div class="ss"></div>
<script>
console.log($(".ss").height());//200 可視區(qū)域 不包括內(nèi)外邊距
console.log($(".ss").innerHeight());//240 包括內(nèi)邊距的距離
console.log($(".ss").outerHeight());//240 包括內(nèi)邊距的距離
</script>
</body>
</html>
藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn