jQuery插件开发学习笔记

今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析 更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载。笔者今天详细的阅读了这篇文章并记录了一些笔记。

 

  1.类级别的插件开发

  我是这样理解的:jQuery是类,$是jQuery的别名,$('selector')为jQuery对象

  这种插件类似为jQuery类添加静态的方法,然后我们就可以像在C#中调用静态方法一样使用插件。添加静态方法的途径有两种:

jQuery.alert = function () {
alert("这是一个jQuery的提示框");
}

jQuery.confirm = function () {
confirm("这是一个JQuery的提示框");
}

 

  相应的调用:$.alert(); $.confirm();

  另一种方法的代码如下:

jQuery.extend({
alert: function () { alert("这是一个jQuery的提示框"); },
confirm: function () { confirm("这是一个JQuery的提示框"); }
});

  这种是通过jQuery提供的extend方法进行功能的扩展,调用的方法同上。

  另外,为了避免与其它jQuery插件的冲突,我们可以添加自己的命名空间:

jQuery.sample = {
alert: function () { alert("这是一个jQuery的提示框"); },
confirm: function () { confirm("这是一个JQuery的提示框"); }
};

  添加了命名空间后的调用:$.sample.alert(); $.sample.confirm();

  2.对象级别的插件开发

/*

这种写法的说明:
var fn = function(para){
//code...
}
fn(jQuery);

先定义一个方法,再立即执行这个方法
这种写法的好处:我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

*/
(function ($) {
$.fn.extend({
hilight: function (options) {var opts = $.extend($.fn.hilight.defauts, options);this.css("color", opts.color).css("background-color", opts.bgcolor);
}
});

$.fn.hilight.defauts = {
color: 'red',
bgcolor: 'white'
};
})(jQuery);

  jQuery推荐这种写法,好处就在上面的注释部分。

  在这段代码中我们将defaults暴漏出来,允许用户直接访问并设置defaults值,这样做的好处,是只需要在一处设置默认值以后,别处都可以直接使用,而不用每次传递参数。当然,我们仍然可以传递参数,以改变手工设置的默认值。

  我们还可以通过暴漏defaults的相同方法来暴漏一些可供别人扩展的方法;如果需要将一个方法或属性私有化,只需要在闭包中定义,而不要提供相应的引用。

 

  3.总结

  jQuery为开发插件提拱了两个方法,分别是:

    jQuery.fn.extend(object); 给jQuery对象添加方法。fn 是什么东西呢?原来 jQuery.fn = jQuery.prototype,jQuery.fn.extend(object)是对jQuery.prototype进行的扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

    jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。可以理解为jQuery添加静态方法。

  

  最后提供相应的pdf下载:《jQuery插件开发全解析》

  

 

如果认为此文对您有帮助,别忘了支持一下哦!

作者:齐飞

来源:http://youring2.cnblogs.com/

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/archive/2012/04/05/2433483.html

时间: 2025-01-11 18:55:49

jQuery插件开发学习笔记的相关文章

JQuery中attr属性和jQuery.data()学习笔记【必看】_jquery

用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML_jquery

摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码 .新增一个servlet类 AJAXXMLServer.java 复制代码 代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle

JQUERY新手学习笔记

以下是引用片段:最近JQUERY框架在网上非常流行,也许是因为它的简洁明快而又是轻量级的原因吧,优点主要还是体现在,事件处理,DOM操作,AJAX特性以及动画特效等方面,当然,说起动画处理,我个人认为还是PROPERTY更好一点. 什么是轻量级,也许好多人都在问,这里我就给你一个完整的答案.在本站点有详细说明"什么是轻量级方法?","什么是轻量级容器?",如果你去认真看完了这两个,应该很明白了,如果你是从搞JAVA开发的,那就可以不用看,JAVA里面已经用到了轻量级

Jquery 基础学习笔记之文档处理_jquery

主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值.那我们就开始详细地看一下. 1.内部插入:向一些元素的内部插入内容 (1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如 描述: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello

jquery事件学习笔记(转载)

一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行.有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中.可以给这个参数任意起一个名字,并因此可以

jQuery学习笔记之插件开发(4)

jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用的功能定义为函数,然后绑定到jQuery对象上,从而成为jQuery对象的一个扩展方法. 目前,大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器的优势.有很多jQuery内部方法,也是

Jquery 学习笔记(三)240多个jQuery插件

Jquery 学习笔记(三) -240多个jQuery插件 2009年11月30日二 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQuery 是一个快速的,简洁的 javaScript

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git --------------------学习目录------------------------ 4.DOM操作(节点增删改查) 节点查找:节点分为三种类型:元素节点.属性节点.文本节点 创建节点 创建元素节点 使用 jQuery

Jquery 学习笔记(二)jQuery性能优化指南

Jquery 学习笔记(二) -jQuery性能优化指南 2009年11月30日 一 作者:   邦畿千里   1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯<