each()   -遍历元素

位置方法（偏移）：

$(window).scroll(function() {
    console.log(  $(document).scrollTop()  );
    if ($(document).scrollTop() >= 200) {
        console.log("div已经碰到顶部了！被卷去的大于200px");
    }
})

// 不仅可以获取卷去的值，还可以设置要卷去的值
            $("button").click(function() {
                $(document).scrollTop(100);     //点击后滚动卷去100px
            })

$("body,html").stop().animate({
    scrollTop: 0
});

            $("div").on({
                click:function() {
                    $(this).css("background", "#aaffcc");
                },
                mouseleave:function() {
                    $(this).css("background","#ffc0cb");
                }
            })
// 如果事件处理程序相同
            $("div").on("click mouseleave", function() {
                alert("你的鼠标点击 或 鼠标离开了");
            })
// on可以实现事件委托（委派）
            $("ul").on("click", "li", function() {
                alert("父元素ul绑定了事件，但触发的对象是里面的子元素li");
            })
// on可以给未来动态创建的元素绑定事件
            /* $("ol").click(function() {
                alert("111");    // 该事件对于未来后期创建的元素，不生效
            }) */

            $("ol").on("click", "li", function() {
                alert("111");
            });

            let li = $("<li>后来创建的li</li>");
            $("ol").append(li);

// 1. 事件解绑 off()
            $("div").off();             // 解绑了div身上的所有事件
            $("div").off("click");      // 解绑了div的click事件

            $("ul").off("click", "li");  // 解绑事件委托

// 1. one() 只触发事件一次
            $("p").one("click", function() {
                alert("one()只触发一次，一次性的");
            });

// 自动触发事件
            
// 1. 元素.事件()                // 第一种简写形式
// $("p").click();  //自动触发,不需要鼠标点击

// 2. 元素.trigger("事件")       // 第二种自动触发模式  
// $("p").trigger("click");

// 3. 元素.triggerHandler("事件") //第三种自动触发模式，但不触发元素的默认行为
// $("p").triggerHandler("click");


//* html code: <input type="text">  *//

$("input").on("focus", function() {
    $(this).val("获得焦点就显示出这句话");
});

//$("input").focus();               // 自动触发，并触发元素默认行为，有焦点和光标
$("input").triggerHandler("focus"); // 自动触发，无焦点，无光标

// 1. 事件对象

            $(document).on("click", function() {
                console.log("点击了页面document");
            })

            $("div").on("click", function(event) {
                console.log(event);
                console.log("点击了div");

                // 当点击 div 时，会冒泡到 document 并输出相应文字
                event.stopPropagation();    //阻止冒泡行为，就不会冒泡到document了
            })

jQuery对象拷贝

/*
    $.extend( [deep], target, obj, [objN] )
    deep : 如果为true为深拷贝，默认为false浅拷贝
    target : 要拷贝的目标对象
    obj : 待拷贝到的第一个对象的对象
*/

            console.log("===(2)===");
            let tar2 = {};
            let obj2 = {
                id: 1,
                name: "niii"
            };
            $.extend(tar2, obj2);   // 浅拷贝到tar2
            console.log(tar2);

            console.log("===(3)===");
            let tar3 = {
                id:123456
            };
            let obj3 = {
                id: 1,
            };
            $.extend(tar3, obj3);   // 浅拷贝会覆盖tar3里面原来的数据，也叫合并
            console.log(tar3);

            console.log("===(4)===");
            let tar4 = {
                id:123456
            };
            let obj4 = {
                id: 1,
                msg:{
                    age: 18
                }
            };
            $.extend(tar4, obj4);   // 复杂数据类型的也会拷贝过去，修改tar4的age，obj4的age也会更改
            tar4.msg.age = 20;      //修改了tar4的age为20
            console.log(tar4);      //20
            console.log(obj4);      //20

    // 浅拷贝是把被拷贝的对象「复杂数据类型中的地址」拷贝给目标对象，修改目标对象会影响被拷贝对象。

            console.log("===(5)===");
            let tar5 = {
                msg:{
                    age: 18
                }
            };
            let obj5 = {
                msg:{
                    name: "aaa"
                }
            };
            $.extend(tar5, obj5);    // obj5的msg覆盖掉tar5的smg，只保留了name:"aaa"
            console.log(tar5);       // name: "aaa"

    // 深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。
    // 复杂数据类型开辟新的内存空间，独立，不受目标对象修改影响，不会覆盖。
    // 如果里面有不冲突的属性，会合并到一起。

            console.log("===(6)===");
            let tar6 = {
                id: 0,
                msg:{
                    age: 18
                }
            };
            let obj6 = {
                id: 1,
                msg:{
                    name: "aaa"
                }
            };
            $.extend(true, tar6, obj6);     // name和age不冲突，合并在一起
            tar6.msg.name = "bbb";          //拷贝后，修改了tar数据，tar和obj的msg都是独立的，互不干扰
            console.log(tar6);              //id:1 , msg:{age:18,name:"aaa"}
            console.log(obj6);