插件:增強JQuery的功能
實現方式:
$.fn.extend(object)
- 增強通過Jquery獲取的對象的功能,如:$("#id")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery對象進行方法擴展</title>
<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.定義jQuery的對象的插件
$.fn.extend({
//定義了一個check()方法,所有的jq對象都可以調用該方法
//方法名稱:回調函數
check:function(){
//讓複選框選中
//this:調用該方法的jq對象
this.prop("checked",true);
},
uncheck:function(){
//讓複選框不選中
//this:調用該方法的jq對象
this.prop("checked",false);
}
});
$(function(){
//複選框對象.check();
$("#btn-check").click(function(){
//獲取複選框對象
$("input[type='checkbox']").check();
});
$("#btn-uncheck").click(function(){
//獲取複選框對象
$("input[type='checkbox']").uncheck();
});
});
</script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中複選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消複選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球
</body>
</html>
2. $.extend(object)
- 增強JQeury對象自身的功能,如:$/jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery對象進行方法擴展</title>
<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//對全局方法擴展2個方法,擴展min方法:求2個值的最小值;擴展max方法:求2個值最大值
$.extend({
max:function(a,b){
//返回兩個數中的較大值
return a >= b ? a:b;
},
min:function(a,b){
//返回兩個數中的較小值
return a <= b ? a:b;
}
});
//調用全局方法
var max = $.max(2,3);
alert(max);
var min = $.min(1,2);
alert(min);
</script>
</head>
<body>
</body>
</html>