【jQuery】jQuery插件机制

最新推荐文章于 2020-07-31 12:48:28 发布

景谦Nice

最新推荐文章于 2020-07-31 12:48:28 发布

阅读量100

点赞数

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

本文链接：https://blog.csdn.net/qq_43705275/article/details/103313611

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery.extend(object)</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<script type="text/javascript">
			jQuery.extend({
				//求两个数的最大值
				max:function(x,y){
					return x > y? x: y;
				},
				//求两个数的最小值
				min:function(x,y){
					return x < y? x: y;
				}
			});
			//测试上面扩展的jQuery全局函数
			alert($.max(12,23));
		</script>
	</body>
</html>

在网页中运行结果如下：
在这里插入图片描述

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery.extend(object)</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<form>
			<p>请选择您的性别：</p>
			<input type="radio" name="gender" value="男" />男<br />
			<input type="radio" name="gender" value="女" />女<br />
			<input type="button" value="确认" onclick="t()" />
		</form>
		<script type="text/javascript">
			jQuery.fn.extend({
				//为该匿名对象的属性values赋值一个匿名函数，并将此匿名对象添加到jQuery中
				values:function(){
					var gender = "您未选择性别";
					this.each(function(){
						if(this.checked){
							gender ="您的性别是" + this.value;
						}
					});
					return gender;
				}
			});
			function t(){
				var gender = $("[type='radio']").values();
				alert(gender);
			}
			</script>
	</body>
</html>

在浏览器中运行该程序，并点击“确认”按钮会出现下面的提示：
在这里插入图片描述
当选择“女”并点击确认会出现下面的提示：

景谦Nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】jQuery插件机制

jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数，调用时直接$.函数名(参数)，如下例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery.extend(object)</titl...
复制链接

扫一扫