JQuery入门之each方法与插件机制
程序员文章站
2024-03-05 13:08:24
...
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])区别总结：
- 调用对象不同：前者必须使用jQuery对象调用；后者只能使用$调用；
- 遍历对象不同：前者遍历的是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>
结果：