jQuery插件学习(一)

由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了。所以这段时间会对插件进行一些研究,现将学习的一些重要内容记录下来,供那些像我一样的初学者借鉴下。嘻嘻。

(一)jQuery为开发插件提拱了两个方法

jQuery.extend(); 为扩展jQuery类本身.为类添加新的方法;

jQuery.fn.extend();给jQuery对象添加方法;

它们之间的区别是:jQuery是一个类,jQuery.extend(),是扩展的jQuery这个类,变成了jQuery这个类本身的方法,这个扩展也就是所谓的静态方法。

只跟这个类本身有关。跟你具体的实例化对象是没关系滴。

例如:

(function($) {

$.extend({ 
                              minValue : function(a,b){ 
                              return a>b? b:a; 
                            }

})

})(jQuery);

要调用这个方法:$.minValue(2,3);

jQuery.fn.extend拓展的是jQuery对象(原型的)的方法,原型的作用就是给这个类的每一个对象都添加一个统一的方法,对象是啥?就是类的实例化嘛,例如

$("#abc") 就是一个实例化的jQuery对象。假设xyz()是拓展的方法:$(‘selector‘).xyz();要是这么用$.xyz();是会出错滴。

jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax(),$.getScript(url,callback) 这些jQuery自带的方法这种,大部分插件都是用jQuery.fn.extend()。

附插件框架:

(function($){

$.fn.yourPluginName = function(options){

//各种属性和参数

var defaults = { } ;

var options = $.extend(defaults, options);

return this.each(function(){

//插件的实现代码

});

};

})(jQuery);

return this.each()中return的作用:each()方法返回jQuery对象,所以这样就可以继续链式操作了。

 (二)jQuery中的this和$(this)

             this其实是指向dom对象或当前元素,$(this)是jquery对象,当你用的方法是jquery时,就用$(this),如果是JS方法,就用this。

例如:

var node = $(‘#id‘);

node.click(function(){

              this.css(‘display‘,‘block‘);     //报错   this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法

             $(this).css(‘display‘,‘block‘); //正确  $(this)是一个jquery对象,不是html元素,可以用css()方法

             this.style.display = ‘block‘;   //正确   this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性

});

时间: 2024-10-12 07:30:40

jQuery插件学习(一)的相关文章

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

jquery插件学习相关(1)

jQuery插件机制 jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()方法 jQuery.fn.extend()用于封装对象方法插件 jQuery.extend()用于封装全局函数的插件和选择器插件,同时也可扩展已有的Object对象. jQuery.extend() jQuery.extend(target,obj1...objN) 常用于设置插件方法的一系列默认参数 function foo(option){ opt

JQUERY插件学习之jQuery UI

jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome. 组件构成 jQuery UI 主要分为3个部分:交互.微件和效果

jquery插件 - 学习笔记 (插件参数及函数的调用)

今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></script>$.ImageZoom({ imageSelector: ".imgBox img", //图片选择器 wrapSelector: ".list-images", //层选择器 allowCustomeZoom: true, //允许手动缩放 spe

Jquery 插件学习笔记

Jquery 插件 1表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

jQuery插件学习基础

1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个全局函数') } } $(function(){ $.zgz.fn1(); $.zgz.fn2(); }) 2.给jQuery添加拓展函数方法一: $.fn.zgz=function() { alert(this.length) } $(function(){ $('oDiv').zgz(); })

jQuery插件学习之选项卡Tab

在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel tabs-3-panel MyUI-tabs 创建选项卡组件 使用方法: html结构 <div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li>

Jquery 插件初学习

参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己觉得当学习一样东西的时候,学习一些基础,在以后使用到的时候,再去根据实际情况好好的专研,提升自己的能力.这个也只是个人的一个学习方法,有更好的欢迎推荐哈. 所以,下面的这个jquery的插件写法,真心是基础到不行不行的...(*^__^*) css部分: #my_alert{line-height:

jquery插件编写学习小结

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. 一.插件的种类 jQuery的插件主要分为3种类型. 1.封装对象方法的插件 2.封装全局函数的插件 3.选择器插件 这里我们主要讨论第一种插件的开发流程. 封装对象方法的插件: 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件,有95%以上的插件都是这种类型的插件. 二.插件的基本要点 1.所有对象方法都应当附加到jQuery.fn上,而所