jQuery擴充套件外掛

你若精彩，蝴蝶自來發表於2018-08-22
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>

好啦好啦，最近太忙，已經很久沒有繼續更博了，接下來的時間希望可以繼續更博，不斷的監督自己。

相關文章