jQuery

最新推荐文章于 2024-05-27 08:33:53 发布
最新推荐文章于 2024-05-27 08:33:53 发布
阅读量1.3k 收藏 22
点赞数 19
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m112233m/article/details/134939093
版权
本文介绍了jQuery库的添加方法，包括基础语法、元素选择器、属性选择器、事件处理、动画效果（如淡入淡出、滑动和自定义动画），以及如何操作DOM元素的文本和HTML内容。还讲解了如何使用stop()方法停止动画。
摘要由CSDN通过智能技术生成

jQuery

1. jQuery 基础

jQuery 介绍

jQuery 库可以通过一行简单的标记被添加到网页中

特性
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

下载jQuery

点击打开code.jquery.com/jquery-3.7.1.min.js复制,自己建一个XXXX.js文件,粘贴 保存,然后按下面的方法引入就可以;

如果想整理代码 :

  1. HBuilder X 格式化:

    1. 快捷键 Ctrl+k;
    2. 点击鼠标右键 就可以
      在这里插入图片描述

  2. HBuilder 格式化方法:

    1. 快捷键 : Ctrl+Shift+f;
    2. 点击鼠标右键即可.
      在这里插入图片描述

  3. idea 快捷键 : Ctrl+Alt+L;

HTML添加 jQuery 库

  1. 如果下载了用下面的方法引入库
<head>
	<script src="js/jQuery.js"></script>
</head>
  1. 如果没有下载直接使用 网址
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

基本语法

$();

直接括号里面写就可以.

jQuery 语法实例

  1. div 盒子里面添加文字

​ 代码如下:

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<div id="mydiv" style="width: 100px;height: 100px; border: 2px; border: 2px solid red;"></div>
	</body>
</html>
<script>
	var d = document.getElementById("mydiv");
	$(d).text("aaa")
</script>

运行结果图:
在这里插入图片描述

  1. 可以用css添加样式.

​ 代码如下:


<html>

	<head>
		<script src="js/jQuery.js"></script>
	</head>

	<body>

		<div id="mydiv" style="width: 100px;height: 100px; border: 2px; border: 2px solid red;"></div>

	</body>
</html>

<script>
	var d = document.getElementById("mydiv");
	$(d).text("aaa")
	$(d).css("background-color","greenyellow");
</script>

运行结果
:在这里插入图片描述

2. jQuery 选择器

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

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

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

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取<p> 元素。

$(“p.intro”) 选取所有 class=“intro” 的 <p> 元素。

$(“p#demo”) 选取所有 id=“demo” 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$(“[href]”) 选取所有带有 href 属性的元素。

$(“[href=‘#’]”) 选取所有带有 href 值等于 “#” 的元素。

$(“[href!=‘#’]”) 选取所有带有 href 值不等于 “#” 的元素。

$(“[href$=‘.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。

语法描述
$(this)当前 HTML 元素
$(“p”)所有

元素

$(“p.intro”)所有 class=“intro” 的

元素

$(“.intro”)所有 class=“intro” 的元素
$(“#intro”)id=“intro” 的元素
$(“ul li:first”)每个
  • 的第一个
  • 元素
( " [ h r e f ("[href ("[href=‘.jpg’]")所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)id=“intro” 的
元素中的所有 class=“head” 的元素

jQuery 事件

直接上代码:

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="btv" type="button" value="点我"/>
	</body>
</html>
<script>
	$("#btv").click(function(){
			alert("来了");
	});
</script>

运行结果:
在这里插入图片描述

3. jQuery 效果

隐藏显示

hide()方法是隐藏
show()方法是显示

具体用法是:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="mybtv" type="button" value="隐藏"/>
		<div id="mydiv" style="width: 100px;height: 100px;border: 3px solid red;"></div>
	</body>
</html>
<script> 
$("#mybtv").click(function(){
	if($("#mybtv").val()=="隐藏"){
		$("#mydiv").hide();//显示
		$("#mybtv").val("显示");
		
	}else{
		$("#mydiv").show();
		$("#mybtv").val("隐藏")
	}
});
</script>

运行结果如下:

在这里插入图片描述

jQuery - 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn() 用于淡入已隐藏的元素。
  • fadeOut() jQuery fadeOut() 方法用于淡出可见元素。
  • fadeToggle() fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  • fadeTo()fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。

语法：
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

实例
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
亲自试一试
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

实例

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
实例

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

下面看看来个演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="mybtv" type="button" value="隐藏"/>
		<div id="mydiv" style="width: 100px;height: 100px;border: 3px solid red;"></div>
	</body>
</html>
<script> 
$("#mybtv").click(function(){
	if($("#mybtv").val()=="隐藏"){
		$("#mydiv").fadeOut();//淡入隐藏
		$("#mybtv").val("显示");
	}else{
		$("#mydiv").fadeIn(2000);//淡入显示
		$("#mybtv").val("隐藏")
	}
});
</script>

运行结果是:
在这里插入图片描述

jQuery 滑动

jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()
jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。
按咧:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="mybtv" type="button" value="隐藏"/>
		<div id="mydiv" style="width: 100px;height: 100px;border: 3px solid red;"></div>
		
		
	</body>
</html>
<script> 
$("#mybtv").click(function(){
	
	if($("#mybtv").val()=="隐藏"){
		$("#mydiv").slideUp();//滑动显示
		$("#mybtv").val("显示");
		
	}else{
		$("#mydiv").slideDown();//滑动隐藏
		$("#mybtv").val("隐藏")
	}
});
</script>

运行结果:
在这里插入图片描述

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="mybtv" type="button" value="点击我试试"/>
		<div id="mydiv" style="width: 100px;height: 100px;border: 3px solid red;"></div>
		
		
	</body>
</html>
<script> 
$("#mybtv").click(function(){
	$("#mydiv").slideToggle();
	
})

</script>

运行结果:
在这里插入图片描述

动画效果

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

代码验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="mybtv" type="button" value="动作"/>
		<div id="mydiv" style="width: 100px;height: 100px;border: 3px solid red;"></div>
	</body>
</html>
<script> 
$("#mybtv").click(function(){
	 $("#mydiv").animate({
		 height:'200px',
		 width:'200px'
	 });
});
</script>

运行结果:

在这里插入图片描述
当使用’’ animate() ''时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

jQuery 停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="stop" type="button" value="停止动作" />
		<input id="mybtv" type="button" value="动作" />
		<div id="mydiv" style="width: 100px;height: 100px;border: 3px solid red;">aa</div>
	</body>
</html>
<script>
	$(document).ready(function() {
		$("#mybtv").click(function() {
			$("#mydiv").animate({
				height: '500px',
				width: '500px',
				fontSize:'200px'
			}, 6000);
		});
		$("#stop").click(function() {
			
			$("#mydiv").stop(30000);
		});
	});
</script>

运行结果:
在这里插入图片描述

4. jQuery HTML

jQuery 获取:

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input id="mybtv2" type="button" value="显示文本" />
		<input id="mybtv" type="button" value="显示HTML" />
		<p id="myp">这是一个<b>加粗</b>的字</p>
	</body>
</html>
<script>
	$(document).ready(function() {
		$("#mybtv2").click(function() {
			alert("Text:" + $("#myp").text());
		});
		$("#mybtv").click(function() {
			alert("HTML:" + $("#myp").html());
		})
	});
</script>

运行结果:
在这里插入图片描述
基本教程差不的这个样子!后面还有…

小麦09
关注
  • 19
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
jquery
weixin_44385104的博客
04-24 90
用jquery简单展示每个分类下面动态加载商品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="/stat...
jquery-3.7.1，一个免费的前端JavaScript库
02-20
此压缩文件包含3个文件： jquery-3.7.1.js，未压缩文件，适用于开发或调试时使用。 jquery-3.7.1.min.js，压缩文件，更小、执行效率更高，适用于项目产品中使用。 jquery-3.7.1.min.map，源映射文件，可以配合压缩文件进行调试时使用，运行jQuery不需要映射文件，但它可以改善开发人员的调试体验。
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1、硬件要求：计算机一台 2、软件要求：Chrome浏览器、IE11浏览器、Firefox浏览器 3、网络要求：能访问互联网 1、掌握Jquery框架的使用；掌握Jquery框架的插件开发 2、掌握Jquery-validate表单验证插件的使用，了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程，基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件，并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。
jQuery 下载与快速入门指南
最新发布
一起coding，一起嗨。
05-27 691
jQuery 下载与快速入门指南
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）
好玩的js特效
偶尔写些东西，意思一下我也参与了内卷
09-08 1466
引入jquery:https://code.jquery.com/jquery-3.7.1.min.js。
关于jquery-3.7.1.js怎么下载，怎么找到自己想要的版本下载
cqyczj的专栏
09-30 973
官网地址：jQuery
jQuery.js冲突问题
weixin_34233618的博客
03-15 129
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp"...
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
Jquery-3.7.1.min.js
01-22
Jquery-3.7.1.min.js
jquery 下载
10-23
jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载
jquery-3.7.1.js文件免费下载最新版本
02-06
【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最新版本】【免费下载】【最
jQuery v3.7.1.zip
03-25
jQuery v3.7.1.zip
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
【前端】jQuery-概述+基本使用+常用API
qq_45764950的博客
11-27 1189
【前端】jQuery-概述+基本使用+常用API
jQuery文件下载方法及引入HTML语法
weixin_47378963的博客
01-04 1444
右键点击该页面，在弹出的菜单中选择另存为，在另存为的菜单中默认保存的后缀名为".js"，如果不是，可以在下拉菜单中选择该类型的选项，然后保存即可下载jQuery文件了。鄙人下载的是最新版本的jquery-3.7.1.min.js。：jQuery的文件的扩展名是".js"，下载完之后，无需安装，使用直接引入即可使用jQuery。：内容仅供参考，不保证正确性！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值