定制化jq

85 阅读1分钟
  • $.extend
<script src="./jquery-1.12.4.js"></script>
<script>
    /* $.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);

</script>
  • jquery框架分析
<div class="div1"></div>
<!-- jQuery源码第一行到最后一行是一个匿名函数 -->
<script src="./kw47jquery.js"></script>
<script>
    // $('.div1').css('background','red')
    // $('.div1').show();
    // $('.div1').addClass('blue')
    // $('.div1').removeClass('blue')
    //$('.div1').click(function(){
      //  $('.div1').addClass('blue')
        //setTimeout(function(){
            $('.div1').hide();
        },2000)
    })
</script>