您的位置：首页 > Web前端 > JQuery

JQuery插件机制

2017-10-06 00:00 295 查看

前言

在实际的项目开发中，很多时候会用一些特殊的处理手段，很多时候会在现有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代码耦合。无论后台还是前端，都是尽量解耦，这样代码的可复用性会变高但是代码的维护力度也将变大。还是时刻思考如何让自己的代码能够降低耦合、提高可复用性、增强可扩展性和可维护性。
不积小流无以成江海不积跬步无以至千里学习应从点滴做起！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航