本章内容：
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>