jquery 插件开发方法小结

2016-02-19 15:07 6 1 收藏

下面图老师小编跟大家分享一个简单易学的jquery 插件开发方法小结教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。
代码如下:
jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//.... 
   //......
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
代码如下:
$.extend({
  add:function(a,b){return a+b;}
});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
Java代码
代码如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //页面上为:input id="input1" type="text"/
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //页面上为:input id="input1" type="text"/

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

来源:http://www.tulaoshi.com/n/20160219/1608909.html

延伸阅读
标签: Web开发
1. 每个ui插件现在都有自己单独的css文件,但是要根据情况与ui.theme.css ui.core.css结合使用,否则有些效果还是显示不出来的。 eg. datepicker就必须同时引用上述两个css文件;accordion 只须引入ui.theme.css即可。这个我会把每个插件独立的demo放在我的资源里边的。 2. ui.accordion HTML 代码要遵循一定的格式要求: 代码如下: ul i...
标签: Web开发
DOM操作的分类:DOM CORE(核心)、HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,...
标签: Web开发
//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有thtd元素标签 // $("a") // 表示所有a元素标签 // $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 // ...
标签: Web开发
1。文本框的改变事件,可使用propertychange,例如: 代码如下: $("#txtDataDate").bind("propertychange",function(){ }); 2。获取被选中RadioButton 的值 代码如下: var radio_value = $("input[type=radio][checked]").val(); 3。下拉列表的改变事件,以及获得选中选项的值 代码如下: $("#下拉列表").change(functio...
标签: Web开发
在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在。以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程。如果你正在寻找最新的 jQuery 信息,这些内容值得一读。 教程 1. 在图像画廊载入过程中使用 jQuery 预加载技术。 | 2. 创建一个独特的熔岩灯动画效果的 j...

经验教程

884

收藏

25
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部