Web开发基础：JQuery详解

最新推荐文章于 2024-04-04 12:15:02 发布
最新推荐文章于 2024-04-04 12:15:02 发布
阅读量407 收藏 1
点赞数 1
分类专栏： 前端 文章标签： jquery js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013343114/article/details/113939227
版权

超详细的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
    评论
专栏目录
JavaWeb = jQuery使用详解
人生起落，生活苦甜，坚持追求！
04-10 790
jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。 特别值得一提的是基于jquery的插件非常丰富，大多数前端业务场景都有其封装好的工具框架 一。jQuery概述 1.jQuery概述 jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。 特别值得一提...
零基础如何学 Web 前端开发
BOM485480的博客
07-31 5117
今天是2021年7月的最后一天，也是一个美好的周六啊，本来我是不打算发文的，毕竟难得有一个好的休息天，让自己忙碌的一周身心放松下来，打打游戏，看看小姐姐不香吗。但是呢，就是有一些可爱的小伙伴私聊问我，零基础如何学 Web 前端开发，有什么建议，指导一下。这可难为我了，说实话这种建议还真不敢说，因为建议好了就把人带到了正确道路了，建议差了就是误人子弟。但是呢，既然问了，那就把我这么多年的个人阅历经验说一下，个人建议，仅供参考！ 回答这个问题我不会给你讲一些不切实际的定义或者前端历史，或者一些你看不懂听不懂的玄
Web开发基础：JQuery详解，web开发增强
最新发布
wfegre的博客
04-04 606
prop(‘属性名’)/prop(‘属性名’,‘值’) | 读写标签的属性 || css(‘样式名’)/css(‘样式名’,‘值’) | 读写标签的样式 || html()/html(‘HTML代码’) | 读写标签内部的HTML || text()/text(‘文字’) | 读写标签的文字内容 || fadeOut()/fadeOut(毫秒数) | 淡出 || val() / val(‘值’) | 读写表单的值 || fadeIn()/fadeIn(毫秒数) | 淡入 |
1+X Web 前端开发考证 | 详解jQuery基础
go
10-04 4318
jQuery是web前端初级考试的一个必考知识?虽然jQuery有点老,但是jQuery还是有他的作用的: JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码 jQuery是JavaScript框架库中的一种 jQuery的好处:写的少,做的多,链式编程,隐式迭代等… jQuery可以解决js兼容的问题 体验 jQuery 例如我们要做一个页面加载事件,用javascript实现如下 <script> window.onloa.
Web基础总结、思维导图Web、JS、JQuery
qq_43707633的博客
02-16 900
前端开发入门学习有：HTML、CSS、JavaScript（简称JS）这三个部分。所以在学习之前我们需要先明确三个概念： HTML——内容层，它的作用是表示一个HTML标签在页面里是个什么角色。 CSS——样式层，它的作用是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。 JS——行为层，它的作用是当用户触发某些行为时，会给内容和样式带来什么样的改变。 ![在这里插入图片描述](h...
Web应用开发基础
2301_76541246的博客
12-23 969
对于web前端学习小白来说，html+css基础尤为重要，可以说是编程小白的必经之路，学完后能写出你看到的静态页面。1）PC端网站布局包含知识点： HTML基础，CSS基础，CSS核心属性；CSS样式层叠，继承，盒模型；容器，溢出及元素类型；浏览器兼容与宽高自适应……2）HTML5+CSS3基础包含知识点： HTML5新增的元素与属性；表单域增强元素；CSS3选择器；文字字体相关样式；CSS3位移与变形处理……3）WebApp页面布局包含知识点： 移动端页面设计规范；移动端切图；
JQuery详解
m0_57249797的博客
08-20 662
一、JQuery入门 学习目标： 能够说出什么是JQuery 能够说出JQuery的优点 能够简单使用JQuery 能够说出DOM对象和JQuery对象的区别 1、JQuery的概述 1.1、JavaScript库 仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了。 JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取
web前端页面优化详解
weixin_44465584的博客
03-08 4689
一：web前端页面优化： 1.web页面的具体是什么？前身？ web前端页面作为呈现给用户看的页面，也就是浏览器可以解析出资源的通过一定程序而出现的页面，对于可以开发人员，很好懂：就是HTML（Hyper Text Markup Language【超文本标记语言】）+CSS（Cascading Style Sheets【表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集...
前端必备——JQuery基础知识体系详解
实验楼
08-20 806
今天推荐一个前端学习干货——【JQuery基础教程】。jQuery是一个优秀的轻量级Javascript库，兼容CSS3，还兼容各种浏览器，在Web前端开发中广泛使用...
2_web开发_jquery_
10-02
**jQuery基础及应用详解** jQuery是一款广泛应用于Web开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习和实践jQuery，开发者可以更高效地实现网页动态效果和交互功能。 #...
jQuery开发技术详解
07-18
第1章 Web开发的发展与趋势 第2章 JavaScript基础 第3章 文档对象模型（DOM） 第4章 工欲善其事，必先利其器——开发工具 第5章 jQuery快速上手 第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用...
Ajax：Web2.0 开发技术详解
04-10
Ajax，全称Asynchronous JavaScript and XML（异步JavaScript...通过学习《Ajax：Web2.0 开发技术详解》，开发者将能够全面掌握Ajax技术，从而在Web应用开发中发挥其强大的潜力，创造出更高效、更富交互性的网页体验。
jquery mobile web api开发例子
04-18
**jQuery Mobile Web API 开发详解** 在Web应用开发中，jQuery Mobile 和 Web API 结合使用可以构建出功能强大且响应式的移动应用。本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互，展示...
jqueryDate:jqueryDate
05-13
在Web开发中，日期选择器是一个不可或缺的元素，它为用户提供了方便的方式来选择和输入日期。`jqueryDate`组件是针对jQuery框架的一个专门用于处理日期选择的插件，其设计目标是为网页应用提供简单、易用且功能丰富...
Web开发基础：JavaScript飞机大战
恒哥的博客
02-13 1367
飞机大战 1、飞机跟着鼠标移动 在onmousemove事件中获得鼠标的坐标，设置给飞机图片 2、发射子弹 子弹需要动态添加到网页中 动态创建标签对象 document.createElement(“标签名”); 动态添加到层中 层对象.appendChild(标签对象); 设置样式 3、敌机移动 4、击中敌机 飞机大战 ...
Web开发基础：JavaScript入门
恒哥的博客
02-07 865
JS基本语法 调试方法 DOM编程 函数和事件处理 表单验证 正则表达式 JavaScript简介 JavaScript简称JS，是一种脚本语言，可以嵌入网页中实现动态效果。 JavaScript原名是LiveScript，是网景公司开发的，后来更名JavaScript。 JavaScript的作用: 实现网页的动态效果 表单验证 游戏开发 随着NodeJS的推出，还可以进行服务器开发 JavaScript的组成 ECMAScript JS标准语法 DOM 文档对象模型 BOM 浏览器对象模
Web开发基础：HTML
恒哥的博客
02-05 686
项目开发视频： SpringCloud微服务开发入门 手把手开发基于SpringBoot的员工管理系统 亿度云盘~Java小白入门实战 前言 开始写Web前端内容，这是JavaWeb开发必不可少的东西，包括HTML、CSS、JS等。 HTML简介 HTML（Hyper Text Markup Language） 超文本标记语言，用于描述网页的结构，浏览器对HTML代码进行渲染后就形成了我们常见的页面。 HTML基本结构 HTML代码由各种标签组成，标签由一对<>括起来，网页的标签有固定的结构：
快速入门Vue（四）Vue-Router的基本使用
恒哥的博客
12-17 602
概述 Vue-Cli构建的是一个单页应用，页面由多个组件（Component）组成，要实现组件的跳转，传统的a标签已经不合适了，所以Vue-Router就出现了。 Vue-Router是Vue的路由框架，能实现组件之间的跳转、参数传递等功能。 Vue-Router的配置 安装 npm install router --save 配置 在main.js中添加配置 使用路由 在components目录中新建三个组件：Hello、Hello1和Hello2 定义路由规则 路由规则在router/in

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

恒哥~Bingo

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

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

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

打赏作者

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

抵扣说明：

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

余额充值