2021.5.21 Jquery

最新推荐文章于 2022-08-08 14:33:34 发布
置顶 最新推荐文章于 2022-08-08 14:33:34 发布
阅读量109 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JINGMaNong/article/details/117135601
版权

1.什么是 jQuery ？

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]

在这里插入图片描述
jQuery 的优点:

1.jQuery 是一个 JavaScript 函数库。[.js]

2.jQuery 极大地简化了 JavaScript 编程。

3.jQuery 很容易学习。

jQuery库包含以下功能：

1.HTML元素选取

2.HTML元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画[元素的隐藏和显示]

6.HTML DOM 遍历和修改

7.AJAX请求【获取后台处理程序返回的数据值】高级操作

2.Jquery下载

https://code.jquery.com/jquery-3.6.0.min.js

https://code.jquery.com/jquery-3.6.0.js

Jquery是以“.js”结尾的，说明它是一个javascript文件。可以按照javascript
的用法使用。

jquery-3.6.0.min.js–jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。

jquery-3.6.0.js—jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。

3.jQuery的使用

1.通过script标记导入本地jquery函数库文件到网页中。它是一个独立的javascript文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jq/jquery-3.6.0.js">
		</script>
		<script>
			$(function() {
				alert("通过script标记引入独立的jquery文件");
			});
		</script>
	</head>
	<body>
		<h1></h1>
	</body>
</html>

2.通过script标记利用网络地址导入jquery函数库到网页中

4.jQuery 语法

通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行"操作"（actions）。
基础语法： $(selector).action()

1.选择符（selector）—"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转美元符号定义 $ -表示jQuery，jQuery表示 $ 。我们可以使用 $ 代替jQuery。

2.换成jQuery对象。【 $(selector)–jQuery的构造器–创建jQuery对象】

3.action()指对得到的jQuery对象调用的函数/属性

Javascript的页面初始化事件

1.body中提供οnlοad=“函数”

2.window.οnlοad=function(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery的初始化函数</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			/*
			$(document).ready(function(){
				alert("jQuery的初始化函数")
			});
		   $(function(){
			   alert("jQuery的初始化函数");
		   });
		   */
		   //$==jQuery，当我们在程序中需要jQuery，可以使用$代替
		   jQuery(function(){
			  alert("jQuery的初始化函数");
		   });
		</script>
	</head>
	<body>
	</body>
</html>

jQuery的初始化函数

在这里插入图片描述

5.Jquery对象与javascript对象的转换

1.javascript对象转换成Jquery对象：【$(javascript对象)】

2.Jquery对象转换成javascript对象：【Jquery对象.get()】

jquery的构造有常用的两种

$(selecter)—将被选中的html标记构造成Jquery对象

$(javascript对象)—将javascript对象构造成Jquery对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery对象与javascript对象的转换</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				var jqobj=$("#h1");
				//alert(jqobj);//[object Object]
				var docobj=document.getElementById("h1");
				//alert(docobj);//[object HTMLHeadingElement]
				//1.javascript对象转换成Jquery对象：【$(javascript对象)】
				var jq1obj=jqobj.get();
				//alert(jq1obj);//[object HTMLHeadingElement]
				//1.javascript对象转换成Jquery对象：【$(javascript对象)】
				var jqobj1=$(docobj);
				alert(jqobj1);//[object Object]
			});
		</script>
	</head>
	<body>
		<h1 id="h1">Jquery对象与javascript对象的转换</h1>
	</body>
</html>

6.jQuery 选择器

jQuery 选择器允许 对 HTML 元素组或单个元素进行操作。

1.元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素选择器</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function() {
				var p1 = $("p");
				p1.css("color", "red");
				//遍历
				var size = 20;
				for (var i = 0; i < p1.length; i++) {
					size = i * 10 + size;
					$(p1[i]).css("font-size", size + "px");
				}
			});
		</script>
	</head>
	<body>
		<p>其他常用选择器</p>
		<p>测试jquer选择器</p>
		<p>测试jquer选择器</p>
		<p>测试jquer选择器</p>
	</body>
</html>

2.#id 选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function() {
				$("#p1").css({
					"font-size": "20px",
					"color": "red"
				});
				$("#p2").css({
					"font-size": "30px",
					"color": "yellow"
				});
				$("#p3").css({
					"font-size": "40px",
					"color": "pink"
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">其他常用选择器</p>
		<p id="p2">测试jquer选择器</p>
		<p id="p3">测试jquer选择器</p>
		<p id="p3">测试jquer选择器</p>
	</body>
</html>

3.class 选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function() {
				$(".p1").css({
					"font-size": "20px",
					"color": "red"
				});
				$(".p2").css({
					"font-size": "30px",
					"color": "yellow"
				});
				$(".p3").css({
					"font-size": "40px",
					"color": "pink"
				});
			});
		</script>
	</head>
	<body>
		<p class="p1">其他常用选择器</p>
		<p class="p2">测试jquer选择器</p>
		<p class="p3">测试jquer选择器</p>
		<p class="p3">测试jquer选择器</p>
	</body>
</html>

4.其他常用选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他常用选择器</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//$("p:first").css("color","yellow");
				//$("ul li:first").css("font-size","40px");
				//$("ul li:first-child").css("font-size","40px");
				//$("[href]").css("font-size","30px");
				//$(":button").css("width","200px");
				//$(":table").css("width","200px");
				$("tr:even").css("background-color","red");
				$("tr:odd").css("background-color","blue");
			});
		</script>
	</head>
	<body>
		<p>测试jquery的基础语法1</p>
		<p>测试jquery的基础语法2</p>
		<p>测试jquery的基础语法3</p>
		<p>测试jquery的基础语法4</p>
		<ul>
			<li>name=zhangsan</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li>name=lisi</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>

		<ul>
			<li a href="#">name=wangwu</li>
			<li a href="#">age=23</li>
			<li a href="#">address=xian</li>
		</ul>
		<input type="button" value="测试button1" />
		<input type="button" value="测试button1" />
		<table border="1px">
			<tr>
				<td>1001</td>
				<td>zhangsan</td>
				<td>23</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>王五</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>李四</td>
				<td>15</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>王五</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>王五</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>zhangsan</td>
				<td>23</td>
			</tr>
		</table>
	</body>
</html>

7.jQuery控制HTML元素以及文本内容

jQuery获取/设置文本元素的值

text([content])—获取/设置所选元素的文本内容

html([content])–获取/设置所选元素的内容（包括 HTML 标记）

val([content])----获取/设置表单字段的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取/设置文本元素的值</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//获取
				//var h1value=$("#h1").text();
				var h1value=$("#h1").html();
				//alert(h1value);
				//val()----返回表单字段的值
				var but1=$(":button");
				//alert(but1.val());
				//设置
				//$("#h2").text("<font color='red'>设置文本元素的值</font>");
				//$("#h2").html("<font color='red'>设置文本元素的值</font>");
				var butobj=$(":button");
				butobj.val("测试按钮");
			});
		</script>
	</head>
	<body>
		<!-- <h1 id="h1">获取/设置<a href="#">h1</a>元素的值</h1>
		<input type="button" value="测试" /> -->
		<h1 id="h2">获取/设置<a href="#">h1</a>元素的值</h1>
		<input type="button" value="测试" />
	</body>
</html>

8.jQuery添加元素

append() - 在被选中元素中插入内容[最后一个元素在最后]

prepend() - 在被选中元素中插入内容[最后一个元素在最前面]

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加元素</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<style>
			#div {
				width: 400px;
				height: 300px;
				background-color: aqua;
			}
		</style>
		<script>
			$(function() {
				var divobj = $("#div");
				//append() - 在被选中元素中插入内容[最后一个元素在最后]
				divobj.append("<h1>append()在被选中元素中插入内容[最后一个元素在最后]</h1>");
				//after() - 在被选元素之后插入内容
				divobj.after("prepend()在被选中元素中插入内容[最后一个元素在最前面]");
				//before() - 在被选元素之前插入内容
				divobj.before("before()在被选元素之前插入内容");
			})
		</script>
	</head>
	<body>
		<div id="div"></div>
	</body>
</html>

9.jQuery删除元素

remove() - 删除被选元素（及其子元素）【有过滤功能】

empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery删除元素</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<style>
			#div {
				width: 400px;
				height: 300px;
				background-color: aqua;
			}
		</style>
		<script>
			$(function() {
				var divobj = $("#div1");
				//remove() - 删除被选元素（及其子元素）
				//divobj.remove();
				//empty() - 从被选元素中删除子元素
				divobj.empty();
			})
		</script>
	</head>
	<body>
		<div id="div1">
			<h1>测试删除元素</h1>
			<img src="avatar5.png" />
		</div>
	</body>
</html>

10.jquery的CSS 操作

1.为元素添加不存在的样式

css(样式属性名称，属性值) 设置被选元素的具有这个样式。

css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1.为元素添加不存在的样式</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$('#but1').click(function(){
					var div1=$("#div1");
					//css(样式属性名称，属性值) 设置被选元素的具有这个样式。
					//div1.css("width","300px");
					div1.css({"width":"300px","height":"300px","background-color":"red"});
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="为没有样式的元素添加样式" />
		<div id="div1"></div>
	</body>
</html>

2.为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

3.获取元素样式

css(样式属性名称) 返回被选元素的指定样式属性值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2.为元素添加已经存在的样式</title>
		<script src="jq/jquery-3.5.1.js"></script>
		<style>
			.div{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
			}
			p{
				font-size: 60px;
			}
		</style>
		<script>
			//为有样式的元素添加样式
			$(function(){
				$('#but1').click(function(){
					var div1=$("#div1");
					//addClass() - 向被选元素添加一个或多个样式类
					div1.addClass("div");
				});
			//删除addClass添加样式
				$('#but2').click(function(){
					var div1=$("#div1");
					//addClass() - 向被选元素添加一个或多个样式类
					div1.removeClass("div");
				});
			//切换样式
				$('#but3').click(function(){
					var div1=$("#div1");
					//addClass() - 向被选元素添加一个或多个样式类
					div1.toggleClass("div");
				});
			//获取元素样式
				$('#but4').click(function(){
					var div1=$("p");
					//css(样式属性名称) 返回被选元素的指定样式属性值。
					alert(div1.css("font-size"));
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="为有样式的元素添加样式" />
		<input id="but2" type="button" value="删除addClass添加样式" />
		<input id="but3" type="button" value="切换样式" />
		<input id="but4" type="button" value="获取元素样式" />
		<div id="div1"></div>
		<p>获取元素样式</p>
	</body>
</html>
景抓马
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Infragistics_Ultimate_2021.1_with_Samples_and_Help.z03
07-13
NET, HTML5, jQuery等等。 它是一个全面的套件，包含了最完整的专业级工具库和。net语言的特性。 这是一个方便的程序，为专业开发人员提供了一个友好的环境，他们可以设计大量的Windows，移动和桌面应用程序与完整...
jq 给按钮添加方法_JQ 基础（4）
weixin_39788960的博客
11-23 412
今天继续分享JQ基础第四阶段。如何处理简单事件。除了页面加载之外，我们也想在其他时刻完成某个任务。正如JavaScript可以让我们通过或window.onload来截获页面加载事件一样，它对用户发起的事件也提供了相似的“挂钩”（hook）。例如，鼠标单击（onclick）、表单被修改（onchange）以及窗口大小变化（onresize）等。在这些情况下，如果直接在DOM中为元素指定行为，那么这...
jq: dom的查询
u012872771的博客
10-13 118
父元素 parent(selecor) --> 直接父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>dom...
jquery-3.5.1.min.js
m0_62285976的博客
08-08 2164
*!!??t(e,!0): t(e)})?}},},},0, src:!0, nonce:!0 }var r,i,}}}!m(e) &&!};{},},},},)},},},},)},)},t : 0)},},
Infragistics_Ultimate_2021.1_with_Samples_and_Help.zip
07-13
NET, HTML5, jQuery等等。 它是一个全面的套件，包含了最完整的专业级工具库和。net语言的特性。 这是一个方便的程序，为专业开发人员提供了一个友好的环境，他们可以设计大量的Windows，移动和桌面应用程序与完整...
jQuery Validation Plugin1.19.5（jQuery验证插件最新）
03-05
jQuery 插件使客户端表单验证变得容易，同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西，或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时，它都是一个不错的选择。该插件捆绑了一...
Infragistics_Ultimate_2021.1_with_Samples_and_Help.z01
07-13
NET, HTML5, jQuery等等。 它是一个全面的套件，包含了最完整的专业级工具库和。net语言的特性。 这是一个方便的程序，为专业开发人员提供了一个友好的环境，他们可以设计大量的Windows，移动和桌面应用程序与完整...
Infragistics_Ultimate_2021.1_with_Samples_and_Help.z02
07-13
NET, HTML5, jQuery等等。 它是一个全面的套件，包含了最完整的专业级工具库和。net语言的特性。 这是一个方便的程序，为专业开发人员提供了一个友好的环境，他们可以设计大量的Windows，移动和桌面应用程序与完整...
使用python绘制好看的箱形图、柱状图、散点图
05-26
使用python绘制好看的箱形图、柱状图、散点图
ipython-8.11.0.tar.gz
05-26
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
libaa1-1.4.0-1.30.aarch64.rpm
05-26
安装：rpm -i xx.rpm
AL-SHADE-main.zip
最新发布
05-26
多种智能优化算法设计开发应用，可供学习交流，不断更新资源
团长头像制作小程序源码 支持流量主
05-26
最近各类团长挺火的 然后就诞生了这款团长头像制作器 支持流量主模式 支持自定义文字,和拥有各种团长模板等等。
基于Springboot+vue的电子产品销售系统设计与实现+论文
05-26
基于Spring Boot和Vue的电子产品销售系统旨在提供一个高效、易用的在线销售平台。该系统主要包括以下功能模块： 产品管理：支持电子产品的添加、编辑、删除和查询，确保产品信息的准确性和完整性。 购物车管理：用户可以将感兴趣的产品加入购物车，支持修改数量、删除商品以及查看购物车明细。 订单管理：用户可以查看历史订单、下新订单、修改订单状态（如取消订单），管理员可处理订单并发货。 用户管理：包括用户注册、登录、个人信息维护，以及密码找回等功能，保障用户数据安全。 支付与结算：集成第三方支付接口，如支付宝、微信支付，提供安全便捷的支付体验。 技术实现方面： 后端：采用Spring Boot框架，构建RESTful API接口，提供数据访问和业务逻辑处理。 前端：使用Vue.js构建用户界面，通过Axios与后端进行通信，实现前后端分离。 数据库：选择MySQL作为数据库系统，存储产品、订单、用户等数据。 开发工具：使用IntelliJ IDEA或Visual Studio Code等开发工具，提高开发效率。 该系统通过Spring Boot和Vue的技术组合，为用户提供了便捷、高效
微信小程序-大宅小屋拼团小程序项目源码-原生开发框架-含效果截图示例.zip
05-26
微信小程序凭借其独特的优势，在移动应用市场中占据了一席之地。首先，微信小程序无需下载安装，用户通过微信即可直接使用，极大地降低了使用门槛。其次，小程序拥有与原生应用相近的用户体验，同时加载速度快，响应迅速，保证了良好的使用感受。此外，微信小程序还提供了丰富的API接口，支持开发者轻松接入微信支付、用户授权等功能，为开发者提供了更多的可能性。 微信小程序-项目源码-原生开发框架。想要快速打造爆款小程序吗？这里有一份原生开发框架的项目源码等你来探索！基于微信小程序的强大生态，这份源码将带你领略原生开发的魅力，实现快速迭代与高效开发。从用户授权到微信支付，从界面设计到功能实现，一切尽在掌握。赶快下载查看，让你的小程序项目在竞争激烈的市场中脱颖而出！
谷歌浏览器安装包，支持webGPU
05-26
谷歌浏览器安装包，支持webGPU
毕业设计MATLAB_基于核密度估计的小提琴图.zip
05-26
毕业设计MATLAB_基于核密度估计的小提琴图.zip
YOLOV5 实战项目：辣椒缺陷检测（2类别）【数据+代码+训练好的权重】
05-26
基于YOLOV5 对辣椒缺陷检测（2类别）的目标检测实战项目，包含代码、数据集、训练好的权重参数，经测试，代码可以直接使用 图像分辨率为640*640的大分辨率RGB图片，数据集为采摘好的辣椒好坏检测。标注的边界框完整，每张图像均有多个目标。 【数据】（分为分为训练集和验证集） 训练集datasets-images-train：364张图片和364个标签txt文件组成 验证集datasets-images-val：88张图片和88个标签txt文件组成 【yolov5】项目总大小：62MB 项目检测测试了100个epoch，在runs目录下保存了训练结果，训练最好的精度map0.5=0.92，map0.5:0.95=0.89。网络还没收敛，加大epoch可以得到更好的结果。 训练过程中会生成验证集的混淆矩阵，PR曲线、F1曲线等等 更多yolov5改进介绍、或者如何训练，请参考： https://blog.csdn.net/qq_44886601/category_12605353.html
浔川AI翻译技术建设社团
05-26
https://blog.csdn.net/2401_83104529/article/details/139215262?spm=1001.2014.3001.5501
仿一个微信聊天记录展示页面html 使用vue和jquery.scrollbar完整代码怎么写
06-08
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css"> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值