jQuery插件学习笔记
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,到这里,一个简单的插件就完成了。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。