上一篇写了jQuery的选择器和过滤器，已经能够选中元素了。接下来要做的是，操作元素，为了便于记忆，我按照查询、增加、删除、修改四种操作来写，下面进入正题。
本节知识脑图：
一、查询元素操作
解释一下：其实jQuery的选择器就属于查询操作，这里的查询操作指的是遍历。我们获取到的 jQuery 对象是个集合，里面可能包含很多个dom对象，往往需要将它们遍历，进而再操作。
1.each(回调函数)
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div>北京</div>
<div>上海</div>
<div>天津</div>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
});
</script>
</body>
</html>
运行结果：（点一下变蓝，再点一下变默认黑）
注意的是：$(“div”)集合中有三个元素，所以它调用each()函数执行里面的回调函数，调用三次回调函数，每次传入的 i 值会加1。而且 this 代表的是依次而来的 dom对象
2.find(选择器)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
var trs=$('#employees').find('tr');
for(var i=0;i<trs.length;i++){
var td=$(trs[i]).find('td:nth-child(3)');
if(td.html()=='男') {
td.html('<img src="male.png" width="20" height="20"/>');
}
else if($(td).html()=='女') {
$(td).html('<img src="female.png" width="20" height="20"/>');
}
}
});
</script>
</head>
<body>
<table id="employees" width="200" border="1">
<tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>学历</th></tr>
<tr>
<td>001</td>
<td>张三</td>
<td>女</td>
<td>29</td>
<td>大专</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
<td>30</td>
<td>中专</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>女</td>
<td>25</td>
<td>本科</td>
</tr>
</table>
</body>
</html>
运行结果就不在这里贴了，简单解释一下这段代码。入口函数里面，id选择器调用的jQuery对应的find()方法，它里面的参数是标签名，所以最终匹配到的结果集trs就是所有的tr。然后执行for循环，循环中的第一句话很有意思。它首先把trs结果集通过[i]的方式拿出单个的dom对象，再加$()转换成jQuery对象才能够调用find()方法，而这次传递的参数中有过滤器，过滤器的作用就是选择更加明确的元素，td有很多，但是加上子元素过滤器，找到了某一列，加上之前找到的某一行，实现定位到单元格的效果。之后的判断分支就很简单了，这里不做分析。
二、增加元素操作
1.append()追加内容
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").append(" <b>你好！</b>.");
$("ol").append("<li>新列表项</li>");
});
});
</script>
</head>
<body>
<button>追加</button>
<p>我想说：</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
</body>
</html>
运行结果：
2.prepend()追加内容
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>
运行结果：
注意：prepend根据单词的意思就知道它是在前面追加的意思。它通过标签选择器复制了一个节点追加到，在段落内容的前面进行追加。
3.after()、before()插入内容
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").after(" <b>你好！</b>");
$("ol").before("<li>新列表项</li>");
});
});
</script>
</head>
<body>
<button>追加</button>
<p>我想说：</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
</body>
</html>
运行结果：
注意：说一下两者的异同点：不难发现，它们都能追加内容，而且参数中都可以带标签，可以一直追加，内容会一直重复。但是，append追加的内容是在调用它的对象之内追加的，比如第一个追加之后，产生第四个列表项。但是after可不一样，它的本质是插入，看第二个代码的截图就会发现，他会追加到紧接着p标签之后和ol标签之前。
4.insertafter(选择器)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$('<p>jQuery</p>').insertAfter('.inner');
});
});
</script>
</head>
<body>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<button>插入</button>
</body>
</html>
运行结果：
注意：从代码中可以看到，insertafter()方法，是你要增加的dom节点（必须转换成jQuery对象）调用该方法，参数是选择器，选择要插到哪个元素的后面。该元素只能是某个dom节点，不能是纯文本内容。其实，除了这个区别之外，我认为它的本质和after没有区别，只是形式不同。
三、删除元素操作
1.removeAttr()删除属性
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$(this).next().removeAttr("disabled")
.focus()
.val("现在可以编辑了。");
});
});
</script>
</head>
<body>
<button>启用</button>
<input type="text" disabled="disabled" value="现在还不可以编辑" />
</body>
</html>
运行结果：
注意：这个next()方法很重要，他选择的是button按钮的下一个jQ元素。之后再调用removeAttr()删掉对应的方法。有些时候可能会出现这样的方法调用方法这种形式，其实仔细分析之后，最终的n-1个元素一定是jQ对象。
2.remove(选择器)删除HTML元素
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").remove();
$("p").text("ppp");
$("a").text("aaa");
});
});
</script>
</head>
<body>
<p>
欢迎访问 <a href="http://jquery.com/">jQuery官网</a>
</p>
<button>删除</button>
</body>
</html>
运行结果：
3.empty()方法删除HTML元素的内容和所有子元素
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").empty();
$("p").text("ppp");
$("a").text("aaa");
});
});
</script>
</head>
<body>
<p>
欢迎访问 <a href="http://jquery.com/">jQuery官网</a>
</p>
<button>删除</button>
</body>
</html>
运行结果:
注意：说一下2和3的区别，remove是把这个节点，包括它的字节点连根删掉。empty是清空调用它的元素得内容，如果说包含子元素，也将子元素节点连根删掉。
四、修改元素操作
1.修改内容
a. html()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var a = $("p").html();
alert(a);
//alert($("p").html());
$("p").html("<a href='#'>kkk</a>");
});
});
</script>
</head>
<body>
<p>请注意<a>12</a>我的变化</p>
<button type="button">请点击这里</button>
</body>
</html>
运行结果：
b. text()方法
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var a = $("p").text();
alert(a);
//alert($("p").html());
$("p").text("<a href='#'>kkk</a>");
});
});
</script>
</head>
<body>
<p>请注意<a>12</a>我的变化</p>
<button type="button">请点击这里</button>
</body>
</html>
运行结果：
c. val()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var a = $("p").val();
alert(a);
//alert($("p").html());
$("p").val("<a href='#'>kkk</a>");
});
});
</script>
</head>
<body>
<p>请注意<a>12</a>我的变化</p>
<button type="button">请点击这里</button>
</body>
</html>
运行结果：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("input:text").val(function(index,oldvalue){
alert(index);
alert($("#button").val());
return oldvalue.toUpperCase();;
});
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="abcd" /></p>
<p>Name1: <input type="text" name="user" value="avcd" /></p>
<p>Name2: <input type="text" name="user" value="avcf" /></p>
<button value="11">转换为大写</button>
</body>
</html>
运行结果：
注意：三者的区别通过代码已经很显而易见了，这里再强调一下，html()获取到的内容是文本+子元素标签+子元素内容。text()获取到的是文本+子元素文本，不会获得子元素的标签。但是他设置的内容也只能是文本类型，如果带有标签标签按照文本输出。val()获得的是input标签中value属性的值，设置的也是value的值，像button这种标签，不存在value值，于是输出了undefined。
2.修改HTML元素属性
a. attr[属性名,属性值]
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<img id="div_img" src="01.jpg">
<script>
$(document).ready(function(){
$("#div_img").click(function() {
//$("#div_img").attr("src", "02.jpg");
$("#div_img").attr({
src:"/02.jpg",
title:"hello world",
alt:"???"
});
});
});
</script>
</body>
</html>
运行结果：
attr[属性名]
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
var a = $("a").attr("href");
alert(a);
});
</script>
</head>
<body>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>
注意：这里的要是参数是一个就是获取属性值，两个就是修改属性值。
3.替换HTML元素
a. replaceWith(内容)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<button>First</button>
<button>Second</button>
<button>Third</button>
<script>
$("button").click(function () {
$(this).replaceWith( "<div>" + $(this).text() + "</div>" );
});
</script>
</body>
</html>
运行结果：
鼠标点击一个按钮这个按钮就变成了文本。注意这里的内容既然能是标签，就一定能使纯文本。
b.replaceAll()
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<p>Hello</p>
<p>World</p>
<script>$("<div>jQuery</div>").replaceAll("p");</script>
</body>
</body>
</html>
运行结果：
注意：这里要替换的内容在前，被替换的内容在后。