摘要

上篇文章简单学习了js自调用方法。今天就趁热打铁,学一学怎么编写一个jquery插件。

JQuery

参考地址:http://www.cnblogs.com/playerlife/archive/2012/05/11/2495269.html

通过JQuery.fn增加一个新的函数来编写JQuery插件,也可以说是在Jquery对象上面扩展一个新的方法。

代码片段:

        jQuery.fn.myPluigin = function () {
//code...
};

似乎这样就可以了,但有个问题,也许你的扩展的方法会和jquery中的方法产生冲突,所以这时候最好用一个 自执行的函数将其包裹起来,并且将JQuery作为参数传进去。所以有了下面的代码:

    (function ($) {
$.fn.myPluigin = function () {
//code...
};
})(jQuery);

通过这种方式,由于闭包的关系,所以和其它地方的并不会产生冲突。

一个简单插件

获取页面上div的最大宽度

<script>
(function ($) {
$.fn.maxWidth = function () {
var max = 0;
//this 指向的是jquery对象
this.each(function () {
//this指向DOM元素,要取到这个dom元素,可以通过$(this)
max = Math.max(max, $(this).width());
});
return max;
};
})(jQuery);
var maxWidth = $("div").maxWidth();
console.log(maxWidth);
</script>

链式

为了使用jquery中链式开发的特性,所以在封装插件的时候,需要返回这个元素供链条上的下一个使用。

    (function ($) {
$.fn.Chain= function (type) { //this 指向的是jquery对象
return this.each(function () {
var $this = $(this);
if (type && type == "width") {
$this.width($this.width());
} });
};
})(jQuery);
$("div").Chain("width").css("color", "red");

因为该插件返回了this,所以你可以继续链式,比如 css()。如果你的插件如果不是返回一个简单值,你通常应该返回this。

默认值选项

在使用插件的过程中,经常可以看到插件有部分的默认值,我们只需传入需要替换的参数即可,就可以对插件进行配置。

    (function ($) {
$.fn.myAlert = function (options) {
var settings = {
"location": "top",
"background-color": "red"
};
console.log('default', settings);
return this.each(function () {
if (options) {
$.extend(settings, options);
console.log('extend', settings);
};
});
};
})(jQuery);
$("div").myAlert({ "location": "center" });

结果

在这个例子中,使用插件后,默认的location被替换为center,而background-color保持原样。这样可以保证高度可配置醒,而不需要开发者定义所有可能的选项了。

命名空间

命名空间的重要性,可以保证你的插件不被其他插件重写,也能避免被页面上其它代码重写。

注意

在任何情况下都不压迫在一个插件中为jQuery.fn增加多个方法。

(function ($) {
$.fn.method1 = function () { };
$.fn.method2 = function () { };
..
$.fn.methodn = function () { };
})(jQuery);

可以这样,将方法放在一个对象里面,然后根据不同的参数进行调用:

    (function ($) {
var methods = {
method1: function (options) { },
method2: function () { },
};
$.fn.myMethod = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else {
//....
}
}
})(jQuery);

[Js/Jquery]jquery插件开发的更多相关文章

  1. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  2. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  3. label用js,jquery取值赋值,以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  4. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  5. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  6. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. js+html+jquery 个人笔记

    js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...

  9. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  10. Python之路【第十二篇】前端之js&dome&jQuery

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

随机推荐

  1. 【BZOJ-1552&3506】robotic sort&排序机械臂 Splay

    1552: [Cerc2007]robotic sort Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 806  Solved: 329[Submit][ ...

  2. Access restriction: The type 'BASE64Encoder' is not API

    问题的原因好像是这个方法不是安全的,所以不推荐使用,我是在做毕设时要用到的所以就直接用了(毕设要求没有那么严格的要求)

  3. HDU2203 亲和串

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. 在打开vs解决方案时,怎样让所以打开的项目自动折叠

    使用VS 2010中的扩展性,搜PowerCommands,PowerCommands扩展在Visual Studio 2010中添加了数十个有用的的命令, Collapse Projects(折叠项 ...

  5. Linux Dynamic Shared Library && LD Linker

    目录 . 动态链接的意义 . 地址无关代码: PIC . 延迟版定(PLT Procedure Linkage Table) . 动态链接相关结构 . 动态链接的步骤和实现 . Linux动态链接器实 ...

  6. Unity3d5.0 新UI之2048

    因为汽车系统没写出来所以,纠结之中,弄了弄新版本的UI. 做了个2048. 新版本的unity的UI必须以Canvas为基底来呈现,如果没有加画布的话可是显示不出来东西的哦. 而且作为UI上的所有组件 ...

  7. 连续赋值与求值顺序var a = {n:1};a.x = a = {n:2}; alert(a.x);

    代码如下: <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined ...

  8. CF 268E Playlist(贪心)

    题目链接: 传送门 Playlist time limit per test:1 second     memory limit per test:256 megabytes Description ...

  9. 【Alpha阶段】第7.5次Scrum例会

    会议信息 时间:2016.10.31 21:30 时长:10min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.11.01 21:30 个人任务报告 姓名 今日已完成Is ...

  10. js实现身份证号码验证

    /*根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数 ...