博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转]jquery开发自定义的插件总结
阅读量:5778 次
发布时间:2019-06-18

本文共 2530 字,大约阅读时间需要 8 分钟。

本文转自:

 

前几天在玩jquery,今天就把这几天的学习做一个总结。

首先jquery开发自定义的控件分两大类(我自己这么分的),第一就是不带参数的插件,还有一类就是带参数的jquery插件了。

先从简单的开始。首先我们要了解一下什么叫jquery,jquery是对js的一系列的分装,说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery,然后再我们的网页的head下面引用一下就好了。例如:

jquery引用放的位子

这里有一点需要确定,就是jquery的引用的地方一定在你自己插件的地方前面,因为浏览器在解析你的html的时候,是从上到下的,也就是说如果你先写插件后引用jquery,那么浏览器根本就不认识你的插件中的标示符。

无参jquery插件的模板:

  
不带参数的jquery插件开发

无参的格式为:

(function($){     $.fn.extend({         myPlugName:function(){
//dosomethings }); } }); })(jQuery);

这里大概的解释一下,$.fn.extend是一个实例的扩展,但是$.extend是类的扩展,如果不明白多看一下解释,或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的,你可以认为是别名。myPlugName这个是插件的名字,根据自己的情况来命名自己的拆建吧!接着就是写一些你想要做的事情了!很简单吧!哈哈

带参数的jquery插件 首先看一下代码:

按 Ctrl+C 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> (function($){ $.fn.hilight=function(options){ var defaults={ foreground:'red', background:'yellow' }; var opts = $.extend(defaults,options); $(this).css("background-color",opts.background); $(this).css("color",opts.foreground); }; })(jQuery); </script> </head> <body> <div id="myDiv">This is a Params JQuery!</div> </body> <script type="text/javascript"> $("#myDiv").hilight({foreground:'blue'}); </script> </html>
按 Ctrl+C 复制代码

这里和不带参数的jquery插件差不多,但是还有略微的不同,最后$("#myDiv").hilight({foreground:'blue'});来给jquery传递参数!如果不写的话,那就用jquery自带的默认的值。jquery插件其中的一个标准模板为:

(function($){            $.fn.hilight=function(options){                var defaults={                    foreground:'red',                    background:'yellow'                    };                var opts = $.extend(defaults,options);                //dosomethings            };        })(jQuery);

这里需要注意一句话,var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中。不懂的话参考:

这里当然标准的模板不是单单上面这么一种还有很多种,我只是整理了一种为初学者学习!

最后请允许我拷贝一段话,希望对你有用:

jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。

Stallman 先生认为最大的快乐是让自己发展的软件让大家来使用了!

转载地址:http://flkyx.baihongyu.com/

你可能感兴趣的文章
python之格式化输出(3种方式)
查看>>
stack(STL)
查看>>
重载和重写的区别
查看>>
多进程2
查看>>
封装promise
查看>>
[C#]二维码(QR Code)生成与解析
查看>>
FAT12文件系统 引导扇区结构
查看>>
linux 查看时间
查看>>
Entity Framework 延伸系列目录
查看>>
采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)
查看>>
《个人-GIT使用方法》
查看>>
296. Best Meeting Point
查看>>
「PKUSC2018」神仙的游戏
查看>>
[NOI2017]蔬菜
查看>>
//conn数据库配置
查看>>
简单理解同步与异步
查看>>
noip 2013 华容道
查看>>
洛谷noip 模拟赛 day1 T1
查看>>
[置顶]java开发之基础篇2
查看>>
Jsp 内置对象
查看>>