本文最后更新于：December 4, 2021 pm

JQuery是一个快速、简洁的JavaScript框架。JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

//JQuery的hide()函数是用来起隐藏作用的

// $(this).hide() - 隐藏当前元素
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>


// $("p").hide() - 隐藏所有段落
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

// $(".test").hide() - 隐藏所有 class="test" 的所有元素
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(".test").hide();
  });
});
</script>

// $("#test").hide() - 隐藏所有 id="test" 的元素
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>

2.1 文档就绪函数

实例中的所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

1
2
3

$(document).ready(function(){

});

注意：后面的代码中都没有写此函数，需自行添加。

2.2 JQuery入口函数

正常使用（隐藏div）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery</title>
		<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
		<style type="text/css">
			div{
				width: 300px;
				height: 230px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			$('div').hide();
		</script>
	</body>
</html>

错误使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery</title>
		<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
		<style type="text/css">
			div{
				width: 300px;
				height: 230px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			$('div').hide();
		</script>
		<div></div>
	</body>
</html>

这是因为从上到下扫描，JQuery操作div时，还并没有div。所以需要注意顺序。

解决办法

让DOM元素渲染完后再执行代码。

方法一：（推荐）

<body>
	<script type="text/javascript">
	$(function(){
		$('div').hide();
	})
	</script>
	<div></div>
</body>

方法二：

<body>
		<script type="text/javascript">
		$(document).ready(function(){
			$('div').hide();
		});
		</script>
		<div></div>
	</body>

3.JQuery选择器

3.1 元素选择器

使用 CSS 选择器来选取 HTML 元素。
示例：

$("p") 选取 <p> 元素。

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

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

3.2 属性选择器

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

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

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3.3 其他选择器

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 <p> 元素
$(“p.intro”)	所有 class=”intro” 的 <p> 元素
$(“.intro”)	所有 class=”intro” 的元素
$(“#intro”)	id=”intro” 的元素
$(“ul li:first”)	每个 <ul> 的第一个 <li> 元素
$(“[href$=’.jpg’]”)	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=”intro” 的 <div> 元素中的所有 class=”head” 的元素

4.JQuery事件

基本用法：$(selector).action(function() {..some code… } )

4.1 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。如果某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号，这时就会问题，jQuery 使用名为 noConflict() 的方法来解决该问题。如：

1	`var jq=jQuery.noConflict()//使用自己的名称（比如 jq）来代替 $ 符号。`

4.2 事件函数

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

5.JQuery 隐藏|显示

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
示例：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

具体语法：

1 2	`$(selector).hide(speed,callback); $(selector).show(speed,callback);`

可选参数：

speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
callback 参数是隐藏或显示完成后所执行的函数名称。

示例：

1
2
3

$("button").click(function(){
  $("p").hide(1000);
});

使用 toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素。
用法：$(selector).toggle(speed,callback);

可选参数：

speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
callback 参数是 toggle() 方法完成后所执行的函数名称。

示例：

1
2
3

$("button").click(function(){
  $("p").toggle();
});

6.JQuery 淡入|淡出

6.1 fadeIn()方法

用于淡入（显示）已隐藏的元素。

基本用法：$(selector).fadeIn(speed,callback);

示例：

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

可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

6.2 fadeOut()方法

用于淡出（隐藏）可见元素。

基本用法：$(selector).fadeOut(speed,callback);

可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

示例：

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

6.3 fadeToggle()方法

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果，否则，反之。

基本用法：$(selector).fadeToggle(speed,callback);

可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

示例：

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

6.4 fadeTo()方法

允许渐变为给定的不透明度（值介于 0 与 1 之间）。

基本用法：$(selector).fadeTo(speed,opacity,callback);

可选参数：

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

示例：

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

7.滑动

7.1 slideDown()方法

用于向下滑动元素。

基本用法：$(selector).slideDown(speed,callback);

可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

示例：

1
2
3

$("#flip").click(function(){
  $("#panel").slideDown();
});

7.2 slideUp()方法

用于向上滑动元素。

基本用法：$(selector).slideUp(speed,callback);

可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

示例：

1
2
3

$("#flip").click(function(){
  $("#panel").slideUp();
});

7.3 slideToggle()方法

可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们，否则反之。

基本用法：$(selector).slideToggle(speed,callback);

可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

示例：

1
2
3

$("#flip").click(function(){
  $("#panel").slideToggle();
});

8.动画

8.1 animate()方法

用于创建自定义动画。

基本用法：$(selector).animate({params},speed,callback);

可选参数：

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

示例：

1
2
3

$("button").click(function(){
  $("div").animate({left:'250px'});
});

默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，需要首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

操作多个属性

在生成动画的过程中可同时使用多个属性，如：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

使用相对值

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。

示例：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义的值

可以把属性的动画值设置为 “show”、”hide” 或 “toggle”。

示例：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

默认地，jQuery 提供针对动画的队列功能。如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

示例：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

8.2 停止动画

stop() 方法用于在动画或效果完成前对它们进行停止。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

基本用法：$(selector).stop(stopAll,goToEnd);

可选参数：

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

默认情况下，stop() 会清除在被选元素上指定的当前动画。

示例：

1
2
3

$("#stop").click(function(){
  $("#panel").stop();
});

9.Callback函数

Callback 函数在当前动画 100% 完成之后执行。

基本用法：$(selector).hide(speed,callback)

示例：

1
2
3

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

10.链接(Chaining)

Chaining 允许在一条语句中允许多个 jQuery 方法（在相同的元素上），允许在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样，浏览器就不必多次查找相同的元素。也可以添加多个方法调用。

示例：

//"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

//格式化
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

11.事件切换

基本用法：hover([over，]out)

over：鼠标移到元素上要触发的函数（相当于mouseenter）
out：鼠标移出元素要触发的函数（相当于mouseleave）

示例：

<body>
		<div></div>
		<script type="text/javascript">
		$(document).ready(function(){
		  $("div").hover(function(){
			$("div").css("background-color","yellow");
			},function(){
			$("div").css("background-color","green");
		  });
		});
		</script>
	</body>

如果只写一个函数，则鼠标经过和鼠标离开都会触发这个函数。

JavaWEB

JavaWEB JQuery

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/12859480.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Spring-（三）基于注解的DI Previous

Spring-（二）基于XML的DI Next

JavaWEB-（三十四）JQuery入门一

目录

1.JQuery引入

1.1 使用 Google 的 CDN

1.2 使用 Microsoft 的 CDN

2.基础语法

2.1 文档就绪函数

2.2 JQuery入口函数

解决办法

3.JQuery选择器

3.1 元素选择器

3.2 属性选择器

3.3 其他选择器

4.JQuery事件

4.1 名称冲突

4.2 事件函数

5.JQuery 隐藏|显示

6.JQuery 淡入|淡出

6.1 fadeIn()方法

6.2 fadeOut()方法

6.3 fadeToggle()方法

6.4 fadeTo()方法

7.滑动

7.1 slideDown()方法

7.2 slideUp()方法

7.3 slideToggle()方法

8.动画

8.1 animate()方法

8.2 停止动画

9.Callback函数

10.链接(Chaining)

11.事件切换