淘先锋技术网

首页 1 2 3 4 5 6 7

一,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>

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">&nbsp;</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()方法删除页面元素的属性节点。

在这里插入图片描述

(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>