一，DOM 基础
这里不再介绍，可以简单参考：
JavaScript——6：操作DOM
jQuery——1：jQuery基础与选择器
二，jQuery操作 DOM
前面提过jQuery操作DOM的优势，接下来开始看看jQuery提供了哪些方法来实现那些优势，我们并不需要知道jQuery特点的实现过程，只需要知道怎么找到元素以及如何操作它们——Write Less Do More.
在所有 DOM 操作中，对元素的访问是最频繁，然后就是对元素属性、内容、值、CSS的操作。
（一）元素属性操作
attr()方法获取和设置元素属性。removeAttr()方法删除某一指定属性。
1，获取元素的属性
使用$.attr( attributeName )方法获取元素的属性。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>获取元素的属性</title>
<script type="text/javascript" src="Jscript/jquery-1.10.2.min.js">
</script>
<style type="text/css">
body {
font-size: 12px;
}
div {
padding-left: 10px;
margin: auto;
}
img {
border: solid 1px #ccc;
padding: 3px;
margin: auto;
}
</style>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("#tip").html($("div img[id=img1]").attr("title")).toggle();
});
})
</script>
</head>
<body>
<div id="div1">
<img id="img1" title="这是一幅风景画" src="Images/img01.jpg" />
</div>
<br /><br />
<div id="div2">
<button type="button" id="btn1">获取图片元素title属性</button>
<br />
<div id="tip" style="display: none;"></div>
</div>
</body>
</html>
- 使用
html()方法将title属性值指定内容。 - 使用
toggle()方法实现元素隐藏和显示之间的切换。
2，设置元素的属性
使用$.attr( attributeName, value )方法设置元素的属性。
<div id="div1">
<img id="img1" />
</div>
<br /><br />
<div id="div2">
<button type="button" id="btn1">插入图元素并获取title属性</button>
<br />
<div id="tip"></div>
</div>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
var $img = $("div img[id=img1]");
$img.attr({
src: function() {
return "Images/img0" + Math.floor(Math.random() * 9 + 1) + ".jpg"
},
title: "这是一幅图片"
}); //同时设置两个属性
$("#tip").html($("div img[id=img1]").attr("src")).show(300);
});
})
</script>
3，删除元素的属性
使用$.removeAttr( attributeName )方法删除元素的属性。
<div id="div1">
<img id="img1" />
</div>
<br /><br />
<div id="div2">
<button type="button" id="btn1">插入图元素并获取src属性</button>
<br />
<div id="tip1"></div>
<br />
<button type="button" id="btn2">”删除“图元素并获取src属性</button>
</div>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
var $img = $("div img[id=img1]");
$img.attr({
src: function() {
return "Images/img0" + Math.floor(Math.random() * 8 + 1) + ".jpg"
},
title: "这是一幅图片"
}); //同时设置两个属性
$("#tip1").html($("div img[id=img1]").attr("src")).show(300);
});
$("#btn2").click(function() {
var $img = $("div img[id=img1]");
$img.removeAttr("src"); //删除src属性
});
})
</script>
（二）获取和设置元素内容与值
html()方法和text()方法获取和设置元素内容。val()方法获取和设置元素的值。
1，获取和设置元素内容
使用$.html()方法获取和设置元素的HTML内容。
使用$.text()方法获取和设置元素的文本内容。
使用$.empty()方法清空元素内容。
<div id="divShow"><b><i>Write Less Do More</i></b></div>
<div id="divHTML"></div>
<div id="divText"></div>
<div id="btndiv">
<button id="btn">移除元素内容</button>
</div>
<script type="text/javascript">
$(function() {
var strHTML = $("#divShow").html(); //获取HTML内容
var strText = $("#divShow").text(); //获取文本内容
$("#divHTML").html(strHTML); //设置HTML内容
$("#divText").text(strText); //设置文本内容
$("#btn").click(function() {
$("#divHTML").empty(); //设置HTML内容
$("#divText").empty(); //设置文本内容
});
})
</script>
2，获取和设置元素值
使用$.val()方法获取和设置元素值。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript">
/*------判断radio是否有选中，获取选中的值--------*/
$(function() {
$(":reset").click(function() {
$("*[id*=tip]").empty();
});
//使用表单选择器:radio，来选择出单选框.
$(":radio").click(function() {
//选择表单对象属性过滤选择器:checked，来选出第一组单选框中被选中的对象
var $sex = $('input:radio[name="sex"]:checked').val();
if ($sex) {
$("#tip1").html("性别 " + $sex + " 被选中!");
}
//选择表单对象属性过滤选择器:checked，来选出第二组单选框中被选中的对象
var $evaluation = $('input:radio[name="evaluation"]:checked').val();
if ($evaluation) {
$("#tip2").html("您觉得 " + $evaluation + " !");
}
});
//使用表单选择器:checkbox，来选择出多选框.
$(":checkbox").click(function() {
//选择表单对象属性过滤选择器:checked，来选出多选框中被选中的对象
var checkbox = $('input:checkbox[name="category"]:checked');
var n = checkbox.length;
var vals = [];
checkbox.each(function(index, items) {
vals.push($(this).val());
});
$("#tip3").html("有" + n + " 个被选中!" + "，值分别为：" + vals);
});
//使用普通选择器select，来选择出下拉列表.
$('select').click(function() {
//选择表单对象属性过滤选择器:selected，来选出第一多选下拉框中被选中的对象
var advantage = $('option[id="advantage"]:selected');
if (advantage) {
var n = advantage.length;
var vals = [];
advantage.each(function(index, items) {
vals.push($(this).val());
$(this).attr('selected', true);
});
$("#tip4").html("有" + n + " 个被选中!" + "，值分别为：" + vals);
}
//选择表单对象属性过滤选择器:selected，来选出第二组单选下拉框中被选中的对象
var grade = $('select option[id="grade"]:selected').val();
if (grade) {
$("#tip5").html("等级为：" + grade);
}
});
});
</script>
</head>
<body>
<form id="form1" action="#" method="post">
<input type="radio" name="sex" value="男" />
男
<input type="radio" name="sex" value="女" />
女
<br />
<span id="tip1"></span>
<br /><br />
<input type="radio" name="evaluation" value="十分满意" />
十分满意
<input type="radio" name="evaluation" value="满意" />
满意
<input type="radio" name="evaluation" value="不满意" />
不满意
<input type="radio" name="evaluation" value="非常差" />
非常差
<br />
<span id="tip2"></span>
<br /><br />
<input type="checkbox" name="category" value="战争策略类" />
战争策略类
<input type="checkbox" name="category" value="体育竞技类" />
体育竞技类
<input type="checkbox" name="category" value="动作射击类" />
动作射击类
<input type="checkbox" name="category" value="模拟经营类" />
模拟经营类
<input type="checkbox" name="category" value="棋牌休闲类" />
棋牌休闲类
<br />
<span id="tip3"></span>
<br /><br />
<select name="select1" multiple="multiple">
<option disabled="disabled">选择优点:</option>
<option id="advantage" value="背景设定很好">背景设定很好</option>
<option id="advantage" value="策略很多">策略很多</option>
<option id="advantage" value="玩法很新颖">玩法很新颖</option>
<option id="advantage" value="能和朋友开黑畅聊">能和朋友开黑畅聊</option>
<option id="advantage" value="音乐音效很好">音乐音效很好</option>
<option id="advantage" value="平衡设定不错">平衡设定不错</option>
</select>
<br />
<span id="tip4"></span>
<br /><br />
<select name="select2">
<option disabled="disabled" selected>选择等级</option>
<option id="grade" value="1">1</option>
<option id="grade" value="2">2</option>
<option id="grade" value="3">3</option>
<option id="grade" value="4">4</option>
</select>
<br />
<span id="tip5"></span>
<br /><br />
<input type="reset" id="btnReset" /><input type="submit" id="btnSubmit" />
</form>
</body>
</html>
- 前端获取表单选择框以及下拉框中被选中的值
（三）元素样式操作
对元素设置样式：
.css()方法获取和设置style样式。.addClass()方法增加元素类别的名称。.toggleClass()方法切换元素类别的名称。.removeClass()方法删除元素类别的名称。
1，获取和设置元素样式值
使用$.css()方法获取和设置元素样式值。
test.css:
div {
text-align: center;
font-size: 20px;
}
<link rel="stylesheet" href="test.css"/>
<style>
div {
background-color: #32A3CE;
width: 300px;
padding: 10px;
margin: 5px;
}
</style>
<div style="background-color:#ffff7f;">TEXT</div>
<div style="background-color:rgb(255, 212, 187);">TEXT</div>
<div style="background-color:orange;">TEXT</div>
<div style="background-color:#ff473a;">TEXT</div>
<div id="result"> </div>
<script>
$("div").click(function() {
var color = $(this).css("background-color"); //获取样式
var textAlign = $(this).css("text-align"); //获取样式
var width = $(this).css("width"); //获取样式
alert(textAlign + " " + width);
$(this).css("background-color", "#7ee0c9"); //设置样式
$(this).css({ //设置样式
"text-align": "left",
"font-size": "40px"
});
$("#result").html("That div is <span style='color:" +
color + ";'>" + color +"</span>");
});
</script>
对于直接写在元素style属性中的内联样式、写在<style>元素中的内嵌样式表、使用<link>元素或 ＠import命令导入的外部样式表， css()方法都可以获取到属性style的值。
2，增加元素CSS类别
使用$.addClass()方法增加元素类别的名称。
<style type="text/css">
body {
font-size: 15px;
text-align: center;
}
p {
padding: 5px;
width: 220px;
border: solid 1px #666;
}
.cls1 {
font-weight: bold;
font-style: italic
}
.cls2 {
color: #ff0000;
background-color: #aaff7f;
}
</style>
<p>Click Me!</p>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).addClass("cls1 cls2"); //同时新增二个样式类别
})
})
</script>
使用addClass()方法仅是追加class属性的值。如果有不同的class设定了同一样式属性，则后者覆盖前者。
3，切换元素CSS类别
使用$.toggleClass()方法切换元素类别的名称。
<style>
.cls1 {
background: #ffff00;
}
</style>
<div>Like this ins (<span>likes: 0</span>)</div>
<div>Like this ins (<span>likes: 0</span>)</div>
<script>
var count = 0;
$("div").each(function() {
var $thisDiv = $(this);
var count = 0;
$thisDiv.click(function() {
count++;
$thisDiv.find("span").text("clicks: " + count);
$thisDiv.toggleClass("cls1");
});
});
</script>
如果class属性无 cls1 ，则添加，有，则移除。
each() 方法规定为每个匹配元素规定运行的函数，实现各自的被点击次数计数。
4，删除元素CSS类别
使用$.removeClass()方法删除元素类别的名称。
实际上removeClass()方法效果与addClass()方法相反，如果说后者是追加效果，那么前者的效果就是减少。
（四）页面元素操作
1，查找节点
DOM树种允许存在多种节点，最常用的是元素节点、属性节点和文本节点。
（1）查找元素节点
利用jQuery选择器查找元素节点。
还能使用jQuery提供的方法根据节点关系获得元素节点，比如使用find()方法获取元素下所有指定子元素节点。
（2）查找属性节点
利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。
（3）查找文本节点
文本节点表示元素或属性中的文本内容。
利用jQuery选择器查找到需要的元素之后，就可以使用val()方法、text()方法、html()方法来获取元素或属性中的文本内容。
2，创建节点
常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。
（1）创建元素节点
使用jQuery的工厂函数 $() 来动态创建页面元素。
（2）创建属性节点
除了这种在创建元素的同时创建属性的方法外，还记得attr()方法吗？
（3）创建文本节点
除了这种在创建元素的同时创建文本的方法外，还记得text()方法吗？
3，插入元素节点
动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。
（1）内部追加插入
使用$.append()方法将创建好的元素追加插入到指定元素内部：已存在元素.append(新创建元素);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<style>
body {
font-size: 13px
}
ul {
padding: 0px;
list-style: none
}
ul li {
line-height: 2.0em
}
.divL {
float: left;
width: 200px;
background-color: #eee;
border: solid 1px #666;
margin: 5px;
padding: 0px 8px 0px 8px
}
.divR {
float: left;
width: 200px;
display: none;
border: solid 1px #ccc;
margin: 5px;
padding: 0px 8px 8px 8px
}
.txt {
border: #666 1px solid;
padding: 3px;
width: 120px
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 60px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, Star
}
.cls1 {
text-align: center;
padding: 5px;
margin: 5px;
background-color: #ffff7f;
}
.cls2 {
text-align: center;
padding: 5px;
margin: 5px;
background-color: rgb(255, 212, 187);
}
.cls3 {
text-align: center;
padding: 5px;
margin: 5px;
background-color: orange;
}
.cls4 {
text-align: center;
padding: 5px;
margin: 5px;
background-color: #ff473a;
}
</style>
</head>
<body>
<div class="divL">
<ul>
<li>元素名:
<select id="select1">
<option value='p'>p</option>
<option value='div'>div</option>
</select>
</li>
<li>内容为:
<input type="text" id="text1" class="txt" />
</li>
<li>属性名:
<select id="select2">
<option value='class'>class</option>
</select>
</li>
<li>属性值:
<select id="select3">
<option value='div cls1'>cls1</option>
<option value='div cls2'>cls2</option>
<option value='div cls3'>cls3</option>
<option value='div cls4'>cls4</option>
</select>
</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="创建" class="btn" />
</li>
</ul>
</div>
<div class="divR">22222222</div><br class="new"/>
<script>
$(function() {
$("#Button1").click(function() {
/*获取参数*/
var $tagName = $("#select1").val(); //获取元素名
var $content = $("#text1").val(); //获取内容
var $attributeName = $("#select2").val(); //获取属性名
var $attributeValue = $("#select3").val(); //获取属性值
var $element = $("<" + $tagName + " " + $attributeName + "='" + $attributeValue + "'>" + $content + "</" + $tagName + ">"); //创建DOM对象
$(".divR").show().append($element); //将创建好的元素追加插入到指定元素内部。
})
})
</script>
</body>
</html>
使用$.appendTo()方法将创建好的元素追加插入到指定元素内部：新创建元素.append(已存在元素);
（2）内部前置插入
使用$.prepend()方法将创建好的元素前置插入到指定元素内部：已存在元素.prepend(新创建元素);
使用$.prependTo()方法将创建好的元素前置插入到指定元素内部：(新创建元素.prependTo(已存在元素);
追加插入与前置插入的将使得新创建元素成为已存在元素的子元素。
（3）外部追加插入
使用$.after()方法将创建好的元素跟随到指定元素后面：已存在元素.after(新创建元素);
使用$.insertAfter()方法将创建好的元素跟随到指定元素后面：(新创建元素.insertAfter(已存在元素);
（4）外部前置插入
使用$.before()方法将创建好的元素插入到到指定元素前面：已存在元素.before(新创建元素);
使用$.insertBefore()方法将创建好的元素插入到到指定元素前面：(新创建元素.insertBefore(已存在元素);
（5）其他位置插入
上面的方法仅能在指定位置进行插入，通过节点关系查找元素与上面方法的组合使用，可以获得的更灵活的插入结果。
4，删除节点
（1）删除节点元素节点
使用remove()方法删除页面元素节点。
<style>
div {
background-color: #32A3CE;
width: 300px;
padding: 10px;
margin: 5px;
}
</style>
<div style="background-color:#ffff7f;">TEXT</div>
<div style="background-color:rgb(255, 212, 187);">TEXT</div>
<div style="background-color:orange;">TEXT</div>
<div style="background-color:#ff473a;">TEXT</div>
<script>
$(function() {
$("div").click(function() {
$(this).remove(); //删除页面元素节点
})
})
</script>
删除元素节点时也会删除绑定在元素上的事件。
（2）删除节点属性节点
removeAttr()方法删除页面元素的属性节点。
- 这里要注意CSS样式优先级。
（3）删除节点文本节点
empty()方法清空页面元素的文本节点。
也可以使用val()方法、text()方法、html()方法来设置元素或属性中的文本内容为空。
5，复制元素节点
使用$.clone()方法复制元素节点。
$(function() {
$("div").click(function() {
$(this).clone().insertAfter($("div:last")); //复制元素节点并插入到指定位置
});
})
此时如果你点击新插入的DIV元素，会发现它们必不会有任何效果产生，这是因为clone()方法只复制了元素本身，如果还需要复制元素上的事件，则应使用$.clone(true)。
关于操作DOM时对相应事件的处理，放在后面讲jQuery的事件中讨论。
6，替换元素节点
使用$.replaceWith()方法的将所有匹配的元素都替换成指定的HTML或者DOM元素：(被替换的元素.replaceWith(指定元素);
使用$.replaceAll()方法的用指定元素替换所有匹配的元素：(指定元素.replaceAll(被替换的元素);
$(function() {
$("div").click(function() {
var $new = $("<div>TEXT</div>");
$(this).replaceWith($new);
});
})
7，包裹元素节点
jQuery不仅可以通过方法替换元素节点， 还可以根据需求包裹某个指定的节点。
$(function() {
$("div").click(function() {
$(this).wrap("<div></div>");//用div元素包裹所选元素
});
})
8，遍历元素
使用$.each()方法实现所选中元素集合的遍历。
$(function() {
$("div").each(function(index) {
//根据形参index设置元素的title属性
this.title = "第" + (index + 1) + "个div块";
})
})
each()方法就是jQuery隐式迭代的体现，前面“获取和设置元素值”中就用到它来提取元素集合中的元素值。
三，作业
实现一个类某宝购物车结算页面：
实际上，为了减小后台服务器的运行压力，通常会在前端对数据进行简单处理后再将数据进行提交。
下面是一个购物车结算页面的简化版本，基本功能都已经实现：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据管理</title>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
</script>
<style type="text/css">
table {
width: 400px;
border-collapse: collapse
}
table tr th,td {
border: solid 1px #666;
text-align: center
}
table tr td img {
border: solid 1px #ccc;
padding: 3px;
width: 42px;
height: 60px;
cursor: hand
}
table tr td span {
padding-left: 12px;
color: orange;
}
table tr th {
background-color: #b5ccca;
height: 32px
}
table[1] tr td {
text-align:left;
height:28px;
font-size:20px
}
.clsImg {
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 85px;
height: 120px;
background-color: #eee;
display: none
}
</style>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
totle();
/** 全选复选框单击事件 **/
$("#chkAll").click(function() {
if (this.checked) { //如果自己被选中
$("table tr td input[type=checkbox]").attr("checked", true);
} else { //如果自己没有被选中
$("table tr td input[type=checkbox]").attr("checked", false);
}
});
/**删除按钮单击事件**/
$("#btnDel").click(function() {
var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项
if (intL != 0) { //如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) { //遍历除全选复选框外的行
if (this.checked) { //如果选中
$("table tr[id=" + this.value+ "]").remove(); //获取选中的值，并删除该值所在的行
}
});
}
totle();
});
/**小图片鼠标移动事件**/
var x = 5;
var y = 15; //初始化提示图片位置
$("table tr td img").mousemove(function(e) {
$("#imgTip")
.attr("src", this.src) //设置提示图片scr属性
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}) //设置提示图片的位置
.show(); //显示图片
}).mouseout(function() {
$("#imgTip").hide(); //隐藏图片
});
/** 减少数量 **/
$('input[id=min]').click(function() {
numberOption($(this), 'min');
});
/** 增加数量 **/
$('input[id=add]').click(function() {
numberOption($(this), 'add');
});
/** 数量变化操作 **/
function numberOption(obj, tag) {
var $number = obj.parent().find('input[id=number]');
var number = $number.val();
if (tag == 'add') {
number++;
}
if (tag == 'min') {
number--;
if (number < 0) {
number = 0;
}
}
$number.val(Math.abs(parseInt(number)));
totle();
}
/** 统计操作 **/
function totle() {
var $tr = $("tr[id*=tr_]");
var summer = 0;
var totalNumber = 0;
$tr.each(function(i, dom) {
var num = $(dom).children("#td_4").find("input[id=number]").val(); //单品数量
totalNumber += Number(num); //总量
var price = num * $(dom).children("#td_3").text(); //商品小计
$(dom).children("#td_5").html(price.toFixed(2)); //显示商品小计
summer += price; //总价
});
$("#cntNmb").text(totalNumber);
$("#cntPrc").text(summer.toFixed(2));
}
})
</script>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<th>选项</th>
<th>封面</th>
<th>商品名</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr id="tr_1">
<td id="td_0"><input id="Checkbox1" type="checkbox" value="tr_1" /></td>
<td id="td_1"><img src="Images/img03.jpg" name="commodityImg" alt="" /></td>
<td id="td_2" name="commodityName">书籍一</td>
<td id="td_3" name="commodityPrice" value="11.11">11.11</td>
<td id="td_4" name="commodityNmb">
<input id="min" type="button" value="-" />
<input id="number" name="number" type="text" value="1" style="width:30px;text-align: center" />
<input id="add" type="button" value="+" />
</td>
<td id="td_5" name="commoditySngPrc" value="0"></td>
</tr>
<tr id="tr_2">
<td id="td_0"><input id="Checkbox1" type="checkbox" value="tr_2" /></td>
<td id="td_1"><img src="Images/img04.jpg" name="commodityImg" alt="" /></td>
<td id="td_2" name="commodityName">书籍二</td>
<td id="td_3" name="commodityPrice" value="33.33">33.33</td>
<td id="td_4" name="commodityNmb">
<input id="min" type="button" value="-" />
<input id="number" name="number" type="text" value="1" style="width:30px;text-align: center" />
<input id="add" type="button" value="+" />
</td>
<td id="td_5" name="commoditySngPrc" value="0"></td>
</tr>
</table>
<table>
<tr>
<td>
<span><input id="chkAll" type="checkbox" />全选</span>
<span><input id="btnDel" type="button" class="btn" value="删除" /></span>
</td>
<td>
共计<span id="cntNmb"></span> 件商品<br />
共计<span id="cntPrc"></span> 元
</td>
<td>
<button type="submit">结算</button>
</td>
</tr>
</table>
</form>
<img id="imgTip" class="clsImg" />
</body>
</html>
- 定位元素是执行后续操作的基础，可使用jQuery选择器或者相对位置关系来获取元素。
- 理解
each()方法的使用才能更方便地获取和设置某一类元素的值、属性等内容。 - 注意jQuery版本升级影响函数或方法的使用。这里用了比较老的1.8.2版本。