本文内容:
如何实现jQuery对象和方法的扩展
jQuery提供了两个方法($.extend和$.fn.extend),可以让用户自行扩展插件(自定义的方法),以下将通过例举代码的形式体现出两者的效果。
本文自定义扩展的方法:
- 给 $ 添加4个工具方法:
- min(a, b) : 返回较小的值
- max(c, d) : 返回较大的值
- leftTrim() : 去掉字符串左边的空格
- rightTrim() : 去掉字符串右边的空格
- 给jQuery对象 添加3个功能方法:
- checkAll() : 全选
- unCheckAll() : 全不选
- reverseCheck() : 全反选
例举源码:
1、html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25_扩展插件</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>
<!--
1. 扩展jQuery的工具方法
$.extend(object)
2. 扩展jQuery对象的方法
$.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/Etui_jQuery_plugin.js"></script>
<script type="text/javascript">
var str = $.leftTrim(' abc ');
console.log(str+'a');
str = $.rightTrim(str);
console.log(str+'a')
//测试jQuery扩展的方法
$('#checkedAllBtn').click(function(){
$('[name = items]').checkedAll();
});
$('#checkedNoBtn').click(function(){
$('[name = items]').unCheckedAll();
});
$('#reverseCheckedBtn').click(function(){
$('[name = items]').reverseChecked();
});
</script>
</body>
</html>
2、js文件(Etui_jQuery_plugin.js)
(function(){
// 1. 给 $ 添加4个工具方法:
// * min(a, b) : 返回较小的值
// * max(c, d) : 返回较大的值
// * leftTrim() : 去掉字符串左边的空格
// * rightTrim() : 去掉字符串右边的空格
//扩展$的方法
$.extend({
min: function (a, b){
return (a<b ? a:b);
},
max: function(a, b){
return (a>b ? a:b);
},
leftTrim: function(str){
return str.replace(/^\s+/, "");
},
rightTrim: function(str){
return str.replace(/\s+$/, "");
}
});
// 2. 给jQuery对象 添加3个功能方法:
// * checkAll() : 全选
// * unCheckAll() : 全不选
// * reverseCheck() : 全反选
//扩展jQuery对象的方法
$.fn.extend({
checkedAll: function(){
this.prop('checked', true);//this是jQuery对象
},
unCheckedAll: function(){
this.prop('checked', false);
},
reverseChecked: function(){
//this是jQuery对象
this.each(function(){
//this是DOM元素
this.checked = !this.checked;
});
}
});
})();
如有疑惑,可参照B站尚硅谷前端jQuery教程(https://www.bilibili.com/video/BV1ts411E7ag?p=39)
希望本文对你有所帮助,加油!