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

JQuery插件机制

2016-05-03 21:42 627 查看

前言

在实际的项目开发中，很多时候会用一些特殊的处理手段，很多时候会在现有jQuery的基础上进行扩展一些方法或者制作一些插件。下面介绍如何利用jQuery扩展新的方法及如何使用。

jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如.ajax()这种，要不就是拓展个选择器啦，例如.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代码耦合。无论后台还是前端，都是尽量解耦，这样代码的可复用性会变高但是代码的维护力度也将变大。还是时刻思考如何让自己的代码能够降低耦合、提高可复用性、增强可扩展性和可维护性。

不积小流无以成江海不积跬步无以至千里学习应从点滴做起！！！

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

标签：

相关文章推荐

新的分享

章节导航