1.1JQuery的插件分为3中类型:
(1)封装对象方法的插件(也就是对象级别的开发)
这种类型的插件是我们今天需要讲的插件。
(2)封装全局函数的插件(类级别开发)
指可以把独立的函数添加到JQuery命名空间之下。
jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); };
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
使用命名空间
jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter, which is "' + param + '".'); } };
$.myPlugin.foo();
$.myPlugin.bar('baz');
二.第一个Jquery插件
(function ($) { $.fn.myPlugin = function () { this.fadeOut('normal'); }; })(jQuery);
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="MyPlugin.js" type="text/javascript"></script> js代码: <script type="text/javascript"> $(document).ready(function () { $("#btn1").click(function () { $("#div1").myPlugin(); }); }); </script>
三.插件运用在多个元素控件中。
(function ($) { $.fn.hoverElement = function () { this.each(function () { $(this).hover( function () { $(this).addClass("Add"); }, function () { $(this).removeClass("Remove"); } ); }) } })(jQuery);
HTML的代码是:
<div class="hoverText"> First Button.. </div> <div class="hoverText"> Second Button.. </div> <div class="hoverText"> Third Button.. </div>
JS 代码:
<script type="text/javascript"> $(document).ready(function () { $(".hoverText").hoverElement(); }); </script>
3.2 链式操作
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
就是能在当前的元素后面通过“.” 来实施更多的操作。这个动作特别的潇洒。
那我们要怎么才能实现这种效果呢?很简单,我能只需要把对象回去就可以了。请注意上面的第六点:插件应该返回一个JQuery对象,以便保证插件的可链式操作。
我们依旧看刚刚的例子:
(function ($) { $.fn.hoverElement = function () { return this.each(function () { $(this).hover( function () { $(this).addClass("Add"); }, function () { $(this).removeClass("Remove"); } ); }) } })(jQuery);
$(document).ready(function () { $(".hoverText").hoverElement().css("color","yellow"); });
四 自定义自己的插件
(function ($) { $.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。 var defaultVal = { Text: 'Your mouse is over', ForeColor: 'red', BackColor: 'gray' }; //默认值 var obj = $.extend(defaultVal, options); return this.each(function () { var selObject = $(this);//获取当前对象 var oldText = selObject.text();//获取当前对象的text值 var oldBgColor = selObject.css("background-color");//获取当前对象的背景色 var oldColor = selObject.css("color");//获取当前对象的字体的颜色 selObject.hover(function () {//定义一个hover方法。 selObject.text(obj.Text);//进行赋值 selObject.css("background-color", obj.BackColor);//进行赋值 selObject.css("color", obj.ForeColor);//进行赋值 }, function () { selObject.text(oldText); selObject.css("background-color", oldBgColor); selObject.css("color", oldColor); } ); }); } })(jQuery);
HTML code: . 代码如下: <div id="div1" class="textBar"> Mouse over here..... </div> <div id="div2" class="textBar"> Mouse over here..... </div>
JS Code: . 代码如下: $(document).ready(function () { $('#div1').textHover({ Text: 'I am going to over..', ForeColor: 'yellow', BackColor: 'Red' }); $('#div2').textHover({ Text: 'I am second div...' }); });
相关推荐
是自己总结的jQuery的插件开发,总体来说还是非常不错的
在这篇快速的jQuery插件开发教程中,我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果,可以用在标题,logo及其幻灯效果中。
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jquery 插件开发 jquery 插件开发教程 jquery 插件开发 jquery 插件开发教程
Jquery插件开发教程文档!开发出自己的jquery插件
根据慕课网tab选项卡插件开发教程,自己做了稍微改动,当然作为jQuery插件,里面并没有扩展,也没有全局变量防止冲突处理,对于结构类名也没有做处理
本文详细介绍基于jQuery开发插件的方式及步骤,其中附有代码和说明,是jq插件开发的入门教程。jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); 给jQuery对象添加方法。 jQuery.extend(object);...
[精华]网站论坛源码C# Jquery,完全自制,有很多jquery自己写的插件[精华]网站论坛源码C# Jquery,完全自制,有很多jquery自己写的插件
主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下
jquery的开发教程 入门到精通 包括jquery插件开发的技术
详细介绍了如何开发jquery插件。包括类级别的插件开发和对象级别的插件开发。。。。
《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写jQuery插件。值得一提的是,本版新增的附录D分门别类地列出了所有jQuery API,为高效使用jQuery提供了方便。, 《jQuery基础教程(第2版)》注重理论与实践...
《jQuery基础教程》涵盖了jQuery 1.6.x及1.7.x的全部新特性,《jQuery基础教程...第7章和第8章介绍了jQuery UI及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加深入地探讨了jQuery的各种特性及一些高级技术。
主要介绍了Jquery插件编写简明教程,jquery插件开发实例,需要的朋友可以参考下
NULL 博文链接:https://fangyong2006.iteye.com/blog/743555
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,...
第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加深入地探讨了jQuery的各种特性及一些高级技术。附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中...
要说jQuery 最成功的地方,我认为是...jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQ