JQuery入门之each方法与插件机制

最新推荐文章于 2021-10-25 17:37:42 发布

这个名字真难起

最新推荐文章于 2021-10-25 17:37:42 发布

阅读量262

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107709217

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

each(fn)与each(object, [fn])

each([fn])：每个匹配的元素都会执行该函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" />足球
		<input type="checkbox" name="hobby" value="2" />篮球
		<input type="checkbox" name="hobby" value="3" />羽毛球
		
		
		<script>
			$("[name='hobby']").each(function(){//直接通过JQuery对象调用each方法，来遍历该对象内的所有元素
				console.log(this);//此处this为 DOM 对象而非 jQuery 对象
			});
		</script>
	</body>
</html>

结果：
在这里插入图片描述

each(object, [fn])：用于遍历对象（可以是jQuery对象）和数组，其中object表示待遍历的jQuery对象或数组；fn表示每个成员/元素执行的回调函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" />足球
		<input type="checkbox" name="hobby" value="2" />篮球
		<input type="checkbox" name="hobby" value="3" />羽毛球
		
		<script>
			//第一个参数为遍历元素的下标，第二个为遍历
			$.each(['Tom','Jim','Make'], function(i,value){//遍历数组
				console.log(i+":"+value);
			});
			$.each($("[name='hobby']"), function() {//遍历JQuery对象
				console.log(this);
			});
		</script>
	</body>
</html>

结果：
在这里插入图片描述

each(callback)与each(object, [callback])区别总结：
1. 调用对象不同：前者必须使用jQuery对象调用；后者只能使用$调用；
2. 遍历对象不同：前者遍历的是jQuery对象；后者还可以遍历数组等非jQuery对象

插件机制

$.extend(对象)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数，调用时直接$.函数名(参数)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<script>
			//传入一个对象,对象中的函数便会扩展为JQuery中的全局函数
			$.extend({
				min:function(a,b){
					return a<b?a:b;
				},
				max:function(a,b){
					return a>b?a:b;
				},
			});
			
			var min = $.min(1,2);
			console.log(min);
			var max = $.max(1,2);
			console.log(max);
		</script>
	</body>
</html>

结果：
在这里插入图片描述

$.fn.extend(对象)：扩展 jQuery 元素集，主要用于扩展jQuery插件，调用时需要先创建jQuery对象，然后才能调用相应的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		
		<input />
		
		<script>
			//传入一个对象,对象中的函数便会扩展为JQuery中的全局函数
			$.fn.extend({
				min:function(a,b){
					return a<b?a:b;
				},
				max:function(a,b){
					return a>b?a:b;
				},
			});
			//必须通过一个JQuery对象来调用函数
			var min = $("input").min(1,2);
			console.log(min);
			var max = $("input").max(1,2);
			console.log(max);
		</script>
	</body>
</html>