本章內容：
1.jquery 添加 和 刪除
2.jquery添加刪除和切換類、操作類屬性
3.jquery 尺寸獲取 與遍歷
4.jquery的index()的使用
1.jquery添加和刪除
先解釋下什麼是內部結尾、內部開頭、外部之後、外部之前，以一個div爲例
如圖：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{width: 200px;height: 100px;border: 1px solid black;background: red;}
</style>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>jquery添加刪除</title>
</head>
<body>
<div><br>span<br></div>
<br>
<input class="remove" type="button" value="remove">
<input class="empty" type="button" value="empty">
<script>
$("div").append("內部結尾append")
$("div").prepend("內部開頭prepend")
$("div").after("外部之後after")
$("div").before("外部之前before")
//點擊刪除容器及子集
$(".remove").click(
function(){
$("div").remove();
}
)
//點擊清空子集，容器保留
$(".empty").click(
function(){
$("div").empty();
}
);
</script>
</body>
</html>效果圖：
2.jquery 添加 刪除和切換類、操作類屬性
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background: red;}
.border_black{border: solid 5px black;}
.txt_color{color:blue;}
</style>
</head>
<body>
<div class="txt_color">哈哈</div>
<input class="addClass" type="button" value="添加類">
<input class="removeClass" type="button" value="刪除類">
<input class="arclass" type="button" value="添加/刪除">
</body>
<script>
//添加類
$(".addClass").click(function(){
$("div").addClass("border_black")
})
//刪除類
$(".removeClass").click(function(){
$("div").removeClass("txt_color")
})
//添加沒有的，刪除有的
$(".arclass").click(function(){
$("div").toggleClass("txt_color border_black")
})
</script>
</html>
3.jquery 尺寸獲取 與遍歷
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>jquery遍歷</title>
<style>
div{width: 500px;height: 500px;border: 5px solid red;}
ul{border: 5px solid pink}
li,h1{border: 5px blue solid;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">1</a></li>
<h1><span>2</span></h1>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
//li的直接父級ul邊框變黑
$("li").parent().css("border-color","black")
//li的所有父級div和ul邊框變黑
$("li").parents().css("border-color","black")
//ul的直接子級li,h1邊框變黑
$("ul").children().css("border-color","black")
//div的跨子級li邊框變紅
$("div").find("li").css("border-color","red")
//div的所有子級ul，li，a，h1邊框變紅
$("div").find("*").css("border-color","red")
//li的下一個同胞級h1,li4邊框變黑
$("li").next().css("border-color","black")
//li的上一個同胞級li3邊框變黑
$("li").prev().css("border-color","black")
//除了h1其他同胞級邊框變黃
$("h1").siblings().css("border-color","yellow")
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{background: red;float: left;}
input{clear: both;float: left;}
</style>
</head>
<body>
<div>寬度</div>
<br>
<input class="button1" type="button" value="添加寬度">
<input class="button2" type="button" value="獲得尺寸">
<script>
$(".button1").click(function(){
$("div").append("添加寬度");
})
$(".button2").click(function(){
document.title=$("div").width()
})
</script>
</body>
</html>尺寸：
遍歷：
略
4.jquery的index()的使用
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span{background:gray;}
</style>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>index()的使用</title>
</head>
<body>
<div>
<h1>標題</h1>
<p>段落</p>
<span>文本</span>
<a href="">鏈接</a>
<span>文本</span>
<span>文本</span>
<span>文本</span>
</div>
<script>
$("span").click(function(){
document.title=$("span").index(this)
})
</script>
</body>
</html>