Fork me on GitHub

jQuery的使用

jQuery的用法

jQuery的测试页面

点击测试

jQuery简介

什么是jQuery

  • jQuery 是一个轻量级 JavaScript 库。
  • jQuery 极大地简化了 JavaScript 编程。
  • jQuery 很容易学习

jQuery特性

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

向页面中添加 jQuery

jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:

1
2
3
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

请注意,<script> 标签应该位于页面的 <head> 部分
提示:在 HTML5 中,不必在 <script> 标签中使用 type="text/javascript" 了。JavaScriptHTML5 以及所有现代浏览器中的默认脚本语言!

JQuery库的下载

有两个版本的 jQuery 可供下载:
Production version - 用于实际的网站中,已被精简和压缩。
Development version - 用于测试和开发(未压缩,是可读的代码)
这两个版本都可以从 jQuery.com 下载。

提示:您可以把下载文件放到与页面相同的目录中,这样更方便使用。

jQuery库的替代

GoogleMicrosoftjQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 GoogleMicrosoft 加载 CDN jQuery 核心文件。
使用 GoogleCDN

1
2
3
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 MicrosoftCDN

1
2
3
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>

提示:通过 Google CDN 来获得最新可用的版本:
如果您观察上什么的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery,也可以从版本字符串的末尾(比如本例 1.8)删除一个数字,谷歌会返回 1.8 系列中最新的可用版本(1.8.0、1.8.1 等等),或者也可以只剩第一个数字,那么谷歌会返回 1 系列中最新的可用版本(从 1.1.0 到 1.9.9)。

使用谷歌或微软的 jQuery,有一个很大的优势
许多用户在访问其他站点时,已经从谷歌或微软加载过jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

jQuery的维护和冲突

将jQuery函数放到单独文件中

如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

1
2
3
4
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
//var j = jQuery.noConflict(); //创建一个新的别名用以在接下来的库中使用 jQuery 对象
//j("div p").hide();
//jQuery.noConflict(); //使用 $ 作为 jQuery 别名的代码
//将$用jQuery替代
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>测试 jQuery</button>
</body>
</html>

初始化加载

1
2
3
4
$(function(){
//js或jQuerey代码
alert("有效果");
});

为了防止文档在完全加载(就绪)之前运行 jQuery 代码,你可以这么写:

1
2
3
4
5
6
//将所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
--- jQuery functions go here ----
});

如果在文档没有完全加载之前就运行函数,操作可能失败。比如说:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

HTML 元素选取

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQueryaction() 执行对元素的操作

    jQuery 元素选择器

    1
    2
    3
    4
    5
    6
    7
    $(this) //当前 HTML 元素
    $("p") //选取 <p> 元素
    $("p.intro") //选取所有 class="intro" 的 <p> 元素
    $("#intro") //选取所有 id="intro" 的元素
    $("p#demo") //选取所有 id="demo" 的 <p> 元素
    $("ul li:first") //每个 <ul> 的第一个 <li> 元素
    $("div#intro .head") //id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 属性选择器

1
2
3
4
$("[href]") //选取所有带有 href 属性的元素
$("[href='#']") //选取所有带有 href 值等于 "#" 的元素
$("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素

判断checkbox是否选中

1
2
3
4
5
6
7
8
9
10
11
12
//方法一
if ($("#checkbox-id")get(0).checked) {
// do something
}
//方法二
if($('#checkbox-id').is(':checked')) {
// do something
}
//方法三
if ($('#checkbox-id').attr('checked')) {
// do something
}

下拉框Select操作总结

点击这里

jQuery CSS 选择器

1
$("p").css("background-color","red"); //把所有 p 元素的背景颜色更改为红色(p是<p></p>)

示例

1
2
3
4
$(this).hide() //隐藏当前元素
$("p").hide() //隐藏所有段落
$(".test").hide() //隐藏所有 class="test" 的所有元素
$("#test").hide() //隐藏所有 id="test" 的元素

HTML 元素操作

获取

1
2
3
4
5
$("p").hide(); //隐藏所有的p元素
$(selector).text(); //设置或返回所选元素的文本内容:粗体文本
$(selector).html(); //设置或返回所选元素的内容(包括 HTML 标记):<b>粗体</b>文本
$(selector).val(); //设置或返回表单字段的值:value值
$(selector).attr("href");

设置内容和属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(selector).text("Hello world!"); //一般用于<span>
$(selector).html("<b>Hello world!</b>");
$(selector).val("Dolly Duck"); //一般用于得到设置value值
//它们都支持回调函数(由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值),如下:
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
//设置属性 - attr()
$(selector).attr(attribute,value); //设置/改变属性值
$(selector).attr({attribute:value,attribute1:value1...}); //设置多个属性
$(selector).attr(attribute,function(i,origValue){ return origValue + "/jquery" }); //提供回调函数
//例如:
$("#yh").attr("href","http://www.yanghuii.com");

添加/删除

1
2
3
4
5
6
7
//添加的是 HTML 内容
$(selector).append("Some text") //在被选元素的结尾插入内容
$(selector).prepend("Some text") //在被选元素的开头插入内容
$(selector).after("Some text") //在被选元素之后插入内容
$(selector).before("Some text") //在被选元素之前插入内容
$(selector).remove() //删除被选元素(及其子元素)
$(selector).empty() //从被选元素中删除子元素

节点遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(selector).parent(); //方法返回被选元素的直接父元素
$(selector).parents(); //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
$("span").parents("ul"); //返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素
$(selector).parentsUntil(selector); //介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div"); //返回介于 <span> 与 <div> 元素之间的所有祖先元素
$(selector).children(); //返回被选元素的所有直接子元素
$("div").children("p.1"); //返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
$(selector).find("*"); //返回被选元素的所有后代元素,一路向下直到最后一个后代
$("div").find("span"); //返回属于 <div> 后代的所有 <span> 元素
$(selector).siblings(); //返回被选元素的所有同胞元素
$(selector).next(); //返回被选元素的下一个同胞元素
$(selector).nextAll(); //返回被选元素的所有跟随的同胞元素
$(selector).nextUntil(selector1); //返回介于两个给定参数之间的所有跟随的同胞元素
$(selector).prev();
$(selector).prevAll();
$(selector).prevUntil();
$("div p").first(); //选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").last(); //选择最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1); //返回被选元素中带有指定索引号的元素;索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1)
$("p").filter(".intro"); //返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro"); //返回不带有类名 "intro" 的所有 <p> 元素

CSS 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//这是样式
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
$("div").addClass("important"); //向元素中添加 class 属性
$("h1,h2,p").addClass("blue"); //向不同的元素添加 class 属性
$("#div1").addClass("important blue"); //addClass() 方法中规定多个类
$("h1,h2,p").removeClass("blue"); //不同的元素中删除指定的 class 属性
$("h1,h2,p").toggleClass("blue"); //对被选元素进行添加/删除类的切换操作
$(selector).css("propertyname"); //返回指定的 CSS 属性的值
$(selector).css("propertyname","value");//设置 CSS 属性
$(selector).css({"propertyname":"value","propertyname":"value",...});//设置多个 CSS 属性
$("p").css("background-color"); //返回首个匹配元素的 background-color 值
$("p").css("background-color","yellow");//为所有匹配元素设置 background-color 值
//jQuery 尺寸
$(selector).width(); //方法设置或返回元素的宽度(不包括内边距、边框或外边距)
$(selector).height(); //方法设置或返回元素的高度(不包括内边距、边框或外边距)
$(selector).innerWidth(); //方法返回元素的宽度(包括内边距)
$(selector).innerHeight(); //方法返回元素的高度(包括内边距)
$(selector).outerWidth(); //方法返回元素的宽度(包括内边距和边框)
$(selector).outerHeight(); //方法返回元素的高度(包括内边距和边框)
$(selector).outerWidth(true); //方法返回元素的宽度(包括内边距、边框和外边距)
$(selector).outerHeight(true); //方法返回元素的高度(包括内边距、边框和外边距)
$(document).height(); //返回文档(HTML 文档)的高度
$(window).height(); //返回窗口(HTML 文档)的高度

HTML 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:

1
2
3
4
5
6
$("button").click(function() {..some code... } ); //按钮点击事件
$(document).ready(function() {..some code... } ); //将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function() {..some code... } ); //触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function() {..some code... } ); //触发或将函数绑定到被选元素的双击事件
$(selector).focus(function() {..some code... } ); //触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function() {..some code... } ); //触发或将函数绑定到被选元素的鼠标悬停事件

按钮的点击事件例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

JavaScript 特效和动画

隐藏显示

1
2
3
$(selector).hide(speed,callback); //可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
$(selector).show(speed,callback); //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(selector).toggle(speed,callback); //切换 hide() 和 show() 方法,同时支持可选的speed 和 callback

淡入淡出

1
2
3
4
$(selector).fadeIn(speed,callback); //淡入已隐藏的元素
$(selector).fadeOut(speed,callback); //淡出可见元素
$(selector).fadeToggle(speed,callback); //在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeTo(speed,opacity,callback); //允许渐变为给定的不透明度(值介于 01 之间)

滑动

1
2
3
$(selector).slideDown(speed,callback); //向下滑动元素
$(selector).slideUp(speed,callback); //向上滑动元素
$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方法之间进行切换

动画

1
$(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性;可选的 speed、callback

当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

停止动画 stop()

jQuery stop() 方法用于在动画或效果完成前对它们进行停止

1
2
3
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
$(selector).stop(stopAll,goToEnd);

方法链接

Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。”p1” 元素首先会变为红色,然后向上滑动,然后向下滑动:

1
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

按规定的速度隐藏,并执行另一个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//这里dianji函数在p消失后执行了,但是执行了2次。但是两个p几乎是同时消失的。说明在计时的同时执行了下面的语句。
//如果p已经消失了,再执行这个代码,dianji函数会立刻执行
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,dianji);
});
});
function dianji(){
alert("函数执行了");
}
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

渐变为给定的不透明度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeTo() 方法。</p>
<button>点击这里,使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
//从左往右移动400像素
$("div").animate({left:'400px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//从左往右移动了250像素,并且设置了透明度和移动后的宽度和高度
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
1
2
3
4
5
6
7
8
//定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
1
2
3
4
5
6
//把属性的动画值设置为 "show"、"hide" 或 "toggle"
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

动画的队列功能

1
2
3
4
5
6
7
8
//在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
cache: false, //cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取
async: false, //async : false,表示同步,同步会等待执行完成,直到success 执行完成!如果是true,倒是有可能先执行alert("谁先");
url: "/mall/UserServlet", //要发送到servlet的url
data: {method: "ajaxValidateVerifyCode", verifyCode: value}, //要发送到servlet的数据(ajax格式),method是方法名,后面的是属性名,属性值
type: "POST", //method为post
dataType: "json", //数据类型为json
success: function(flag) { //如果发送成功后,flag为servlet的值,resp.getWriter().print(flag);
if(!flag) {
$("#verifyCodeError").css("display", "");
$("#verifyCodeError").text("错误的验证码!");
bool = false;
}
}
});

jQuery对购物车功能的实现


上面这张图实现了

  • 全选时全部勾选,并且改变总计的价格
  • 勾掉任意一个商品,全选的勾也会被勾掉,并且总价会改变

总之一般的网上商场的购物车功能都已经实现了。
利用JQuery实现以上的功能是比较简便的。

购物车功能的实现(前端jQuery实现)

闲话不多说,先贴上上图实现的jsp代码:
list.jsp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cartlist.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script src="<c:url value='/js/round.js'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/cart/list.css'/>">
<script type="text/javascript">
$(function(){
showTotal();//计算总计
/*
给全选添加click事件
*/
$("#selectAll").click(function(){
/*
1.获取全选的状态
*/
var bool = $("#selectAll").attr("checked");
/*
2.让所有条目的复选框与全选的状态同步
*/
setItemCheckBox(bool);
/*
3.让结算按钮与全选的状态同步
*/
setJieSuan(bool);
/*
4.重新计算总计
*/
showTotal();
});
/*
给所有条目的复选框添加click事件
*/
$(":checkbox[name=checkboxBtn]").click(function(){
var all = $(":checkbox[name=checkboxBtn]").length; //所有条目的个数
var select = $(":checkbox[name=checkboxBtn][checked=true]").length; //选择所有被选中条目的个数
if(all == select){ //所有条目的个数和被勾选的一样的时候,要把全选勾上
$("#selectAll").attr("checked",true); //勾上全选按钮
setJieSuan(true); //让结算按钮有效
}else if(select == 0){ //谁都没选中
$("#selectAll").attr("checked",false); //取消全选按钮
setJieSuan(false); //让结算按钮无效
}else{
$("#selectAll").attr("checked",false);
setJieSuan(true); //让结算按钮有效
}
showTotal(); //重新计算总计,因为上面三个都要重新计算,所以放到了if else外面
});
/*
* 给减号添加click事件
*/
$(".jian").click(function(){
//获取cartItemId
var id = $(this).attr("id").substring(0,32);
//获取输入块中的数量
var quantity = $("#"+id+"Quantity").val();
//判断当前数量是否为1,如果是1,那就不是要修改数量了,而是要删除了 。
if(quantity == 1){
if(confirm("您是否真要删除该条目?")){
location = "/mall/CartItemServlet?method=batchDelete&cartItemIds="+id;
}
}else{ //这里就要发送ajax异步请求了,因为加减都要发送,所以这里干脆写成一个额外的方法了
sendUpdateQuantity(id,Number(quantity)-1);
}
});
/*
* 给加号添加click事件
*/
$(".jia").click(function(){
//获取cartItemId
var id = $(this).attr("id").substring(0,32);
//获取输入块中的数量
var quantity = $("#"+id+"Quantity").val();
//这里要将quantity改成数值
sendUpdateQuantity(id,Number(quantity)+1);
});
});
/**
* 请求服务器修改购物车条目数量,发送ajax异步请求
*/
function sendUpdateQuantity(id,quantity){
$.ajax({
async:false,
cache:false,
url:"/mall/CartItemServlet",
data:{method:"updateQuantity",cartItemId:id,quantity:quantity},
type:"POST",
dataType:"json",
success:function(result){
//1.修改数量
$("#"+id+"Quantity").val(result.quantity);
//2.修改小计
$("#"+id+"Subtotal").text(result.subtotal);
//3.重新计算总计
showTotal();
}
});
}
/*
* 计算总计
*/
function showTotal(){
var total = 0;
/*
1.获取所有被勾选的条目复选框!循环遍历之
*/
$(":checkbox[name=checkboxBtn][checked=true]").each(function(){
//2.获取复选框的值,即cartItemId(其他元素的前缀),
var id = $(this).val();
//3.再通过cartItemId(前缀)找到小计,获取其文本
var text = $("#" + id + "Subtotal").text();
//4.累加计算
total += Number(text);
});
//5.把总计显示在总计元素上;round(total,2):调用了/js/round.js的方法,保留2位小数
$("#total").text(round(total,2));
}
/*
* 统一设置所有条目的复选按钮
*/
function setItemCheckBox(bool){
$(":checkbox[name=checkboxBtn]").attr("checked",bool);
}
/*
* 设置结算按钮样式
*/
function setJieSuan(bool){
if(bool){
$("#jiesuan").removeClass("kill").addClass("jiesuan");
//这里由于之前设置过了click的事件,现在要取消,要调用下面的方法取消相应事件。
$("jiesuan").unbind("click");//撤销当前元素上所有click事件
}else{
$("#jiesuan").removeClass("jiesuan").addClass("kill");
$("#jiesuan").click(function(){return false;});
}
}
/*
* 批量删除
*/
function batchDelete(){
//1.获取所有被选中条目的复选框
//2.创建一数组,把所有被选中的复选框的值添加到数组中
//3.指定location为CartItemServlet?method=batchDelete&cartItemIds=数组的toString();
var cartItemIdArray = new Array();
$(":checkbox[name=checkboxBtn][checked=true]").each(function(){
//把复选框的值添加到数组中
cartItemIdArray.push($(this).val());
});
location = "/mall/CartItemServlet?method=batchDelete&cartItemIds="+cartItemIdArray;
}
/*
* 结算
*/
function jiesuan(){
//1.获取所有被选中条目的id,放到数组中,
var cartItemIdArray = new Array();
$(":checkbox[name=checkboxBtn][checked=true]").each(function(){
//把复选框的值添加到数组中
cartItemIdArray.push($(this).val());
});
//2.把数组的值toString(),然后赋给表单的cartItemIds这个hidden
$("#cartItemIds").val(cartItemIdArray.toString());
//把总计的值,也保存到表单中
$("#hiddenTotal").val($("#total").text());
//3.提交这个表单
$("#jieSuanForm").submit();
}
</script>
</head>
<body>
<c:choose>
<c:when test="${empty cartItemList }">
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<img align="top" src="<c:url value='/images/icon_empty.png'/>"/>
</td>
<td>
<span class="spanEmpty">您的购物车中暂时没有商品</span>
</td>
</tr>
</table>
</c:when>
<c:otherwise>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#efeae5">
<td align="left" width="50px">
<input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">全选</label>
</td>
<td colspan="2">商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<c:forEach items="${cartItemList }" var="cartItem">
<tr align="center">
<td align="left">
<input value="${cartItem.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/>
</td>
<td align="left" width="70px">
<a class="linkImage" href="<c:url value='/jsps/book/desc.jsp'/>"><img border="0" width="54" align="top" src="<c:url value='${cartItem.book.image_b }'/>"/></a>
</td>
<td align="left" width="400px">
<a href="<c:url value='/BookServlet?method=load&bid=${cartItem.book.bid }'/>"><span>${cartItem.book.bname }</span></a>
</td>
<td><span>&yen;<span class="currPrice" id="12345CurrPrice">${cartItem.book.currPrice }</span></span></td>
<td>
<a class="jian" id="${cartItem.cartItemId }Jian"></a><input class="quantity" readonly="readonly" id="${cartItem.cartItemId }Quantity" type="text" value="${cartItem.quantity }"/><a class="jia" id="${cartItem.cartItemId }Jia"></a>
</td>
<td width="100px">
<span class="price_n">&yen;<span class="subTotal" id="${cartItem.cartItemId }Subtotal">${cartItem.subtotal }</span></span>
</td>
<td>
<a href="<c:url value='/CartItemServlet?method=batchDelete&cartItemIds=${cartItem.cartItemId }'/>">删除</a>
</td>
</tr>
</c:forEach>
<tr>
<td colspan="4" class="tdBatchDelete">
<a href="javascript:batchDelete();">批量删除</a>
</td>
<td colspan="3" align="right" class="tdTotal">
<span>总计:</span><span class="price_t">&yen;<span id="total"></span></span>
</td>
</tr>
<tr>
<td colspan="7" align="right">
<a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
</td>
</tr>
</table>
<form id="jieSuanForm" action="<c:url value='/CartItemServlet'/>" method="post">
<input type="hidden" name="cartItemIds" id="cartItemIds"/>
<input type="hidden" name="total" id="hiddenTotal" value=""/>
<input type="hidden" name="method" value="loadCartItems"/>
</form>
</c:otherwise>
</c:choose>
</body>
</html>

jQuery 参考手册

点击这里

觉得本教程不够详细,可以点击这里参考

「真诚赞赏,手留余香」