jQuery中的插件机制

我们在很多地方都用过插件，插件能让我们操作某个东西变得异常方便，jQuery也不例外，为了扩展jQuery库函数，jQuery提供了两种方式：

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

来看一下例子：

<script>$.extend({min: function(a,b){return a < b ? a : b;},    //注意每个方法之间要用英文逗号隔开max: function(a,b){return a > b ? a : b;}});var min = $.min(5,7);console.log(min);var max = $.max(5,7);console.log(max);
</script>

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

<script>(function($){$.min = function(a,b){ //此处不一样，上面是min : function(){}return a < b ? a : b;},$.max = function(a,b){return a > b ? a : b;}})(jQuery);//传入jQuery对象var min = $.min(5,7);console.log(min);var max = $.max(5,7);console.log(max);
</script>

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

同样来看个例子：

<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"/>乒乓球

<script>$.fn.extend({//该扩展函数用来获取被选中选项的value值values: function(){var result = "";this.each(function(){//此处this指代jQuery对象if(this.checked){result = result + ","+ this.value;//获取到被选中选项的value值}});if(result != ""){//因为上面给每个选中选项的value值前加了一个逗号，result = result.substr(1);//去掉最前面的那个逗号}return result;}});//调用扩展函数var result =  $("[name='hobby']").values();console.log(result);
</script>

同样它的自执行匿名函数的写法为：

<script>(function($){$.fn.values = function(){//此处与上面不一样，上面为 values : funciton(){}var result = "";this.each(function(){if(this.checked){result = result + ","+ this.value;}});if(result != ""){result = result.substr(1);}return result;}})(jQuery); //传入jQuery对象
</script>

jQuery中的插件机制相关推荐

jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
jQuery中的事件机制与DOM操作
jQuery事件机制 jQuery的事件机制,指的是jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定.事件解绑.事件触发. 下面我们先来回顾一下事件的几种类型. 事件描述 c ...
Jquery中日期插件jquery.datepick的使用
jsp的代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 p ...
ajax时间控件,带有ajax的JQuery中的插件datetimepicker出错
我尝试这样做,禁用所有日期并启用我通过参数传递的日期这段代码不起作用 $.ajax({ method: "GET", url: "url", }) .succ ...
JQuery源码分析 - 闭包机制在jQuery中的使用及冲突解决
jQuery中的闭包机制本系列中我们将基于jquery3.5.1版本对jQuery源码进行分析,分析以源码加注释的方式展示. 本节中将分析jQuery源码中的 14 ~ 40行:自执行函数定义.环境 ...
c++插件化 NDD源码的插件机制实现解析
插件机制是一种框架,允许开发人员简单地在应用程序中添加或扩展功能.它使广泛使用,因为它可以作为模块被重复使用,并使它们更易于维护和扩展,因此它们在应用程序中非常有用.插件机制允许管理员在需要时轻松安装 ...
web app中常用插件（zepto--用法类似于jquery、利用nodejs定制zepto）
1.移动端开发不用jquery的原因 jquery使用的优点中很大一个原因是解决了js的兼容性,但是在移动端开发中移动端的浏览器都很新进的浏览器,他的兼容性问题不需要jquery,所以不用考虑兼容性, ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
PHP中插件机制的一种实现方案
插件,亦即Plug-in,是指一类特定的功能模块(通常由第三方开发者实现),它的特点是:当你需要它的时候激活它,不需要它的时候禁用/删除它:且无论是激活还是禁用都不影响系统核心模块的运行,也就是说插 ...

jQuery中的插件机制

jQuery中的插件机制相关推荐

最新文章

热门文章