一，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()
- 使用
toggle()
jQuery——2：jQuery操作DOM一，DOM 基礎二，jQuery操作 DOM三，作業
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>
- 随即切換圖檔。
-
html()
text()
height()
width()
val()
css()
jQuery——2：jQuery操作DOM一，DOM 基礎二，jQuery操作 DOM三，作業
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()
-
.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版本。