自定义插件所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码就能实现很好的效果。
JQ允许自定义插件,对JQ的方法进行扩展.自定义插件主要分两种: JQ元素扩展和JQ本身扩展.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery插件机制-jQuery.fn.extend(object)</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div>
爱好:<input type="checkbox" name="hobby" value="basketball" /> 篮球
<input type="checkbox" name="hobby" value="Football" />足球
<input type="checkbox" name="hobby" value="Volleyball" />排球
<br />
用户名:<input type="text" name="username" /><br />
</div>
<script type="text/javascript">
$.fn.extend({
check: function() { // 扩展一个check方法,该方法是将所有的多选按钮全部选中
this.each(function() {
this.checked = true;
});
},
userNameText: function() { // 自定义一个userNameText方法,该方法的功能是:将文本框自动赋值,并且字体颜色变为灰色
this.each(function() {
this.style.color = "gray";
this.value = "请输入用户名";
});
}
});
//注:如果是加上标签内的属性则需要写在[]内 具体使用如下所示
// $("input[type=checkbox]").check(); //将type等于checkbox的多选框全部选中
$("input[name=hobby]").check(); //将name等于hobby的多选框全部选中
$("input[type=text]").userNameText(); //将type等于text的所有文本框自动赋值,并且字体颜色变为灰色
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery插件机制-jQuery.extend(object)</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.extend({
plus: function(a, b) { return a + b; }, // 给$扩展一个plus方法,用于求两个数的和.
minus: function(a, b) { return a - b }, // 给$扩展一个minus方法,用于求两个数的差.
multiply: function(a, b) { return a * b }, // 给$扩展一个plus方法,用于求两个数的乘积.
max: function(a, b) { return a > b ? a : b; } // 给$扩展一个plus方法,用于求两个数的最大值.
});
alert($.plus(2, 3)); //结果5
alert($.minus(2, 3)); //结果-1
alert($.multiply(2, 3)); //结果6
alert($.max(2, 3)); //结果3
</script>
</body>
</html>
因为所做插件为JQ插件,使用的语法也都是JQ的语法,所以,无论在自定义插件或者使用别人定义好的插件的时候,都要求先引入JQ的js文件,才能正常的使用,切记.传智播客·黑马程序员郑州校区地址河南省郑州市 高新区长椿路11号大学科技园(西区)东门8号楼三层联系电话 0371-56061160/61/62来校路线 地铁一号线梧桐街站A口出
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |