Web开发基础：JQuery详解

最新推荐文章于 2024-04-04 12:15:02 发布

恒哥~Bingo

最新推荐文章于 2024-04-04 12:15:02 发布

阅读量407

点赞数 1

分类专栏：前端文章标签： jquery js css html

本文链接：https://blog.csdn.net/u013343114/article/details/113939227

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

超详细的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>

恒哥~Bingo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发基础：JQuery详解

JQuery目前最常用的JavaScript库，使用简单，极大的简化JS代码编写。使用方法：注意：src是jquery文件保存的路径CSS选择器：标签选择器：以HTML标签为选择符td{…}ID选择器：以元素的ID为选择符#myid{…}类选择器：以元素的class为选择符.myclass{…}组选择器：多个选择符应用相同样式td , #myid , .myclass{…}后代选择器：父标签和子标签为选择符table tr td{…}统配选择器：使用通配符*{…}伪类选择
复制链接

扫一扫