JQuery为元素扩展方法

最新推荐文章于 2019-07-06 11:18:23 发布

伯爵-ShuaiqiShang

最新推荐文章于 2019-07-06 11:18:23 发布

阅读量872

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_31860777/article/details/81266640

版权

Jquery 专栏收录该内容

6 篇文章 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(){},
});

案例代码：

<script>
    $.extend({
        min: function(a, b) { return a < b ? a : b; },
        max: function(a, b) { return a > b ? a : b; }
    });
    //使用
    alert($.min(1,3));
</script>

综合案例

    <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)
以每一个匹配的元素作为上下文来执行一个函数。

案例代码：

拿到上节课代码进行修改

<script>
    $('#un').click(function(){
        $(':checkbox').each(function(){
            //判断并取反
            if(this.checked == true){
                this.checked = false;
            }else{
                this.checked = true;
            }
            //直接将值取反
            // this.checked = !this.checked;
        });
    });
</script>

伯爵-ShuaiqiShang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery为元素扩展方法

作者：西岭老湿问题及效果: 想实现商城购物车中全选与反选功能，发现jq中并没有提供相应功能；类似这种jq中没有的功能，我们都可以通过插件的形式自己实现，并在jq中使用；为元素扩展新方法知识点：基本语法:$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)ob： JS对象，例：$.fn.extend({ ex1.fun...
复制链接

扫一扫