JQuery为元素扩展方法

╰+哭是因爲堅強的太久メ 2022-05-18 02:51 193阅读 0赞

> 作者：西岭老湿

--------------------

**问题及效果:**  
想实现商城购物车中全选与反选功能，发现jq中并没有提供相应功能；  
类似这种jq中没有的功能，我们都可以通过插件的形式自己实现，并在jq中使用；

### 为元素扩展新方法 ###

**知识点：**

基本语法:

`$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)`

ob： JS对象，例：

$.fn.extend({
        ex1.function(){},
        ex2.function(){},
    });

**案例代码：**

<body>
        <div id="box">JQ插件</div>
    </body>
    <script>
        $.fn.extend({
            ex1:function(color){
         
                this.css('background',color);
            }
        });
        //使用
        $('#box').ex1('yellow');
    </script>

### 扩展jq对象本身 ###

**知识点：**  
**jQuery.extend(ob) 或者 $.extend(ob)**  
ob： JS对象，

例：

$.extend({
        ex1.function(){},
        ex2.function(){},
    });

案例代码：

### 综合案例 ###

<body>
            <input type="button" value="全选" id="all"> 
            <input type="button" value="全不选" id="unall"> 
            <input type="button" value="反选" id="un"> 
            <hr>
            <input type="checkbox" value=""> HTML  <br>
            <input type="checkbox" value=""> Javascript <br> 
            <input type="checkbox" value=""> PHP <br> 
            <input type="checkbox" value=""> Python <br> 
            <input type="checkbox" value=""> Java <br> 
            <input type="checkbox" value=""> C/C++ <br> 
        </body>
        <script>
            $.fn.extend({
                all:function(){
         
                    this.attr('checked',true);
                },
                unall:function(){
         
                    this.attr('checked',false);
                },
                un:function(){
         
                    for(var i=0;i<this.length;i++){
                        if(this[i].checked == true){
                            this[i].checked = false;
                        }else{
                            this[i].checked = true;
                        }
                    }
                }
            });
            //使用
            $('#all').click(function(){
         
                $(':checkbox').all();
            });
            $('#unall').click(function(){
         
                $(':checkbox').unall();
            });
            $('#un').click(function(){
         
                $(':checkbox').un();
            });
        </script>

### each 方法 ###

问题及效果:  
在上一节插件中有个反选的功能，本质上就是对选中的每个对象进行遍历操作；  
jq原生有没有类似的功能呢？

知识点：  
**each(callback)**  
以每一个匹配的元素作为上下文来执行一个函数。

案例代码：

拿到上节课代码进行修改