jQuery插件学习笔记
Posted liguangsunls
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery插件学习笔记相关的知识,希望对你有一定的参考价值。
近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护。
OK,到这里,一个简单的插件就完毕了。
JQuery除了提供一个简单、有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块添加自己的方法和额外的功能。通过这样的机制,Jquery同意我们自己创建属于我们自己的插件,提高我们在开发过程中的效率。
尽管在jQuery命名空间中,我们禁止使用了大量的javascript函数名和变量名。可是仍然不可避免某些函数或变量名将于其它jQuery插件冲突。因此我们习惯将一些方法封装到还有一个自己定义的命名空间。
第一个演示样例:
1.插件文件 MyFirstPlugin.js
注:用$.extend()把默认值和用户传进来的值是联合在一起,这样子的话,就把用户自己定义的值覆盖了默认用户的值。假设用户没定义值,就用系统自己定义的。
this.each(function () { 这个前面加了一个 return。这样就实现了我们的链式操作。
(function ($) { $.fn.textHover = function (options) { var defaultVal = { Text: ‘鼠标悬浮事件‘, ForeColor: ‘red‘, BackColor: ‘#B9FDD8‘ }; //默认值 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 () { 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);2.前台html代码
<form id="form1" action="#"> <div id="div1" style="width: 400px; height: 150px; background-color: #B9FDD8;"> Hello world</div> <br /> <div id="div2" class="textBar" style="width: 200px; height: 150px; background-color:#F0FBFF;float:left; border:1px solid gray;"> 哈哈 我是第二个 DIV </div> <div id="div3" class="textBar" style="width: 200px; height: 150px; background-color:#EDEAFF;float:left; border:1px solid gray; margin-left:2px;"> 哈哈 我是第三个 DIV </div> </form>3.JS代码
3.1导入jQuery库文件
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jQuery文件必须放在自己定义插件的前面!防止自己定义插件引用对象时报错。-->
<script src="MyScripts/MyFirstPlugin.js" type="text/javascript"></script>
3.2 JS代码
<script type="text/javascript"> $(function () { $(‘#div1‘).textHover({ Text: ‘鼠标悬浮在第一个 DIV 上面。。。‘, ForeColor: ‘yellow‘, BackColor: ‘Red‘ }); $(‘#div2‘).textHover({ Text: ‘我是第二个 DIV 。。。‘ }); $("#div3").textHover({ Text: ‘我是第三个 DIV 。。。
‘ }).css("background-color", "#B1B0FE"); //初次载入的时候 给出改变其颜色 }); </script>
OK,到这里,一个简单的插件就完毕了。
以上是关于jQuery插件学习笔记的主要内容,如果未能解决你的问题,请参考以下文章