jquery如何自定义插件(扩展实例/静态方法)

1、jquery插件的种类:
1)、封装对象方法的插件(相当于实例方法) (使用 $.fn.extend({"方法名":function(参数){//方法体} }) )
2)、封装全局函数的插件(相当于$的静态方法)
3)、选择器插件

2、注意点
1)、插件文件命名规范:jquery.[插件名].js
2)、对象方法附加到 jQuery.fn对象上 静态方法附加到jQuery对象本身上
3)、在插件内部,this指向的是选择器获取的jQuery对象,而不是Dom对象
4)、可通过 this.each()来遍历所有元素
5)、插件应当返回一个jQuery对象 保证链式编程 除非插件需要返回一些特定值

//自定义实例插件
$.fn.extend({

"color":function(value){
if (value==undefined) { return this.css("color");}
else
{
return this.css("color",value);
}
}
});

//自定义全局方法插件
$.extend({"sayHello":function(v){
alert("Hello,My Name Is "+v);
}});

// $.extend的另一常用用法 就是将其他对象合并到目标对象上 第一个参数true表示深入拷贝
$.extend(true, target object, object1);

时间: 2024-08-25 02:46:57

jquery如何自定义插件(扩展实例/静态方法)的相关文章

JQuery时间格式化插件--扩展JQuery

(function($){ $.formatDate = function(pattern,date){ //如果不设置,默认为当前时间 if(!date) date = new Date(); if(typeof(date) ==="string"){ if(date=="") date = new Date(); else date = new Date(date.replace(/-/g,"/")); } /*补00*/ var toFix

jquery mobile自定义webapp开发实例(一)——前言篇

用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比较老的版本,用户体验流畅度确实还存在很大的问题,但在我写这一系列的webapp开发实例后,将会解决大部分问题 下面是以后准备写到的一些点: 1:谈谈关于jquery mobile 一些常见问题的解决.(常见问题的解决查看) 2:jquery mobile实现多页面跳转(不是官网上那样把所以的page在一个.html文件内,而是每个page

JQuery如何自定义插件——$.fn的使用

JQuery提供了很多多的插件,粗略一搜,发现还不能用很多来形容: 点了几个看了看,发现都相当精美,web开发需要的更多的是审美,而不是JS,只能说JS只是个基础吧. 简直是开发者的福音啊.但是,这么多插件有时候也并不是都满足我们的需求,比如,有时候我们仅仅需要一个轮船的发动机,现在我们却只有轮船,我们还需要把轮船拆开,或者有的时候我们需要的部件根本没有,这时候,我们就需要自己动手啦. 例如,我以前写过一个Tab控件,现在要把它做成插件,让我们来一起看下这个小Demo: 首先,写单独的JS文件:

jQuery的noConflict以及插件扩展

一.noConflict函数 JavaScript有很多插件,如果jQuery对象的$与其他插件冲突,我们可以使用noConflict()方法去掉$或者使用其他的符号代替 注:noConflict()函数不能调用两次,上面代码是方便向读者展示 二.jQuery的插件扩展 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery 的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQu

Jquery自定义插件

$.fn.extend是一个实例的扩展,但是$.extend是类的扩展 <script type="text/javascript"> (function($){ $.fn.extend({ myPlugName:function(){ $(this).click(function(){ alert($(this).val()); }); } }); })(jQuery); </script> <body> <input type="

你的专属定制——JQuery自定义插件

    前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 那么这次,我就和大家来分享一下JQuery中的一个强大的功能--自

jquery 插件扩展

编写jquery扩展插件 第一步:创建一个js文件 第二步:编写有关代码 jQuery.fn.extend({    ///这个函数是全部选择所有的元素    check: function() {        return this.each(function() { this.checked = true; }); //必须return回一个jquery对象    },    uncheck: function() {        return this.each(function()

深入学习jQuery自定义插件

原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(options); 定义的方式: $.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); //或者是 $.fn.函数名 = function(options){ //这里写插件代码 } 类级别的方法,就是扩展jQuery类本身的方法,为它增加

jQuery插件扩展方法

jQuery为扩展插件提拱了两个方法,分别是: jQuery.extend(object) -- 给jQuery对象添加方法. jQuery.fn.extend(object) -- 为扩展jQuery类本身.为类添加新的方法: fn表示什么呢?下面代码是jQuery源代码中定义的fn: jQuery.fn = jQuery.prototype = { init: function( selector, context ) { //-- }; 从上面代码我们不难看出 jQuery.fn = jQ