一、操作樣式類
// 1.給標簽添加樣式類 $("選擇器").addClass("類名") // 2.移除標簽的樣式類 $("選擇器").removeClass("類名") // 3.判斷標簽是否含有某個樣式類 $("選擇器").hasClass("類名") // 4.如果標簽包含某個樣式類，就移除，否則，就添加 $("選擇器").toggleClass("類名")
<!DOCTYPE html>
<html>
<head>
<title>操作樣式類</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
}
.bacc{
background-color: red;
}
.border{
border: 1px solid black;
}
.black1{
background-color: black;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1. 添加一個樣式類
$(".div1").addClass("bacc border");
// 2. 刪除一個樣式類
$(".div1").removeClass("border"); // 移除一個類
// 3. 判斷是否包含某個樣式類
console.log($(".div1").hasClass("border")); // false
console.log($(".div1").hasClass("bacc")); // true
// 4. 切換CSS類，如果有就移除，沒有就添加
$(".div1").on("click",function() {
// body...
$(this).toggleClass("black1");
})
</script>
</body>
</html>
二、操作CSS屬性
// 1.獲取標簽CSS屬性的值 $(".div1").css("backgroundColor")l // 2.給標簽CSS屬性賦值 $(".div1").css("backgroundColor","red"); // 3.使用自定義對象 給標簽CSS屬性賦值 $(".div1").css({"backgroundColor":"green","border":"1px solid red"});
操作CSS屬性代碼：
<!DOCTYPE html>
<html>
<head>
<title>操作CSS樣式</title>
<style type="text/css">
.div1{
background-color: black;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.獲取標簽的屬性值
console.log($(".div1").css("width"));
// 2.給標簽的屬性賦值
$(".div1").css("backgroundColor","red");// 將背景顏色改為紅色
// 3.通過自定義對象同時賦多個值
$(".div1").css({"backgroundColor":"green","border":"1px solid red"});
</script>
</body>
</html>
三、標簽定位相關操作
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移 ()// 獲取匹配元素相對滾動條頂部的偏移 scrollLeft()// 獲取匹配元素相對滾動條左側的偏移
.offset()方法允許我們檢索一個元素相對於文檔（document）的當前位置。
和 .position()的差別在於： .position()是相對於相對於父級元素的位移。
示例：
<!DOCTYPE html>
<html>
<head>
<title>操作元素的位置</title>
<style type="text/css">
body{
margin: 0;
}
.div1{
background-color: red;
width: 100px;
height: 100px;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.獲取匹配元素 在當前窗口的 相對偏移或設置元素位置
console.log($("div.div1").offset()); // 相對於當前的窗口，元素的偏移量
// 2.獲取匹配元素相對父元素的偏移
console.log($("div.div1").position());// 他的父元素就是body
// 3.獲取匹配元素相對滾動條頂部的偏移
console.log($("div.div1").scrollTop());
// 4.獲取匹配元素相對滾動條左側的偏移
console.log($("div.div1").scrollLeft());
</script>
</body>
</html>
返回頂部代碼：
<!DOCTYPE html>
<html>
<head>
<title>返回頂部</title>
<style type="text/css">
.div1{
margin: 0 auto;
width: 1000px;
height: 300px;
}
.backtop{
width: 80px;
height: 80px;
text-align: center;
line-height: 50px;
font-size: 10px;
position: fixed;
bottom: 10px;
right: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button class="backtop hide">返回頂部</button>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
// body...
if ($(window).scrollTop()>100){
$(".backtop").removeClass("hide");
}else{
$(".backtop").addClass("hide");
}
})
$(".backtop").on("click",function () {
// body...
$(window).scrollTop(0);
})
</script>
</body>
</html>
四、標簽尺寸相關操作
height() // 獲取內容的寬度 width() // 獲取內同的高度 innerHeight() innerWidth() outerHeight() // 內容+ 兩邊的邊框 outerWidth()
<!DOCTYPE html>
<html>
<head>
<title>操作尺寸</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
console.log($(".div1").height());
console.log($(".div1").width());
console.log($(".div1").innerHeight());
console.log($(".div1").innerWidth());
console.log($(".div1").outerHeight()); // 內容高度 + 兩邊邊框
console.log($(".div1").outerWidth()); // 內容寬度 + 兩邊的邊框
</script>
</body>
</html>