jQuery操作DOM
阿新 • • 發佈：2020-12-14
文字主要內容
-
樣式和類操作
-
節點操作
#樣式操作和類操作
作用：設定或獲取元素的樣式屬性值。
#樣式操作
1、設定樣式：
//設定單個樣式： css(屬性，值);
$("div").css("background-color","red");
//設定多個樣式： css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
2、獲取樣式：
//獲取樣式：css(屬性);
//獲取的時候如果有很多個，那麼獲取jquery物件中的第一個
alert($("div").css("width"));
舉例如下：
#類操作（className）
1、新增類樣式：
$(selector).addClass("liItem"); //為指定元素新增類className
注意：此處類名不帶點，所有類操作的方法類名都不帶點。
2、移除類樣式：
$(selector).removeClass("liItem"); //為指定元素移除類 className
$(selector).removeClass(); //不指定引數，表示移除被選中元素的所有類
3、判斷有沒有類樣式：
$(selector).hasClass("liItem"); //判斷指定元素是否包含類 className
此時，會返回true或false。jquery物件中，只要有一個帶有指定類名的就是true，所有都不帶才是false。
舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
//新增類
$("div").addClass("current");
//判斷類
alert($("div").hasClass("current"));
});
$("button").eq(1).click(function () {
//刪除類
$("div").removeClass("current");
//判斷類
alert($("div").hasClass("current"));
});
//alert($("div").hasClass("current"));//jquery物件中只要有一個帶有類名的就是true，所有都不帶才是false。
})
</script>
</head>
<body>
<button>新增</button>
<button>刪除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body