jq源码

    <!-- 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)
        })

jq转原生对象

        /* 原生转成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 )

    </script>

fn.extend

    <button>全选</button>
    <h1>爱好</h1>
    睡觉：<input type="checkbox" name="" id="">
    去网吧：<input type="checkbox" name="" id="">
    熬夜：<input type="checkbox" name="" id="">
    <!-- $.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法 -->
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $.fn.extend({
            checked:function(){
                /* this代表jQuery对象 input元素的集合 */
                // console.log(this);
                this.each(function(i,e){
                    // console.log(i,e);
                    e.checked = true;
                    console.log(e);
                })
            },
            unchecked:function(){
                /* this代表jQuery对象 input元素的集合 */
                // console.log(this);
                this.each(function(i,e){
                    // console.log(i,e);
                    e.checked = false;
                    console.log(e);
                })
            }
        })

        var flag = true
        $('button').click(function(){
            if(flag){
                $(this).text('取消全选')
                $('input').checked();
            }else{
                $(this).text('全选')
                $('input').unchecked();
            }
            flag=!flag;
        })
        
        






        /* $.fn是jQuery的原型对象，
        $.fn.extend()方法用于为jQuery的原型添加新的属性和方法。
        这些方法可以在jQuery实例对象上调用 */
        /*  $('') 就叫做jQuery对象 */
        // $.fn.extend({
        //     consoleFn:function(){
        //         console.log('我自己给jquery对象实现的打印方法')
        //     }
        // })
        // $('body').consoleFn();
        // $('body').css('background','pink')

        


    </script>
</body>

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);

    </script>