2.10

71 阅读1分钟

/* .extend()函数用于将一个或多个对象的内容合并到目标对象//.extend()函数用于将一个或多个对象的内容合并到目标对象 */ /* .extend([deep],target,objectN) / / deep 可选。 Boolean类型 指示是否深度合并对象,默认为false / / target Object类型 目标对象,其他对象的成员属性将被附加到该对象上 / / objectN 需要被合并的对象 */

    // var object1 = {
    //     apple: 0,
    //     banana: {weight: 52, price: 100},
    //     cherry: 97
    // };
    
    /* 默认为false,不深度合并对象 banana的对象的值会被object2的值直接覆盖 */
    // console.log( $.extend(object1,object2) )
    /* 把deep改为true 深度合并对象 banana的对象的值相同的属性会被覆盖,
    不相同的属性仍然保留 */
    // console.log( $.extend(true,object1,object2) )
    // function fn1(obj,flag){
    //     var object2 = {
    //         banana: {price: 200},
    //         durian: 100
    //     };
    //     console.log( $.extend(flag,obj,object2) );
    // }

    // fn1(object1,false)


    

    var car2 = {
        carName:"保时捷",
        color:{name:"帅酷黑"}
    }

    /* 1、把car1进行深度合并 把值打印到控制台上 */
    /* 2、把car1进行 不深度合并 把值打印到控制台上 */
   function showCar(obj){
        /* car1是汽车的默认属性 */
        var car1 = {
            color:{name:"水晶白",price:"1000w"}
        }
        /* 我们可以通过extend对原来的默认属性进行拓展 */
        console.log(obj);
        $.extend(true,car1,obj)
        document.write(`汽车的名字:${car1.carName}   `);
       document.write(`汽车的颜色:${car1.color.name}   `);
       document.write(`汽车的价格:${car1.color.price}`);
   }
   showCar(car2);
   
   
     /* 原生转成jq对象 */
    // let h1 = document.querySelector('h1')
    // console.log( $(h1).get(0) )

    /* jq对象转原生的方法 */
    /* 第一种 $(h1)[0] */
    /* 使用$(h1).get(0)方法 可以把单个的jq元素转成原生dom对象 */

    /* 获取的行内元素的样式 */
    // console.log( h1.style.display );

    /* getComputedStyle是用来获取元素的最终样式,它不仅可以获取行内样式,
    也可以获取嵌入式样式,最终获取到的样式是根据优先级来决定的,而style只能获取行内样式
    */
    console.log( window.getComputedStyle($('h1').get(0),null).color )