JQuery插件机制

来源：互联网发布：淘宝什么最好卖编辑：程序博客网时间：2024/06/07 07:12

前言

在实际的项目开发中，很多时候会用一些特殊的处理手段，很多时候会在现有jQuery的基础上进行扩展一些方法或者制作一些插件。下面介绍如何利用jQuery扩展新的方法及如何使用。
jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如.ajax()这种，要不就是拓展个选择器啦，例如.fn.each()，当选择器用。大部分插件都是用jQuery.fn.extend(),扩展对象方法。

帮助文档API介绍

jQuery.fn.extend(object)

这里写图片描述

jQuery.extend(object)

这里写图片描述

实例演示

扩展jQuery对象主要是用到了上面的两种方法，查看相关的帮助文档也可以了解到。下面以实际操作演示如何使用这两种方法。
1）定义方法。
2）使用方法。
具体参考以下代码：

<!DOCTYPE html><html><head>    <title>JQuery插件机制</title>    <script type="text/javascript" src="./js/jquery.min.js"></script></head><body><!--扩展插件 jQuery.fn.extend(object)--><div>    <input type="checkbox" name="num">1</input>    <input type="checkbox" name="num">2</input>    <input type="checkbox" name="num">3</input>    <input type="checkbox" name="num">4</input>    <input type="text"></input>    <input type="text"></input></div><script type="text/javascript">    $.fn.extend({        check:function(){       // 扩展一个check方法，该方法是将所有的多选按钮全部选中            this.each(function(){                this.checked = true;            });        },        inputText:function(){   // 自定义一个inputText方法，该方法的功能是将文本框自动赋值            this.each(function(){                this.value = "auto input value";            });        }    });    //注：如果是加上标签内的属性则需要写在[]内 具体使用如下所示    // $("input[type=checkbox]").check();  //将type等于checkbox的多选框全部选中    $("input[name=num]").check();         //将name等于num的多选框全部选中    $("input[type=text]").inputText();    //将type等于text的所有文本框自动赋值</script><!--扩展插件 jQuery.extend(object)--><script type="text/javascript">    $.extend({        plus:function(a,b){return a+b;},        multi:function(a,b){return a*b},        max:function(a,b){return a>b?a:b;},        min:function(a,b){return a>b?b:a;}    });    alert($.plus(2,3));        //结果5    alert($.multi(2,3));   //结果6    alert($.max(2,3));     //结果3    alert($.min(2,3));     //结果2</script></body></html>

运行结果

这里写图片描述

总结

在实际的项目总可以专门写一个扩展的js文件，不建议直接将js文件直接和html代码耦合。无论后台还是前端，都是尽量解耦，这样代码的可复用性会变高但是代码的维护力度也将变大。还是时刻思考如何让自己的代码能够降低耦合、提高可复用性、增强可扩展性和可维护性。
不积小流无以成江海不积跬步无以至千里学习应从点滴做起！！！

1 0