jquery插件开发预学习
2014-11-20 14:25
239 查看
//是为学习的铺垫
Part 1
开发插件的两个很好的工具
在js中给一些类(严格的说并不是类)如Object、Function、Number、String等的原型prototype添加某个方法,那么它们的实例后代们都将具有该方法,一个栗子:
好了,类似的原理迁移到jQuery上是怎样呢?
jQuery为开发插件提拱了两个很好的方法:jQuery.extend({})和jQuery.fn.extend({}),其中jQuery是等同于$符号,所以写作$.extend({})和$.fn.extend({})也是ok的。
如同js中的Object、Function这些“类”一样,jQuery也是一个类,$("#go")
会生成一个 jQuery类的实例,这与js中用document.getElementById('go')生成一个Object类的实例是一个道理。所以上述js可以改成jQuery:
$.extend({})为jQuery类扩展方法,$("selector")生出的实例并不继承该方法,就像js中给Object类添加方法一样:
所以这里杀出了这样一个用法:用一个或多个其他对象来扩展默认对象——这个给插件提供了可配置参数的能力,后面有巧妙的应用。
jQuery.fn.extend({});
对jQuery.prototype进得扩展,为jQuery类添加“成员函数,jQuery类的实例$("selector")这回就可以使用这个“成员函数”了。
Part 2 插件开发的模子
Part 1讲了工具了,这里继续讲下模子——即一个基础的插件长啥样。
更多功能代码部分,那就需要你根据实际去发挥了。~~~
但什么叫插件,不可能只插入一次就不用了的,所以在针对性上也尽可能的通用一些,那么留出的接口就要多加考虑了。好了,从上面的模子好像并不能看出插件有多方便,现在用一用,你就造有多轻便了。
这个插件你可以绑定在任何jQuery对象上,并赋予任何一种事件让它在触发时,显示一段内容。
最后,如果你和我一样是新手,那就弄几个小插件试试,然后再深入了解下2工具$.extend( ) 和$.fn.extend( )吧
Part 1
开发插件的两个很好的工具
在js中给一些类(严格的说并不是类)如Object、Function、Number、String等的原型prototype添加某个方法,那么它们的实例后代们都将具有该方法,一个栗子:
<a id="go" href="#test" name="test">Basic</a> //HTML部分
Object.prototype.showNodeName = function(){ this.onclick=function() { alert(this.nodeName); }; return false; } document.getElementById('go').showNodeName(); //A上例中,给Object对象添加了showNodeName的方法,那么它们的后代都可以调用这个方法。因为document.getElementById("go")获取出来的也是一个对象,所以这个对象可以直接调用上述方法。
好了,类似的原理迁移到jQuery上是怎样呢?
jQuery为开发插件提拱了两个很好的方法:jQuery.extend({})和jQuery.fn.extend({}),其中jQuery是等同于$符号,所以写作$.extend({})和$.fn.extend({})也是ok的。
如同js中的Object、Function这些“类”一样,jQuery也是一个类,$("#go")
会生成一个 jQuery类的实例,这与js中用document.getElementById('go')生成一个Object类的实例是一个道理。所以上述js可以改成jQuery:
$.fn.extend({ showNodeName:function(){ $(this).click(function(){ alert($(this)[0].tagName); }); return false; } }) $('#go').showNodeName();再回过头来,$.extend({})和$.fn.extend({})分别是什么?先说$.extend({}):
$.extend({})为jQuery类扩展方法,$("selector")生出的实例并不继承该方法,就像js中给Object类添加方法一样:
$.extend({ max:function(a,b){return alert(x=a>b?a:b)} }) $.max(22,11); //22既然能为jQuery类扩展方法,那么是否有对jQuery对象进行扩展呢?
jQueryobj.extend(defaults_obj,reset_obj1,reset_obj2[,reset_objn]); //默认对象,重置对象
所以这里杀出了这样一个用法:用一个或多个其他对象来扩展默认对象——这个给插件提供了可配置参数的能力,后面有巧妙的应用。
jQuery.fn.extend({});
对jQuery.prototype进得扩展,为jQuery类添加“成员函数,jQuery类的实例$("selector")这回就可以使用这个“成员函数”了。
Part 2 插件开发的模子
Part 1讲了工具了,这里继续讲下模子——即一个基础的插件长啥样。
//step 1 : 定义插件
$(function() { $.fn.插件名称 = function(options) {
//设置默认参数,这将成为该插件投放出来的接口 var defaults = { Event : "click", //触发响应事件 msg : "Holle word!" //显示内容 }; var options = $.extend(defaults,options); //这就是Part 1讲的给jQuery对象做重置 var $this = $(this); //you know this,,事件要响应在哪个对象元素上 //更多功能代码部分 //绑定事件 $this.live(options.Event,function(e){ //live绑定 alert(options.msg); }); } });
更多功能代码部分,那就需要你根据实际去发挥了。~~~
但什么叫插件,不可能只插入一次就不用了的,所以在针对性上也尽可能的通用一些,那么留出的接口就要多加考虑了。好了,从上面的模子好像并不能看出插件有多方便,现在用一用,你就造有多轻便了。
step 2 : 调用插件
<pre class="html" name="code"><a id="go" href="#test" name="test">Basic</a> //HTML部分
$(function() { //绑定元素事件 $("#go").插件名称({ Event : "click", //点击鼠标,触发事件 msg : "你想在这里显示神马?" //显示内容 }); });
//$("#go").插件名称(options)就相当于一个对象,执行一个方法 so easy~
这个插件你可以绑定在任何jQuery对象上,并赋予任何一种事件让它在触发时,显示一段内容。
最后,如果你和我一样是新手,那就弄几个小插件试试,然后再深入了解下2工具$.extend( ) 和$.fn.extend( )吧
相关文章推荐
- 学习从实践开始之jQuery插件开发 对话框插件开发
- Jquery插件开发学习
- jquery插件开发学习笔记(三)
- 学习jQuery插件开发
- 学习从实践开始之jQuery插件开发 菜单插件开发
- 学习从实践开始之jQuery插件开发 菜单插件开发
- jQuery学习之插件开发
- jquery插件开发学习笔记(四)——导航栏特效
- JavaScript学习总结(四)——jQuery插件开发与发布
- 学习从实践开始之jQuery插件开发 对话框插件开发
- jQuery插件开发学习(1)
- jQuery插件开发 学习笔记
- 【jQuery学习笔记----jQuery插件开发】
- jquery插件开发学习笔记(五)——动态选择触发器
- jQuery 学习第七课 扩展jQuery的功能 插件开发
- 【转载】【JQuery学习】jQuery插件开发
- jQuery学习笔记之插件开发(4)
- jQuery学习笔记之插件开发(4)
- JQuery插件开发学习
- jquery插件开发学习笔记(六)——页面平滑滚动