Web开发基础:JQuery详解

超详细的Java知识点汇总


JQuery介绍

目前前端常用的JS框架,目的是简化JavaScript的开发

JQuery的使用
导入外部JS文件

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>

JQuery的选择器

如何选择要进行操作的页面元素

选择器的基本语法:

$("选择器")

例如:操作id为id-1的div标签

原生JS:
document.getElementById("id-1")
JQuery:
$("#id-1")

CSS选择器

JQuery可以使用CSS选择器,如:

  • 标签选择器:选择页面中所有相同类型的标签,如:p、h1、a
  • 类选择器:.类名 ,选择页面中多个设置该类的标签
  • ID选择器:#ID,选择页面中唯一设置了该ID的标签
  • 后代选择器:父选择器 子选择器
  • 分组选择器:选择器,选择器,选择器

过滤选择器

JQuery特有的选择器
基本过滤选择器:
在这里插入图片描述

内容过滤选择器

在这里插入图片描述

可见过滤选择器

在这里插入图片描述

属性过滤选择器

在这里插入图片描述

子元素过滤选择器

在这里插入图片描述

表单属性过滤选择器

在这里插入图片描述

表单选择器

在这里插入图片描述

JQuery常用方法

方法作用
val() / val(‘值’)读写表单的值
prop(‘属性名’)/prop(‘属性名’,‘值’)读写标签的属性
css(‘样式名’)/css(‘样式名’,‘值’)读写标签的样式
text()/text(‘文字’)读写标签的文字内容
html()/html(‘HTML代码’)读写标签内部的HTML
parent()获得父标签
next(‘标签名’)获得邻近的下一个标签
prev(‘标签名’)获得邻近的上一个标签
find(‘选择器’)查找子标签
each(function)对集合进行遍历操作
addClass(“类选择器”)添加类选择器
removeClass(“类选择器”)删除类选择器
toggleClass(“类选择器”)切换样式

JQuery事件

JQuery的事件处理

$(选择器).bind("事件名",function(){
	事件处理代码
});

$(选择器).事件名(function(){
	事件处理代码
});

常用事件:

  • click 点击
  • mouseIn 鼠标进入
  • mouseOut 鼠标移出
  • mouseMove 鼠标移动
  • keyDown 键盘按下
  • keyUp 键盘弹起
  • focus 获得焦点
  • blur 失去焦点

JQuery的动画

方法作用
show()/show(毫秒数)显示
hide()/hide(毫秒数)隐藏
fadeIn()/fadeIn(毫秒数)淡入
fadeOut()/fadeOut(毫秒数)淡出
slideDown()/slideDown(毫秒)向下滑动
slideUp()/slideUp(毫秒)向上滑动
animate({样式:‘值’,样式:‘值’},毫秒数)自定义动画

案例:购物车

在这里插入图片描述

功能:
1)计算选中商品的总价格
2)全选和全不选
3)商品数量的修改
4)点击结算后,统计选中商品的信息

功能分析:
1)计算选中商品的总价格

1)如何找到所有商品前面选中的复选框
$("[name=checkOne]:checkbox:checked")
2)如何获得选中复选框同一行的价格和数量
先使用parent()定位到行tr标签上
通过find查找子标签
3)如何将所有选中商品的价格和数量统计起来
each进行遍历

2)全选和全不选

1)给全选复选框设置点击事件
2)使用prop修改checked属性
3)名字为checkOne的复选框checked属性设置为和checkAll一样

3)商品数量的修改
加1:

1)给所有class为add的标签设置点击事件
2)找到当前标签的上一个span,获得文字,设置文字为原数量+1
3)找到同一行的money,更新价格
4)更新总价格

4) 点击结算后,统计选中商品的信息

1)找到所有选中的复选框
2)找到同一行的商品信息
3)显示出来

完整代码

<!DOCTYPE html>
<html>
<head>
	<title>购物车</title>
	<meta charset="utf-8">
	<style type="text/css">
		.add,.sub{
			width: 30px;
			height: 30px;
			background: #ccc;
			text-align: center;
			line-height: 30px;
			vertical-align: middle;
			cursor: pointer;
			display: inline-block;
		}
	</style>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		//计算总价
		function calcPrice(){
			var sum = 0;
			//获得所有name为check的选中状态的复选框,对其进行遍历
			$("[name='check']:checkbox:checked").each(function(){
				//获得该复选框同一行的总价文字
				var price = $(this).parent().parent().find(".total_price").text();
				sum += parseInt(price);
			});
			//显示到总价格标签中
			$("#total").text(sum);
		}
		//网页加载后
		$(function(){
			//调用计算总价
			calcPrice();
			//给name为checkAll的复选框添加点击事件
			$("[name='checkAll']:checkbox").click(function(){
				//找到所有name为check的复选框,将checked属性设置为和该复选框一样
				$("[name='check']:checkbox").prop("checked",$(this).prop("checked"));
				calcPrice();
			});
			//点击商品的复选框后重新计算价格
			$("[name='check']:checkbox").click(function(){
				calcPrice();
			});
			//给所有的+号添加点击事件
			$(".add").click(function(){
				//获得数量文字
				var num = parseInt($(this).prev("span").text());
				if(num < 10){
					//更新数量
					$(this).prev("span").text(num+1);
					//获得单价
					var total_price = $(this).parent().parent().find(".price").text() * (num + 1);
					//更新同一行的总价
					$(this).parent().parent().find(".total_price").text(total_price);
					//更新所有商品总价
					calcPrice();
				}
			});
			//给所有的-号添加点击事件
			$(".sub").click(function(){
				//获得数量文字
				var num = parseInt($(this).next("span").text());
				if(num > 1){
					//更新数量
					$(this).next("span").text(num-1);
					//获得单价
					var total_price = $(this).parent().parent().find(".price").text() * (num - 1);
					//更新同一行的总价
					$(this).parent().parent().find(".total_price").text(total_price);
					//更新所有商品总价
					calcPrice();
				}
			});
			//给name为pay的button添加点击事件
			$("[name='pay']:button").click(function(){
				var jsons = new Array();
				var i = 0;
				//遍历所有被选中的商品
				$("[name='check']:checkbox:checked").each(function(){
					var id = $(this).parent().parent().find(".id").text();
					var name = $(this).parent().parent().find(".name").text();
					var price = $(this).parent().parent().find(".price").text();
					var num = $(this).parent().parent().find(".num").text();
					var total = $(this).parent().parent().find(".total_price").text();
					//向数组添加JSON对象
					jsons[i++] = {"id":id,"name":name,"price":price,"num":num,"total":total};
				});
				//JSON.stringify是将json数组转换为字符串
				alert(JSON.stringify(jsons));
			});
		});
	</script>
</head>
<body>
	<table width="60%">
		<tr>
			<th><input type="checkbox" name="checkAll" checked="true"></th>
			<th>编号</th>
			<th>名称</th>
			<th>价格</th>
			<th>数量</th>
			<th>总价</th>
		</tr>
		<tr>
			<td><input type="checkbox" name="check" checked="true"></td>
			<td><span class="id">1<span></td>
			<td><span class="name">IPhoneX</span></td>
			<td><span class="price">8000.0</span></td>
			<td><span class="sub">-</span><span class="num">1</span><span class="add">+</span></td>
			<td><span class="total_price">8000.0</span></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="check" checked="true"></td>
			<td><span class="id">2</span></td>
			<td><span class="name">小米6</span></td>
			<td><span class="price">3000.0</span></td>
			<td><span class="sub">-</span><span class="num">1</span><span class="add">+</span></td>
			<td><span class="total_price">3000.0</span></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="check" checked="true"></td>
			<td><span class="id">3</span></td>
			<td><span class="name">华为P10</span></td>
			<td><span class="price">5000.0</span></td>
			<td><span class="sub">-</span><span class="num">1</span><span class="add">+</span></td>
			<td><span class="total_price">5000.0</span></td>
		</tr>
	</table>
	总价格:<span id="total">0</span> <input type="button" value="结算" name="pay">
</body>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

恒哥~Bingo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值