jQuery扩展插件

时间:2022-11-03 13:04:19

jQuery有多好用,大家有目共睹的,但是有时候不是每个功能都是万能的,有时候我们需要实现自己的功能,jQuery提供了很好的拓展功能,我们可以去拓展插件,更好的利用jQuery

查看官网,可知,有两个拓展的方式,

第一:$工具方法

第二:$对象的方法

由于jQuery都是建立在自执行函数的,所以你自己写的插件必须也是自执行函数

好了,我就实现了几个功能,得到最大最小值,全选是否

废话少说辣,直接上来代码:

//自定义的插件
(function(){ //扩展jQuery工具方法
$.extend({
min:function(a,b){
return a < b ? a : b
},
max:function(a, b){
return a > b ? a : b
},
leftTrim:function(string){
return string.replace(/^\s+/,'')
},
rightTrim:function(string){
return string.replace(/\s+$/,'')
}, }) //$对象方法 $.fn.extend({
checkAll:function(){
this.prop("checked",true)
},
unCheckAll:function(){
this.prop("checked",false)
},
reverseCheck:function(){
console.log(this)
this.each(function(){
console.log(this)
this.checked = !this.checked
}) }
}) })()

下面来几个例子来调用看看能不能实现啦,注意了,我们自定义的插件也是要建立在jQuery的插件之上的,所以顺序的事情大家就应该知道辣

<!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/my_plugin.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
*/
var str = 'rainbow cai ' //console.log($.min(3,5))
//console.log($.max(3,5))
//console.log($.leftTrim(str))
//console.log($.rightTrim(str)) var $items = $(":checkbox[name='items']")
$("#checkedAllBtn").on("click",function(){
$items.checkAll()
}) $("#checkedNoBtn").click(function(){
$items.unCheckAll()
}) $("#reverseCheckedBtn").click(function(){
$items.reverseCheck()
}) </script>
</body>
</html>

好啦好啦,最近太忙,已经很久没有继续更博了,接下来的时间希望可以继续更博,不断的监督自己。