jQuery插件通用写法

参考网址:http://www.cnblogs.com/wayou/p/jquery_plugin_tutorial.html

完整插件demo:

/   **

* 表格隔行变字体颜色和背景颜色,鼠标移入移出变字体颜色

*

* HTML页面调用方法:

* $(function(){

*     $("table").ChangeWordColor({

*         oddWd:"blue"

*     }).ChangeBgColor({

*         oddBg:"purple"

*     });

*  })

*   /

;(function($){

$.fn.extend({

//变字体颜色

"ChangeWordColor":function(options){

options = $.extend({   //默认属性

oddWd:"red",

evenWd:"green",

selectsWd:"yellow",

noselectsWd:"#000"

},options);   //如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。

return this.each(function(){   //return代表支持链式操作,可选

var thisTable = $(this);

//添加奇偶行颜色

thisTable.find("tr:even").css("color",options.evenWd);

thisTable.find("tr:odd").css("color",options.oddWd);

//添加活动行颜色

thisTable.find("tr").on({

mouseover:function(){$(this).css("color",options.selectsWd);},

mouseout:function(){$(this).css("color",options.noselectsWd);}

});

});

},

//变背景颜色

"ChangeBgColor":function(options){

options = $.extend({

oddBg:"pink",

evenBg:"orange",

},options);

return this.each(function(){

var thisTable = $(this);

//添加奇偶行背景颜色

thisTable.find("tr:even").css("background-color",options.evenBg);

thisTable.find("tr:odd").css("background-color",options.oddBg);

});

},

});

})(jQuery);

通过$.fn向jQuery添加操作DOM插件:

$.fn.disable = function(){

return this.each(function(){

if(this.disabled != null)  this.disabled = true;

});

}

通过$.extend()来扩展jQuery的静态方法:

$.extend({

sayHello: function(name) {

console.log(‘Hello,‘ + (name ? name : ‘Dude‘) + ‘!‘);

}

})

$.sayHello(); //调用

$.sayHello(‘Wayou‘); //带参调用

补充:jQuery on()方法:

1.单事件操作:

$("body").on("click",function(){

$(this).css("background-color","red");

});

2.多个事件绑定同一个函数:

$("body").on("mouseover mouseout",function(){

$(this).toggleClass("intro");

});

3.多个事件绑定不同函数:

$("body").on({

mouseover:function(){$(this).css("background-color","red");},

mouseout:function(){$(this).css("background-color","blue");}

});

时间: 2024-10-11 02:25:16

jQuery插件通用写法的相关文章

闭包,jQuery插件的写法:图片预加载

最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进行冲突 ( function (通过它来接收对象) { } )( 通过它来传递对象 ); //可以使用jQuery的$符号的闭包插件的写法: //写插件的常用方法 $.extentd() (function ($){ //构造函数 function PreLoad(imgs,options){ th

JQuery插件的写法和规范

首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面(或.aspx页面),页面上放置了一个5行3列的表格,即:<table></table>标记,具体代码如下: <tableid="newTable"> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1<

jquery插件的写法

一.JQuery的插件主要分为3种: 1.封装对象方法的插件. 如JQuery的parent()方法,appendTo()方法,addClass()方法等. 2.封装全局函数的插件. 如JQuery.ajax(),JQuery.trim()方法 3.选择器插件. 二.JQuery的插件机制: i.JQuery提供了两个用于扩展JQuery功能的方法,jQuery.fn.extend()方法和jQuery.extend()方法.前者用于扩展前面的提到的第一种插件,后者用于扩展后两种插件.这两个方法

jQuery插件的点点滴滴

说起jQuery插件,很多人的脑海种已经有了一定的雏形,仿佛感觉仅仅就是那样子,事实呢?当你看了Bootstrap.js,品读了slidesjs,观摩了jquery.cycle2.js,不禁发现,原来插件的世界千变万化,细微之处总是不容易让人发觉,世界那么大,那么我们就一起去看看它到底长什么样子? 工欲善其事必先利其器,如果你对于jQuery插件运用熟练的话,那么对已$.extend,你一定要去了解!,下面我们就先对$.extend来个剖析!先看看你对于$.extend的几种形式! 一.$.ex

写了一个简单的jquery插件(初恋啊)

用了好久的jquery了,却没有写过插件,今天研究了一个别人的插件和一些文章,总算搞清楚了jquery插件一些写法, 代码写了一个div当鼠标事件发生时的宽高变化情况,基础,代码基础,基础好了,才能研究深入的东西. 1 (function(jQuery){ 2 /* 3 * 插件应该返回一个JQuery对象,以便保证插件的可链式操作. 4 * JQuery插件的机制:jQuery提供了2个用于扩展jQuery功能的方法 5 * jQuery.fn.extend() 6 * jQuery.exte

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种

jquery插件写法

下面的文章是我复制粘贴的,是学习jquery插件写法时搜到的好的教程.谢谢这些人写的博客,为表示尊重,我将博客的地址也粘贴出来,希望可以帮到其他人. -----------------------------------------------------分割线--------------------------------------------------------------------------------------------------- JQuery插件写法的总结 最近Web

jquery 扩展和插件的写法

1.jquery扩展的方法常用的就是$.fn.xxx, 这个我理解的其实扩展jquery 实例中的属性或者方法 (function ($) { $.fn.alertSelf = function () { $(this).on('click',function () { alert( $(this).html() ); }) } })(jQuery); 这个扩展jquery实例中的方法,使用方法$("#idxx").alertSelef() 给某个节点添加了一个绑定弹出自身内容的方法

【jQuery】学习jQuery插件的使用与写法(表单验证插件-validation)

最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示:实时验证. 三种不同的写法 1.1 确认哪个表单需要被验证,引入jquery.validate.js插件 <script type="text/javascript"> $(document).ready(function(){ $("#commentForm&qu