jQuery插件学习笔记
2014-07-03 15:26
411 查看
最近在研究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,到这里,一个简单的插件就完成了。
相关文章推荐
- jQuery学习笔记之十五-------插件
- jquery中datatables插件学习笔记(转载)
- Jquery 学习笔记(三)240多个jQuery插件
- 分享jQuery插件的学习笔记
- python学习笔记-Day16-jquery(文档处理/事件/插件)
- jQuery PAGINATION 分页插件学习笔记
- Jquery 插件学习笔记
- 20151221jquery学习笔记--验证插件
- jQuery学习笔记-Validation表单验证插件
- jQuery学习笔记之:创建插件
- 关于JQuery 插件Grid的学习使用笔记 (PHP版)
- jQuery学习笔记之插件开发(4)
- jQuery学习笔记(jquery.simplemodal插件)
- 20151225jquery学习笔记---编辑器插件
- JavaScript 学习笔记之二:编写自己的jQuery扩展分页插件(分享yQuery)
- jquery学习笔记(六)插件的编写
- jQuery学习笔记之插件开发(4)
- jquery学习笔记-----插件的编写
- JQuery学习使用笔记 -- JQuery插件开发
- jQuery插件开发 学习笔记