jQuery扩展插件
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>
好啦好啦，最近太忙，已经很久没有继续更博了，接下来的时间希望可以继续更博，不断的监督自己。
