jQuery（购物Demo）

jQuery

jQuery是一个优秀的JavaScript框架，一个轻量级的JS库。

他封装了JS,CSS,DOM，提供了一致的，简洁的API。

兼容CSS3，以及各种浏览器

使用户更方便地处理HTML,Events、实现动画效果，并且方便地为网站提供AJAX交互

使用户的HTML页面保持代码和HTML内容分离

注意：jQuery2.x开始不再支持Internet Explorer6,7,8

jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述

jQuery提供的方法都是针对jQuery独享特有的，而且大部分方法的返回值类型也是jQuery对象，所以方法可以连缀调用“jquery对象.方法().方法().方法()....”

通过jQuery选择器选中的对象为jQuery对象

如$("div")和$(#d1)

jQuery选择器包含如下种类：

--基本选择器

元素选择：依据标签名定位元素 $("标签名")
类选择器：根据class属性定位元素 $(".class属性名")
id 选择器：根据id属性定位元素 $("#id")
选择器组：定位一组选择器多对应的所有元素 $("#id,importent")

--层次选择器

在select1元素下，选中所有满足select2 的子孙元素 $("select1 select2")
在select1元素下，选中所有满足select2的子元素 $("select1 > select2")
选中select1元素的，满足select2的下一个弟弟 $("select+select2")
选中select1元素的，满足select2 的所有弟弟 $("select1 ~ select2")

--过滤选择器

first 第一个元素
last 最后一个元素
not (selector) 把selector排序在外
even 挑选偶数行
odd 挑选奇数行
eq(index)下标等于index的元素
gt(index)下标大于index的元素
lt(index)下标小于index的元素
contains(text) 匹配包含给定文件的元素
empty匹配所有不包含子元素或文本的空元素
hidden 匹配所有不可见元素
visible 匹配所有的课件元素
[attribute]匹配具有attribute属性的元素
[attribute = value]匹配属性等于value的元素
[attribute != value]匹配属性不等于value的元素
enable 匹配可用的元素
disable匹配不可以的元素
checked匹配选中的CheckBox
seleced 匹配选中的option

--表单选择器

text
password
radio
chexkbox
submit
reset
button
file
hidden

读写节点

读写节点的HTML内容 obj.html() / obj.html("<span>123</span>")
读写节点的文本内容 obj.text() / obj.text("123")
读写节点的value属性值 obj.val() / obj.val("abc")
读写节点的属性值 obj.attr("属性值") /obj.val("属性名","属性值")

插入DOM节点

parent.append(obj)作为最后一个自及诶单添加进来
parent.prepend(obj)作为第一个子节点添加进来
brother.after(obj)作为下一个兄弟节点添加进来
brother.before(obj)作为上一个兄弟节点添加进来

删除DOM节点

obj.remove()删除节点
obj.remove(selector)只删除满足selector的节点
obj.empty()清空节点

样式操作

addclass(" ") 追加样式
removeClass(" ") 移除指定样式
removeClass() 移除所有样式
toggleClass(" ") 切换样式
hasClass(" ")判断是否有某个样式
css(" ")读取css的值
css(" "," ")设置多个样式

遍历节点

children() / children(selector) 直接子节点
next() /next(selector) 下一个兄弟节点
prev() /prev(select) 上一个兄弟节点
siblings() / siblings(selector) 所有兄弟
find(selector) 查找满足选择器的所有后代
parent() 父节点

如何取消冒泡事件（什么是事件冒泡：子节点产生的事件会一次向上抛给父节点）

e.stopPropagation() 可以取消事件冒泡

if(event.stopPropagation){

event.stopPropagation();//IE

}else{

event.cancelBuddle();//非IE

}

基于jQuery的购物demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物</title>
<style type="text/css">body{background: #ccceee;
}h1 {text-align: center;
}table {width:60%;margin:   100px auto;border: 1px solid #ffffff;border-collapse: collapse;text-align: center;
}table th ,table td  {border: 1px solid #ffffff;padding: 5px;
}input:hover {background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">function addshopping(btn) {var tds = $(btn).parent().siblings();var name = tds.eq(0).text();var price = tds.eq(1).text();var n_tr = $('<tr>'+'<td>'+name+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="-" onclick="decrease(this);">'+'<input type="text" value="1" size="3" readonly>'+'<input type="button" value="+" onclick="increase(this);">'+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="X" onclick="del(this);">'+'</td>'+'</tr>'        );$("#goods").append(n_tr);total();}function del(btn) {$(btn).parent().parent().remove();total();}function increase(btn) {//获取文本框内容var amount = $(btn).prev().val();$(btn).prev().val(++amount);//获取单价var price = $(btn).parent().prev().text();var money = amount*price;$(btn).parent().next().text(money);total();}function decrease(btn) {//获取数量var amount = $(btn).next().val();if (amount<=1) {return;}$(btn).next().val(--amount);//获取单价var price = $(btn).parent().prev().text();var money = amount*price;$(btn).parent().next().text(money);total();}function total() {//获取tbody下的所有行var $trs = $("#goods tr");//遍历var sum = 0 ;for (var i = 0; i < $trs.length; i++) {// 获取每一行var $tr = $trs.eq(i);//获取每一行中的第四列var money = $tr.children().eq(3).text();sum += parseFloat(money);}$("#total").text(sum);}
</script>
</head>
<body><h1>聚划算</h1><table><thead><tr><th>商品名</th><th>商品价格</th><th>商品库存</th><th>好评率</th><th>操作</th></tr></thead><tbody><tr><td>龙瞎皮肤</td><td>888</td><td>100</td><td>50%</td><td><input type="button" value="加入购物车" onclick="addshopping(this);"/></td></tr><tr><td>寒冰源计划皮肤</td><td>666</td><td>50</td><td>70%</td><td><input type="button" value="加入购物车" onclick="addshopping(this);"/></td></tr><tr><td>劫源计划皮肤</td><td>555</td><td>30</td><td>60%</td><td><input type="button" value="加入购物车" onclick="addshopping(this);"/></td></tr></tbody><tfoot><tr><td colspan="5" style="text-align: center;color: red;">LOL皮肤选购</td></tr></tfoot></table><h1>购物车</h1><table><thead><tr><th>商品名</th><th>商品单价</th><th>商品数量</th><th>商品总价</th><th>操作</th></tr></thead><tbody id="goods"></tbody><tfoot><tr><td colspan="3">总价：</td><td colspan="2" id="total"></td></tr></tfoot></table>
</body>
</html>

注意：事件冒泡在做项目时候经常发生，要知道如何去取消事件冒泡