jQuery事件(笔记)

单个事件注册

事件基本和原生一致

<div style="width: 100px; height: 100px; background-color: aqua;"></div>
<script>
    $("div").click(function() {
        $(this).css("background", "pink");
    })
</script>

事件处理on()绑定事件

element.on(events,selector,fn)
events一个或者多个用空格分隔的事件类型
selector元素的子元素选择器
fn回调函数

优势：可以事件委派，把原来加给子元素上的事件绑定在父元素身上，把事件委派给父元素
它也可以把事件绑定在新创建的元素上

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $("ul").on("click", "li", function() {
        $(this).css("background", "pink");
    })
</script>

事件处理off()解绑事件

$(“ul”).off(“click”, “li”);只解绑了li上的事件
$(“ul”).off(“click”);解绑了点击事件
$(“ul”).off();解绑了所有事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $("ul").on("click", "li", function() {
        $(this).css("background", "pink");
    })
    $("ul").off("click", "li");
</script>

用one只触发一次事件
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        $("ul").one("click", "li", function() {
            $(this).css("background", "pink");
        })
    </script>

自动触发事件

三种触发方式

<div style="width: 100px; height: 100px; background-color: aqua;"></div>
<script>
    $("div").on("click", function() {
        $(this).css("background", "pink");
    })
    $("div").click();
    $("div").trigger("click");
    $("div").triggerHandler("click");
</script>

阻止冒泡

stopPropagation()

<div style="width: 100px; height: 100px; background-color: aqua;"></div>
<script>
    $(function() {
        $("document").on("click", function() {
            console.log("document");
        })
        $("div").on("click", function(e) {
            console.log("div");
            e.stopPropagation();
        })
    })
</script>

拷贝

$.extend(deep,target,obj1,objn)
deep如果为true则为深拷贝，默认false浅拷贝
target拷贝的目标
obj1待拷贝的第一个对象

浅拷贝

<script>
    var Obj1 = {
        id: 0
    };
    var Obj2 = {
        id: 1,
        name: "yy"
    };
    $.extend(Obj1, Obj2);
    console.log(Obj1); //会覆盖原来的数据
</script>

深拷贝

<script>
    var Obj1 = {
        id: 0,
        name: "yu",
        age: 19
    };
    var Obj2 = {
        id: 1,
        name: "yy"
    };
    $.extend(true, Obj1, Obj2);
    console.log(Obj1); //不会覆盖原来的数据，如果里面有不冲突的属性，会合并到一起
</script>

多库共存

jQuery使用$作为标识符，但其他的库也会使用￥作为标识符，一起使用会引起冲突

解决方案：把$统一改为jQuery

尺寸

<script>
    // 获取高度/宽度
    console.log($("div").width());
    // 获取宽度+padding
    console.log($("div").innerWidth());
    // 获取宽度+padding+border
    console.log($("div").outerWidth());
    // 获取宽度+padding+border+margin
    console.log($("div").outerWidth(true));
    // 如果参数为空，就是获取值，返回的是字符型
    // 如果参数为数字，则是修改值
    // 参数可以不写单位
</script>

位置

offset、position、scollTop/ScollLeft

<div style="width: 100px; height: 100px; background-color: aqua;"></div>
<script>
    $(function() {
        // 获取位置
        console.log($("div").offset());
        // 获取上偏移位置
        console.log($("div").offset().top);
        // 设置位置
        $("div").offset({
            top: 200,
            left: 200
        })

    })
</script>

<script>
    $(function() {
        // 获取有定位的距父盒子位置
        // 不能设置偏移
        console.log($("div").position());
    })