JQuery入门基础（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45615602/article/details/102459081

本文深入解析了jQuery中动画效果的实现方式，包括显示、隐藏、滑动和淡入淡出等动画，并介绍了jQuery的事件绑定、遍历及插件扩展功能。通过实例展示了动画速度、切换效果和回调函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

入门

动画

三种方式显示和隐藏元素

默认显示和隐藏方式

show([speed,[easing],[fn]])
- speed:动画的速度，三个预定义(‘slow’,‘normal’,‘fast’),或表示动画时长毫秒值
- easing:切换效果，默认值’swing’,可选参数’linear’
  *swing 先慢，再快，最后慢
- fn,function，回调函数，在动画执行完之后调用一次
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])

滑动显示和隐藏方式

slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 1.引入jq -->
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
    	function hideFn() {
    		//第一种隐藏方式
    		/*$('#showDiv').hide(2000, 'linear', function() {
    			alert('动画执行完毕');
    		});*/

    		//第二种，滑动
    		// $('#showDiv').slideUp(1000);

    		//第三种,淡入淡出
    		$('#showDiv').fadeOut(1000);
    	}

    	function showFn() {
    		// $('#showDiv').show(2000);
    		// $('#showDiv').slideDown(1000);
    		$('#showDiv').fadeIn(1000);
    	}

    	function toggleFn() {
    	//$('#showDiv').toggle(1000);
    	//$('#showDiv').slideToggle(1000);
    	$('#showDiv').fadeToggle(1000);
    	}
    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

遍历

js ：

for(初始化值;结束循环条件;步长)

jq：

jq对象.each(function(索引,元素){})
this 表示每个元素对象
回调函数返回值： function返回false 结束循环(break)
function返回true 结束本次循环，继续下次循环(continue)
$.each(function)
for(元素 of 容器对象) 3.0版本以后使用

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
    	/*
    	1.js的遍历方式
    	for(初始化值;循环结束条件;步长)

    	2.jq的遍历方式
    		1.jq对象.each(callback回调函数)
    			1.1jq对象.each(function(索引,元素))
			2.$.each(jq对象，[callback])
			3.for(元素 of 对象)  增强for循环，jq3.0版本才能使用

    	*/

    	//案例要求： 遍历ul标签，元素弹窗
    	$(function() {
    		//1.获取所有li标签
    		var cities = $('#city li'); //后代选择器
    		//cities jq对象   cities[i] js对象
    		//js遍历
    		/*for(var i = 0; i < cities.length; i++) {
    			// alert($(cities[i]).html());
    			// alert(i + '  ' + cities[i].innerHTML);
    		}*/

    		//第一种jq遍历
    		/*cities.each(function(index, element) {
    			//this获取到的是一个js对象
    			//alert(this.innerHTML);
    			//alert($(this).html());
    			//alert(index + ' ' + element.innerHTML);
    			if ('上海' === element.innerText) {
    				//break;//因为for循环，所以不能用break和continue
    				return false;
    				// return true 相当于continue
    				// return false 相当于break
    			}
    			alert(this.innerHTML);
    		})*/

    		//第二种方式
    		/*$.each(cities,function() {
    			alert(this.innerHTML);
    		})*/

    		//第三种方式
    		for (li of cities) {
    			alert(li.innerHTML);
    		}
    	})
    </script>
</head>
<body>
	<ul id="city">
	    <li>北京</li>
	    <li>上海</li>
	    <li>天津</li>
	    <li>重庆</li>
	</ul>
</body>
</html>

事件绑定

jq的标准事件绑定方式

jq对象.事件方法(回调函数)
当回调函数为空的时候，会触发浏览器默认行为
focus() submit()提交表单

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
   	<script src="../js/jquery-3.3.1.js"></script>
   	<script>
   		//1.获取name对象，绑定click事件
   		$(function() {
   			/*$('#name').click(function() {
   				alert('被点击了');
   			})*/

   			//给name绑定鼠标移入移出事件
   			/*$('#name').mouseover(function() {
   				alert('鼠标移入');
   			});

   			$('#name').mouseout(function() {
   				alert('鼠标移出');
   			})*/

   			//链式编程
   			/*$('#name').mouseover(function() {
   				alert('鼠标移入');
   			}).mouseout(function() {
   				alert('鼠标移出');
   			});*/

   			$('#name').focus(function() {
   				console.log(1);
   			});

   		})
   		
   	</script>
</head>
<body>
	<input id="name" type="text" value="绑定点击事件">
</body>
</html>

on绑定事件/off解除绑定

jq对象.on(‘事件名称’, 回调函数)
jq对象.off(‘事件名称’) 当不写参数的时候，解除所有事件

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src='../js/jquery-3.3.1.js'></script>
    <script type="text/javascript">
    	$(function() {
    		//1.使用on给按钮绑定事件
    		$('#btn').on('click', function() {
    			alert('点击了');
    		});

    		//2.使用off解绑事件
    		$('#btn2').click(function() {
    			//解除btn的单击事件
    			//$('#btn').off('click');
    			//将事件源上的所有事件全部解除
    			$('#btn').off();

    		});
    	})	
    </script>
</head>
<body>
	<input id="btn" type="button" value="使用on绑定点击事件">
	<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

事件切换

jq对象.toggle(fn1, fn2,…) 依次执行(可循环)参数函数
从1.9版本之后，jq不在支持toggle 所以要用migrate(迁移)插件回复此功能

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/jquery-migrate-1.0.0.js"></script>
    <script>
    	//在jq3.3 toggle弃用
    	$(function() {
    		//获取按钮，绑定toggle事件
    		$('#btn').toggle(function() {
    			$('#myDiv').css('backgroundColor', 'green');
    		}, function() {
    			$('#myDiv').css('backgroundColor', 'red');
    		});
    	})
    </script>
</head>
<body>
	
    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
</html>

插件：增强JQuery的功能

实现方式：
- $.fn.extend(对象)
  增强jq对象的功能 $(’#id’).新功能();

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>对象进行方法扩展</title>

    <!-- $('#btn').demo1() -->
    <script src="../js/jquery-3.3.1.js"></script>
   	<script>
   		//使用jq插件,给jq对象添加两个方法,check()选中所有复选框,uncheck()取消选中

   		//1.定义jq对象插件
   		$.fn.extend({
   			check:function() {
   				//选中复选框   this 调用该方法的jq对象
   				this.prop('checked', true);
   			},
   			uncheck:function() {
   				//取消选中复选框
   				this.prop('checked', false);
   			}
   		});

   		$(function() {
   			//获取按钮
   			$('#btn-check').click(function() {
   				//获取所有复选框对象
   				$('input[type="checkbox"]').check();
   			});
   			//复选框对象调用方法

   			$('#btn-uncheck').click(function() {
   				//获取所有复选框对象
   				$('input[type="checkbox"]').uncheck();
   			});
   		})
   	</script>
</head>
<body>
	<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
	<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
	<br/>
	<input type="checkbox" value="football">足球
	<input type="checkbox" value="basketball">篮球
	<input type="checkbox" value="volleyball">排球

</body>
</html>

$.extend(对象)
$.新功能();

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>方法扩展</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
    	//对全局方法进行扩展,max求两个值的最大值, min求两个值的最小值
    	//1.定义插件
    	//$.fn.extend
    	$.extend({
    		max:function(a, b) {
    			return a >= b ? a : b;
    		},
    		min:function(a, b) {
    			return a <= b ? a : b; 
    		}
    	})

    	var max = $.max(4, 5);
    	//alert(max);

    	var min = $.min(4, 5);
    	alert(min);


    </script>
</head>
<body>
</body>
</html>