jQ extend() 方法 fn.extend()方法

136 阅读1分钟

$.extend()方法

$.extend()函数用于将一个或多个对象的内容合并到目标对象。
$.extend([deep],target,objectN)
deep 可选。 Boolean类型,指示是否深度合并对象,默认为false。
           false,不深度合并对象,target的对象的值会被objectN的值直接覆盖。
           true,深度合并对象,target的对象的值相同的属性会被覆盖,不相同的属性仍然保留。
target Object类型,目标对象,其他对象的成员属性将被附加到该对象上。
objectN 需要被合并的对象。

    <script>
        var car1={
            color:{name:'水晶白',price:'1000w'}
        }
        var car2={
            carName:'保时捷',
            color:{name:'帅酷黑'}
        }
        console.log($.extend(true,car1,car2),car1);
      //$.extend(true,car1,car2)执行后,会改变car1的值,car1=$.extend(true,car1,car2)       
    </script>

$.fn.extend()

$.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。
$.fn是jQuery的原型对象,$.fn.extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

<body>
    <button>全选</button>
    <h3>爱好</h3>
    吃饭:<input type="checkbox">
    睡觉:<input type="checkbox">
    打豆豆:<input type="checkbox">
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $.fn.extend({
            checked: function (flag) {
                this.each(function (i, e) { e.checked = flag })
            }
        })
        var flag = true;
        $('button').click(function () {
            if (flag) {
                $(this).text('取消全选');
                //使用新创建的.checked()方法
                $('input').checked(true)
            } else {
                $(this).text('全选');
                $('input').checked(false)
            }
            flag = !flag;
        })
    </script>
</body>