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