jQuery 扩展机制

最新推荐文章于 2020-07-31 11:24:41 发布

梦忆长安

最新推荐文章于 2020-07-31 11:24:41 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/qq_44971038/article/details/103332630

版权

jQuery中的函数虽然很全，但并不是我们需要的每一个函数在jQuery中都能找到，如果没有的话就需要我们自己手动定义；因此这篇博客就介绍下jQuery扩展的两种方法；

jQuery.extend()

直接扩展，采用 $.函数名调用方法，不需要引用对象（既是优点也是缺点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<script>
			jQuery.extend({
				min:function(a,b){
					return a>b?b:a;
				},
				max:function(a,b){
					return a>b?a:b;
				}	
			})
			console.log($.max(1,2));
			console.log($.min(1,2));
		</script>	
	</body>
</html>

jQuery.extend() 添加函数的形式和初始化式创建对象一样，采用 key:value 的形式，各函数之间用逗号隔开；前者是函数名，后者是方法；在上例中我们就定义了两个函数，分别是计算输出（在控制台输出）最大值和最小值；调用结果如下：

jQuery.fn.extend()

该形式添加的函数与上面的函数不同的是该形式添加的函数使用时是和对象绑定的，和对象一起使用，例子如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			<input type="checkbox" name="hobby" value="1" />篮球
			<input type="checkbox" name="hobby" value="2" />足球
			<input type="checkbox" name="hobby" value="3" />网球
			<input type="checkbox" name="hobby" value="4" />铅球
			
			<input type="button" onclick="test()" value="已选择框的值" />
		</form>
		<script>
			function test(){
				var element= $("[name='hobby']").values();
				alert(element);
			}
			jQuery.fn.extend({
				values:function(){
					var numbers="";
					this.each(function(){
						if(this.checked){
							numbers=numbers+","+this.value;
						}
					})
					numbers=numbers==""?numbers:numbers.substr(1);
					return numbers;
				}
			})
		</script>
	</body>
</html>

这里以显示多选框中被选中的选项的 value 值为例；先定义一个具有四个选项的多选，然后使用jquery.fn.exetend() 定义一个函数 values()；该函数的作用是找出被选中的选项，将被选中的选项的value值添加到字符串 numbers 中，然后返回 numbers；很简单的一个函数；然后再定义一个方法test() 调用该函数，并在提示框内显示该函数的返回值；点击按钮，效果如下：

梦忆长安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 扩展机制

jQuery中的函数虽然很全，但并不是我们需要的每一个函数在jQuery中都能找到，如果没有的话就需要我们自己手动定义；因此这篇博客就介绍下jQuery扩展的两种方法；jQuery.extend()直接扩展，采用 $.函数名调用方法，不需要引用对象（既是优点也是缺点）<!DOCTYPE html><html> <head> <met...
复制链接

扫一扫