jquery插件开发预学习
来源:互联网 发布:网络名字大全女孩四字 编辑:程序博客网 时间:2024/04/30 12:38
//是为学习的铺垫
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插件开发学习(1)
- jQuery插件开发 学习笔记
- jQuery学习之插件开发
- 【jQuery学习笔记----jQuery插件开发】
- jquery 插件开发学习1
- jquery插件开发学习笔记(一)
- jquery插件开发学习笔记(二)
- JQuery插件开发 + 插件
- jQuery 学习第七课 扩展jQuery的功能 插件开发
- Jquery系列---Jquery插件开发
- 【jquery】jquery插件的开发
- 【jQuery】jQuery自定义插件开发
- jQuery插件开发-(function($){...})(jQuery)
- jquery开发:jquery插件编写
- jquery 插件开发小组
- C语言 冒泡法数组排序
- TCP/IP 三次握手
- andbase中sqlite的orm框架litepal支持Bitmap存储
- c# 中的Equals()和==有什么区别?
- 换窝了。。。http://yaozeping.com
- jquery插件开发预学习
- SQL语言学习小结(二)
- 浅谈多态~
- 第13周项目1(2)
- Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)
- iOS8苹果审核新规则
- 第十三周 项目1-3
- android IOS 开发交流群
- linux下tomcat内存溢出