小插曲之jquery插件的写法

2017年03月03日 13:45 | 348次浏览 | 分类: JavaScript教程 作者原创 版权保护

最近有个项目需要提供个js插件给第三方使用,于是便想到了jquery的插件,然后上网查询了jquery插件的写法,由于本站长有jquery相关经验,所以上手很快,至于插件的好处以及理论在这里不多说了,实现插件步骤如下:

一、下载jquery的依赖库

下载地址http://jquery.com/   ,刚访问了下,jquery已经到3.x版本了,还真快啊

jquery插件

本案例基于jquery2.x版本。

二,新建demo.html 和myplugin.js

myplugin.js是我们的插件文件

一)、jQuery插件开发方式

1、通过$.extend()来扩展jQuery

2、通过$.fn 向jQuery添加新的方法

3、通过$.widget()应用jQuery UI的部件工厂方式创建

本案例采用$.fn方式插件开发  

语法:

$.fn.pluginName = function() {
    //your code here
}

说明

基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

简单实例

将页面上所有链接颜色转成红色,则可以这样写这个插件

myplugin.js代码

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

1)、在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。

(2)、如果通过调用jQuery的.each()方法处理集合中的每个元素时要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。

demo.html使用myplugin.js插件

<ul>
    <li>
        <a href="#">aaa</a>
    </li>
    <li>
        <a href="#">bbb</a>
    </li>
    <li>
        <a href="#">ccc</a>
    </li>
</ul>
<p>这是p标签不是a标签,我不会受影响</p>
<script src="jquery-2.0.3.min.js"></script>
<script src="myplugin.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').myPlugin();
    })
</script>

效果如下

jquery插件写法

全部源码

demo.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>V型知识库--www.vxzsk.com原创</title>
 </head>
 <script src="jquery-2.0.3.min.js"></script>
  <script src="myplugin.js"></script>
 <body>
<ul>
    <li>
        <a href="#">aaa</a>
    </li>
    <li>
        <a href="#">bbb</a>
    </li>
    <li>
        <a href="#">ccc</a>
    </li>
</ul>
<p>这是p标签不是a标签,我不会受影响</p>
 </body>
 <script>
 jQuery(document).ready(function(){
 
 $(function(){
        $('a').myPlugin('1');

		
    })
 
 });
 
 </script>
</html>

myplugin.js

(function ($) {
$.fn.myPlugin = function(options) {

	
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({}, defaults, options);
	alert(options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });


		
}



$.fn.myPlugin2 = function(options) {

	
    var defaults = {
        'color': '#000',
        'fontSize': '32px'
    };
    var settings = $.extend({}, defaults, options);
	
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });


		
}


})(jQuery);


此文章本站原创,地址 http://www.vxzsk.com/595.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程