jQuery（购物Demo）

最新推荐文章于 2020-12-30 22:36:04 发布

小东升职记

最新推荐文章于 2020-12-30 22:36:04 发布

阅读量502

点赞数 1

分类专栏：新手必看编程规则 java Linux jQuery 小东升职记文章标签： jQuery java web 购物demo

本文链接：https://blog.csdn.net/qq_38704184/article/details/85009419

版权

新手必看同时被 3 个专栏收录

155 篇文章 1 订阅

订阅专栏

java

110 篇文章 0 订阅

订阅专栏

编程规则

95 篇文章 0 订阅

订阅专栏

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>

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

小东升职记

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（购物Demo）

jQueryjQuery是一个优秀的JavaScript框架，一个轻量级的JS库。他封装了JS,CSS,DOM，提供了一致的，简洁的API。兼容CSS3，以及各种浏览器使用户更方便地处理HTML,Events、实现动画效果，并且方便地为网站提供AJAX交互使用户的HTML页面保持代码和HTML内容分离注意：jQuery2.x开始不再支持Internet Explorer6,...
复制链接

扫一扫