JQuery 介绍
- JQuery由美国人John Resig（约翰 莱西格）于2006年创建
- JQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less ， do more
- 实现隔行变色，JavaScript要循环加判断，而JQuery只需要一句关键代码
$("tr:even").css("background-color"),"#ccc");
JQuery能做什么
- 访问和操作DOM元素
- 控制页面样式
- 对页面时间进行处理
- 扩展新的JQuery插件
- 与Ajax技术完美结合
JQuery能做到的JavaScript也都能做到，但使用JQuery能大幅度提高开发效率
其实，JQuery和JavaScript之间的关系，可以理解为“成语” 和“白话文”之间的关系。成语是对白话文的高度压缩，而JQuery也是对JavaScript的高度压缩库
JQuery的优势
- 体积小，，压缩后只有100kb左右
- 强大 的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
JQuery下载
进入JQuery官网：http://jQuery.com
JQuery的使用
jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可
<script src = "js/jquery-3.4.1.min.js"></script>
基本语法介绍
<script>
$(selector).action();
</script>
说明：
- 工厂函数 $():将DOM对象转化为jQuery对象
- 选择器selector：获取需要操作的DOM元素（用法基本与CSS一致）
- 方法action():jQuery中提供的方法，其中包括绑定事件处理的方法"$"等同于“JQuery”
- 例如：
<body>
<p>hello</p>
<body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
alter( $("p").text() );
</script>
jQuery对象与DOM对象
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
$("title").html();
//等同于
documet.getElementById("title").innerHTML;
想混用，要转换
- DOM对象转JQuery对象
var a = document.getElementById("name"); //a是DOM对象
var b = $(a); //b是jQuery对象
- JQuery对转DOM对象
var a = $("#name"); //a是JQuery对象
var b = jqObject.get(0) ; //b是DOM对象
选择器
基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
层次选择器
<!Doctype html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<title>Document</title>
</html>
<body>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h3>
<h3>333</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#x p").css("color","red"); //后代选择器，忽略层级
$("#x>p").css("color","red"); //子代选择器，只负责子级
$("#x+h3").css("color","red"); //相邻选择器，下一个紧邻兄弟h3
$("#x~h3").css("color","red"); //同辈选择器，下面的所有兄弟h3
</script>
</body>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">hhh</p>
<p href="x" title="x">hhh2</p>
<script src="./jquery-3.4.1.min.js"></script>
<script>
// $("[href]").css("color","red"); //选取拥有href属性的元素
//$("[href='x']").css("color","red"); //选取拥有href = x属性的元素
// $("[href!='x']").css("color","red"); //选取拥有href 不等于 x属性的元素
// $(a"[href!='x']").css("color","red"); //选取a标签中href 不等于 x属性的元素
// $("[href ^= 'www']").css("color","red"); //选取拥有href属性以www开头的元素
// $("[href $= 'com']").css("color","red"); //选取拥有href属性以com结尾的元素
// $("[href *= 'a']").css("color","red"); //选取拥有href 属性包含a的元素
$("p[href][title='x']").css("color","red"); //选取拥有href属性 和 title属性，并且title=x的p元素
</script>
</body>
</html>
过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="jquery-3.4.1.min.js"></script>
<script>
// $("li:first").css("color","red"); //第一个li
// $("li:last").css("color","red"); //最后一个li
// $("li:even").css("color","red"); //偶数行li
// $("li:odd").css("color","red"); //奇数行li
// $("li:eq(2)").css("color","red"); //下标为2的li
// $("li:gt(1)").css("color","red"); //下标大于1的li
$("li:lt(2)").css("color","red"); //下标小于2的li
</script>
</body>
</html>
事件
鼠标事件
鼠标事件是当用于在文档上移动或单击鼠标时而产生的事件，常用的鼠标事件有：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="img/pic_four.png" width="300" />
<img src="img/pic_four.png" width="300" />
<img src="img/pic_four.png" width="300" />
<script src="jquery-3.4.1.min.js"></script>
<script>
$("img").click(function(){
//点击一下换照片
$(this).attr("src","img/pic_five.png"); //this就是事件触发的源头
});
$("img").mouseover(function(){
$(this).css("border","2px solid red"); //移动到元素上
});
$("img").mouseout(function(){
$(this).css("border","2px solid white"); //离开元素
});
</script>
</body>
</html>
键盘事件
用户每次按下或释放键盘上的键时都会发生事件，常用的键盘事件有：
表单事件
当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：
| 方法 | 描述 |
|---|---|
| focus() | 触发或将函数绑定到指定元素的focus事件 |
| blur() | 触发或将函数绑定到指定元素的blur事件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<p>账号：<input id = "a" value="请输入账号..."></p>
<p>电话：<input id = "b"></p>
</form>
<script src="./jquery.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->
<script>
// 获得焦点（激活/点击一下)
$("#a").focus(function(){
$(this).val("");
});
// 失去焦点（未激活/未点击）
$("#a").blur(function(){
$(this).val("请输入账号...");
});
</script>
</body>
</html>
鼠标悬停复合事件
hover()方法相当于mouseover与mouseout事件的组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./images/1.jpg" width="400px" height="300px">
<script src="./jquery.min.js"></script>
<script>
$("img").hover(
function(){
$(this).css("border","5px solid red");
},
function(){
$(this).css("border","5px solid white");
}
);
</script>
</body>
</html>
连续点击复合事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
$("h2").click(function(){
$("ul").toggle();
});
</script>
</body>
</html>
事件的动态绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>点我试试</h2>
<script src="./jquery.min.js"></script>
<script>
$("h2").on("click mouseover",function(){
alert("点我或移动上来");
})
</script>
</body>
</html>
元素的隐藏和显示
改变元素的宽和高（带动画效果）
- show(speed)
- hide(speed)
- toggle(speed)等价于show + hide :显示的隐藏，隐藏的显示
可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”或毫秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1"> 显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
<script src="jquery.min.js"></script>
<script>
// fast：快速的
// slow：缓慢的
// 毫秒：自定义
$("#btn2").click(function(){
$("div").hide('fast');
});
$("#btn1").click(function(){
$("div").show('slow');
});
$("#btn3").click(function(){
$("div").toggle('slow');
});
</script>
</body>
</html>
改变元素的高（拉伸效果）
- slideDown(speed)
- slideUp(speed)
- slideToggle(speed)等价于slideDown + slideUp
可选的speed参数规定隐藏/显示的速度，可以取以下值:“slow” 、 “fast”或毫秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1"> 显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
<script src="jquery.min.js"></script>
<script>
$("#btn2").click(function(){
$("div").slideUp('fast');
});
$("#btn1").click(function(){
$("div").slideDown('slow');
});
$("#btn3").click(function(){
$("div").slidetoggle('slow');
});
</script>
</body>
</html>
不改变元素的大小（淡入淡出效果）
- fadeIn（speed）显示
- fadeOut（speed）隐藏
- fadeToggle(speed)等价于fadeIn+fadeOut动画
- fadeTo(speed，透明度)方法允许渐变为给定的不透明度（值介于0与1之间）
可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1"> 显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<button id="btn4">透明</button>
<div></div>
<script src="jquery.min.js"></script>
<script>
$("#btn2").click(function(){
$("div").fadeOut('fast');
});
$("#btn1").click(function(){
$("div").fadeIn('slow');
});
$("#btn3").click(function(){
$("div").fadeToggle('slow');
});
$("#btn4").click(function(){
$("div").fadeTo(1000,0.5);
});
</script>
</body>
</html>
链
链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起。
例如：点击一次按钮，让div完成4个指定动作。
1.背景变红
2.字体变绿
3.收缩
4.拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background-color: black;
color: white;
font-size: 3em;
}
</style>
<body>
<button>试试</button>
<div>hello</div>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
$("div").css("background-color","red").css("color","green").slideUp(1000).slideDown(1000);
});
</script>
</body>
</html>
DOM 和 CSS的操作
属性函数
- attr(“属性”); 获得元素的属性值
attr(“属性”,“新值”); 修改元素的属性值
attr(样式参数) ：样式参数可以写成json格式 - val(); 获得表单元素中的value值
val(“x”)修改表单元素中的value值 - html();获得元素中的内容（标签+文本）
html(“x”)修改元素中的内容(标签+文本) - text();获得元素中的文本
text(“x”)修改元素中的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>试试</button>
<hr>
<input id="username">
<div>
<h1><i>11111</i></h1>
</div>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// alert($("input").val()); //input框中的值
// $("input").val("哈哈哈哈"); //修改input框中的值
// alert($("div").html()); //获得div中的内容（包含标签信息）
// alert($("div").text());//获得div中的内容（不包含标签信息，只包含文本）
// $("div").text("祖国万岁"); //修改div中的内容（全部内容都覆盖）
});
</script>
</body>
</html>
样式函数
- css(“属性”);获得该属性值
- css(“属性”,“值”);设置属性的值
- css({json});设置多个属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// var w = $("div").css("width"); //获得css属性，width的值
// alert(w);
// 1.一个键值对
// $("div").css("background-color","pink");
// 2.链式编程
// $("div").css("background-color","pink").css("border-radius","50%");
// 3.json为参数
$("div").css({
opacity:"0.4",
background:"orange",
borderRadius:"50%"
});
});
</script>
</body>
</html>
- width();获得元素的宽度
- height();获得元素的高度
- height(number);修改元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
var w = $("div").width();//（无参）获取宽度
var h = $("div").height();//（无参）获取高度
// alert("宽："+w+"px,高："+h+"px")
$("div").width("300");//（传参）修改宽度
$("div").height("300");//（传参）修改高度
});
</script>
</body>
</html>
类样式函数
- addClass();为元素添加类样式
- removeClass();将元素的类样式移除
- toggleClass();样式的切换（有->无，无->有）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
background-color: #000;
}
.a{
background-color: palevioletred;
border-radius: 50%;
}
.b{
border: 5px dashed darkcyan;
opacity: 0.6;
}
.cn{
background-color: #000;
color: #fff;
font-family: 楷书;
}
</style>
<body>
<button id="bnt1">试试</button>
<button id="bnt2">取消透明度</button>
<button id="bnt3">样式切换</button>
<hr>
<div></div>
<h1>哈哈哈</h1>
<script src="jquery.min.js"></script>
<script>
$("#bnt1").click(function(){
// $("div").addClass("a");
$("div").addClass("a b");
});
$("#bnt2").click(function(){
$("div").removeClass("b");
});
$("#bnt3").click(function(){
$("h1").toggleClass("cn");
});
</script>
</body>
</html>
节点操作
-
创建节点
工厂函数$()用于获取或创建节点 -
插入节点
插入子节点
-
插入同辈节点
- 替换节点
replaceWith()
replaceAll() - 复制节点
clone() - 删除节点
remove()删除整个节点
empty()清空节点内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<input id="text"><button id = "add">添加</button>
<ul>
<li onlick='aaa()'>三国演义</li>
<li>红楼梦</li>
<li>西游记</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$("#add").click(function(){
console.log("aaa");
var bookname = $("#text").val();
var newli = $("<li>" + bookname +"</li>");//通过工厂函数，创建新的li节点
// 添加子节点
// $("ul").append(newli); //newli添加到ul后面
// newli.appendTo("ul"); //newli添加到ul后面
// $("ul").prepend(newli); //newli添加到ul前面
// newli.prependTo("ul");//newli添加到ul前面
// 添加同辈节点
// $("li:last").after(newli);//newli添加到最后的li后面
// newli.insertAfter("li:last");
// $("li:last").before(newli); //newli添加到最后的li的前面
// newli.insertBefore("li:last");
// 替换节点
// $("li:eq(0)").replaceWith(newli); //将第一个li替换为newli
// newli.replaceAll("li:eq(0)");
// 复制节点
// $("li:first").clone().insertAfter("li:last");//复制第一个li，并插入到最后一个li后面
// 删除节点
// $("li:eq(0)").empty();//清空节点上的文本(节点并没有消失)
$("li:eq(1)").remove(); //删除节点
});
</script>
</body>
</html>
遍历节点
祖先元素
用于向上遍历DOM树的方法
- parent()返回被选元素的直接父元素，仅仅是上一级
- parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><button>测试</button></p>
<ul>
<li>a</li>
<li><b>b</b></li>
<li>c</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// var x = $("b").parent().html();
// var x = $("b").parents("ul").html();
var x = $("b").parents("body").html();
alert(x);
});
</script>
</body>
</html>
同辈元素
- next()获取紧邻匹配元素之后的元素
- prev()获取紧邻匹配元素之前的元素
- siblings()获取位于匹配元素前面和后面的所有同辈元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>测试</button>
<p>p1</p>
<ul>
<li>a</li>
<li><b>b</b></li>
<li>c</li>
</ul>
<p>p2</p>
<p id = "x">p3</p>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// var x = $("ul").next().text(); //紧邻的下一个元素
// var x = $("ul").prev().text(); //紧邻的上一个元素
// var x = $("ul").siblings("#x").text();//所有的兄弟中，ID= x的
var arr = $("ul").siblings();
for(var i = 0 ; i < arr.length;i++){
alert(arr[i]);
}
alert(x);
});
</script>
</body>
</html>
后代元素
后代是子、孙、曾孙等等
- children()方法返回被选元素的所有直接子元素，“孩子”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>测试</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// var x = $("ul").children().text();
var x = $("ul").children("li:first").text();
alert(x);
});
</script>
</body>
</html>
- find（选择器）方法返回被选元素的后代元素，一路向下知道最后一个后代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>测试</button>
<ul>
<li>a</li>
<li>b</li>
<li>c
<p>d</p>
</li>
<h3>e</h3>
</ul>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// var x = $("ul").find("p").text();
// var x = $("ul").find("h3").text();
var x = $("ul").find().text();
alert(x);
});
</script>
</body>
</html>
元素的过滤
- first():过滤第一个元素
- last():过滤最后一个元素
- eq(index):过滤到下标为index的元素
- not():除了什么之外的元素
- is():返回布尔，判断是不是这种元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>测试</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
// var x = $("li").first().text();//第一个li
// var x = $("li").last().text();//最后一个li
// var x = $("li").eq(1).text();//下标为1的li
// var x = $("li").not("li:eq(1)").text();//除了下标为1的其余所有li
var x = $("li").parent().is("ul"); //返回布尔型，li的父节点是不是ul
alert(x);
});
</script>
</body>
</html>
案例：手风琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
dd{
display: none;
}
</style>
<body>
<nav>
<ul>
<li>
<dl>
<dt>求职</dt>
<dd>1.简历</dd>
<dd>2.面试</dd>
<dd>3.入职</dd>
</dl>
</li>
<li>
<dl>
<dt>教育</dt>
<dd>1.看视频</dd>
<dd>2.做作业</dd>
<dd>3.24小时在线辅导</dd>
</dl>
</li>
<li>
<dl>
<dt>3W创业</dt>
<dd>1.帮助小企业</dd>
<dd>2.头脑风暴</dd>
<dd>3.赚钱啦</dd>
</dl>
</li>
</ul>
</nav>
<script src="jquery.min.js"></script>
<script>
$("nav dt").click(function(){
$("dd").not($(this).siblings()).slideUp(500);
$(this).siblings().slideToggle(500);
});
</script>
</body>
</html>
购物车结算
$(".jia").click(function(){
var i = $(this).prev().text();
i++ ;
$(this).prev().text(i);
var price = $(this).parent().prev().text();
var zong = i * price;
$(this).parent().next().text(zong);
getTotal();
});
$(".jian").click(function(){
var i = $(this).next().text();
i-- ;
if(i == 0){
if(confirm("是否删除该商品？")){
$(this).parents("tr").remove();
}
}else{
$(this).next.text(i);
var price = $(this).parent().prev().text();
var zong = i * price;
$(this).parent().next().text(zong);
}
getTotal();
});
// function getTotal() {
// var sum = 0 ;
// var arr = $("tr:not(tr:first)").find("td:last");
// for(var i = 0 ; i < arr.length; i ++ ){
// sum += Number(arr[i].innerHTML);
// }
// $("b").text(sum);
// }
function getTotal(){
var sum = 0 ;
$("tr:not(tr:first)").find("td:last").each(function(){
sum += Number($(this).text());
});
$("b").text(sum);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.jian{
border: 1px solid #999;
display: inline-block; /* 超链接a是行内元素，只能转换成行内块元素，才能改变宽和高 */
width: 20px ;
height: 20px;
text-align: center;
text-decoration: none;
}
.jia{
border: 1px solid #999;
display: inline-block; /* 超链接a是行内元素，只能转换成行内块元素，才能改变宽和高 */
width: 20px ;
height: 20px;
text-align: center;
text-decoration: none;
}
</style>
<body>
<table border="1" cellspacing="0" width="400px">
<tr>
<td>商品编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr>
<td>1</td>
<td>炸香肠</td>
<td>3</td>
<td>
<a href="#" class="jian">-</a>
<span>1</span>
<a href="#" class="jia">+</a>
</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>王八</td>
<td>10</td>
<td>
<a href="#" class="jian">-</a>
<span>1</span>
<a href="#" class="jia">+</a>
</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>恐龙</td>
<td>1000</td>
<td>
<a href="#" class="jian">-</a>
<span>1</span>
<a href="#" class="jia">+</a>
</td>
<td>1000</td>
</tr>
</table>
<p style="width: 400px;text-align: right;">
总价：<b style="color: red;">111</b><button>提交订单</button>
</p>
<script src="jquery.min.js"></script>
<script src="car.js"></script>
</body>
</html>
