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>

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

posted @ 2018-08-22 10:43 你若精彩，蝴蝶自来阅读(542) 评论(0) 收藏举报

你若精彩，蝴蝶自来

jQuery扩展插件

公告