jQuery插件机制

最新推荐文章于 2022-11-21 21:24:56 发布
最新推荐文章于 2022-11-21 21:24:56 发布
阅读量162 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miaosanpi/article/details/108239820
版权

为了扩展jQuery库函数，jQuery提供了两种方式：
1、jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数 ，调用时直接$.函数名(参数)，如下例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插件机制</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$.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>
	</head>
	<body>
	</body>
</html>

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

代码1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插件机制</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$.fn.extend({
				values: function() {//获取选中复选框value属性的属性值
					var result = "";
					this.each(function() {
						if(this.checked){
							result =result+ ","+this.value;
						}
					});
					if(result != ""){
						result = result.substr(1);
					}
					return result;
				}
			});
			$(function(){
				var result = $("input[type=checkbox]").values();
				console.log(result);
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" checked="checked"/>足球
		<input type="checkbox" name="hobby" value="2"/>篮球
		<input type="checkbox" name="hobby" value="3" checked="checked"/>乒乓球
	</body>
</html>

代码2：
<!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" id="hobby" />足球 <input type="checkbox" id="hobby" />篮球
		<script type="text/javascript">
			jQuery.fn.extend({
				check: function() {
					return this.each(function() {
						this.checked = true;
					});
				},
				uncheck: function() {
					return this.each(function() {
						this.checked = false;
					});
				}
			});

			$("input[id=hobby]").check();
		</script>
	</body>
</html>

为了避免自己定义的函数或者变量与外部冲突，对JQuery函数的扩展一般写在自执行匿名函数中。
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插件机制</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
			(function($) {
				$.min = function(a, b) {
					return a < b ? a : b;
				}
				$.max = function(a, b) {
					return a > b ? a : b;
				}
			})(jQuery)
			var min = $.min(1, 2);
			console.log(min);
			var max = $.max(1, 2);
			console.log(max);
		</script>
	</head>
	<body>
	</body>
</html>

代码1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插件机制</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			(function($) {
				$.fn.values=function() {//获取选中复选框value属性的属性值
					var result = "";
					this.each(function() {
						if(this.checked){
							result =result+ ","+this.value;
						}
					});
					if(result != ""){
						result = result.substr(1);
					}
					return result;
				}
			})(jQuery)
			$(function(){
				var result = $("input[type=checkbox]").values();
				console.log(result);
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" checked="checked"/>足球
		<input type="checkbox" name="hobby" value="2"/>篮球
		<input type="checkbox" name="hobby" value="3" checked="checked"/>乒乓球
	</body>
</html>

代码2：
<!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" id="hobby" />足球 <input type="checkbox" id="hobby" />篮球
		<script type="text/javascript">
			(function($) {
				$.fn.check=function() {
					return this.each(function() {
						this.checked = true;
					});
				}
				$.fn.uncheck=function() {
					return this.each(function() {
						this.checked = false;
					});
				}
			})(jQuery)
			$("input[id=hobby]").check();
		</script>
	</body>
</html>
pi5458
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
四、jQuery插件（一） - 自定义插件（插件库的原理）
weixin_45602227的博客
09-21 294
二、自定义插件 jQuery.extend(object) 扩展jQuery函数的API jQuery.fn.extend(object) 扩展jQuery实例对象的API 注意: 1) object指的是js实例对象。 2) 继承相关API，传入js实例对象，js实例对象中的函数中this指的是jQuery实例对象。 jQuery其他API，传入的
jquery 插件实现机制和原理
gyq04551的博客
05-29 2100
/* * jQuery插件实现机制： * 就是给原型添加一些功能方法。 * */ // 沿用了1.7的版本 (function( w ) { // 对外暴露的工厂函数 function jQuery() { return new jQ...
jquery的插件机制
e32e2e的博客
02-07 246
参考文章： https://mart.coding.net/projects        http://www.jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0628/290.html  jQuery.extend() 为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法 1.
JQuery插件机制
派拉斯兔子的博客
06-17 130
插件：增强JQuery的功能 实现方式： $.fn.extend(object) 增强通过Jquery获取的对象的功能，如：$("#id") $.extend(object) 增强JQeury对象自身的功能，如：$/jQuery
jQuery插件原来如此简单 jQuery插件的机制及实战
10-28
种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件
自己动手手写jQuery插件总结
12-09
jQuery是继Prototype之后的又一款优秀的JavaScript框架，深受广大开发者热爱，用户...之后就一直想要书写一款jQuery插件，来简单实现自己的一个小功能。 如上图所示，插件实现的功能是当鼠标位于某个链接其上时候，链
jquery事件机制扩展插件 jquery鼠标右键事件
12-09
因为最近技术长进缓慢，也没高手带，只能靠自己了，所以想仿个WEBQQ来锻炼下自己。...这里通过编写jquery插件的形式扩展，让这个方法可以直接使用$().rightClick();来使用。 jQuery的插件主要分3种类型 1.封装对象方法
jQuery 插件机制
Q_GQ_COM的博客
09-06 262
简介：利用jquery提供的$.fn.extend()和$.extend(),方法，扩展 $.extend(),扩展jquery的类方法 作用：1.合并对象 var a = {sid:12};  var b = {"name":"ls"};//后面加到前面，属性相同的后面覆盖前面的属性  console.log($.extend(a,b)); 2.扩展jquery类方法 var meth...
jQuery插件原来如此简单——jQuery插件的机制及实战
weixin_33782386的博客
02-05 105
jQuery插件的种类 1、封装对象方法 　　这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法，appendTo()方法等。 2、封装全局函数 　　可以将独立的函数加到jQuer...
vue.js中的插件机制 - Vue.use() & install()
weixin_57446003的博客
11-21 968
vue.js 中的插件机制
【jQuery】jQuery插件机制
景谦Nice的博客
11-29 100
jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数 ，调用时直接$.函数名(参数)，如下例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery.extend(object)</titl...
jQuery插件防冲突原理
wujimiao的专栏
05-16 1992
说到jQuery插件，bootstrap的jQuery插件名声在外，当然主要原因是bootstrap框架被很多人喜爱，学习，并不是因为他的js插件功能强大，比它强大好用的jQuery很多！不过对于插件，眼前成熟做法都会在结尾那里加上防止变量名冲突，也就是不要让别的插件覆盖自己插件，导致程序出错。 最开始便是jQuery的noConflict()函数，之后大部分插件都会加上这个函数。很多人可能会问
原生JS插件（超详细）
weixin_33772645的博客
04-25 4338
作为一个前端er，如果不会写一个小插件，都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库，否则装得不够高端。那么，如何才能装起来让自己看起来逼格更高呢？当然是利用js纯原生的写法啦。以前一直说，掌握了js原生，就基本上可以解决前端的所有脚本交互工作了，这话大体上是有些浮夸了。不过，也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的...
jQuery插件开发模式（组件封装）
沐枫
09-25 7535
在项目开发过程中，由于jQuery有较好的实用性，所以都用得非常多，而在项目开发时，某个功能（代码）使用很频繁被多个地方调用，那么就可以借助jQuery插件提供的组件封装方法高，来封装一些使用频率较的功能。 JQuery中组件开发方式主要有两种： 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 还有 $.widget()
jquery插件内部方法
最新发布
05-09
jQuery插件不仅提供了各种丰富的功能，还提供了各种机制来使其更加灵活和可定制。其中之一就是插件内部方法。 插件内部方法是插件作者在插件编写过程中加入的私有方法，这些方法一般只能被插件内部的方法所调用，而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值