jQuery基础学习随笔 2022

【2022年9月25日】

parents()   -返回指定祖先元素

返回指定祖先元素，如：

<div id="div1">
    <div id="div2">
        <div id="div3">
            我在div3
        </div>
    </div>
</div>

// 使用 parent() 时，从div3找到div1，需要多个parent()
$("#div3").parent().parent().parent();

// 使用 parents() ，即可快速找到指定祖先元素
$("#div3").parents();                           //找到了div3以上的祖先元素：div2、div1、body、html
console.log(   $("#div3").parents("#div1") );    // 返回指定祖先元素div1

 

toFixed()   -保留指定位数的小数

保留指定位数的小数。

let num = 89.111
console.log( num.toFixed(2) );      //  89.11

 

 

each()   -遍历元素

语法：

$("div").each(function(index, domEle) {
    xxx;
    console.log(index);  // 返回每个元素的索引号
    console.log(my_domEle);  //返回每个DOM元素对象 
})

// each() 方法遍历匹配的每一个元素，主要用DOM处理
// 里面的回调函数有两个参数，index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象！
// 所以使用jQuery方法，需要转换：$(domEle)

 

$.each()   -遍历元素，主要处理数据，如数组 对象 

 语法：

$.each( Obj, function(index, domEle) {
    xxx;
    console.log(index);    //返回每个元素的索引号
    console.log(domEle);   //返回每个DOM元素对象 
})

// 与第一种each()类似
// Obj 如果写元素，直接写jQuery对象，语法为 $.each( $("div"),function... )

元素、数组、对象：

// 遍历元素
    $.each( $("div"), function(i, Ele) {
        console.log(i);   //遍历每一个元素的索引号
        console.log(Ele); //遍历每一个DOM元素对象内容
    })
// 遍历数组
    let arrColor = ["red","blue","pink"];
    $.each( arrColor, function(i, Ele) {
        console.log(i);    //数组里面的每一个索引号
        console.log(Ele);  //数组里面的每一个值
    })
// 遍历对象
    $.each( {
        name: "穗",
        age: "21岁",
        addr: "河北省"
    }, function(i, Ele) {
        console.log(i);    // 对象里的每一个 属性名    name,age,addr....
        console.log(Ele);  // 对象里的每一个 属性值    穗,21岁,河北省....
    } );

 

尺寸方法：

1. $("div").width()  、 height()  获取设置元素 width和height的大小

2. $("div").innerWidth() 、innerHeight()  获取设置元素 width和height 带padding大小

3. $("div").outerWidth() 、outerHeight()  获取设置元素width和height 带padding和border大小

4. $("div").outerWidth(true)、outerHeight(true)  获取设置元素width和height 带padding border margin大小

 

以上参数为空，则是获取相应值，返回的是数字型。

如果参数为数字，则是修改相应值。

参数可以不带单位。

innerWidth() 带padding，其中inner英文的意思为 内部

outerWidth() 带padding和border，其中outer英文的意思为 外部

 

位置方法（偏移）：

offset()    --获取设置距离文档的位置（偏移） 。

$("div").offset()

$("div").offset().left      // 得到对于文档的左侧的偏移，跟父级没有关系

 

$("div").offset({

                top:200,

                left:300

});     // 在括号里写设置的值，以对象的形式

 

position()    --获取元素偏移，相对于‘带有定位的父级’偏移坐标，无父级则以文档为准。

$("span").position()

$("span").position().left

 

// 此方法只能获取，但不能设置

//console.log( $("span").position({left:99, top:99}) );    // 是错误的

 

 

scrollTop() 、 scrollLeft()    --设置或获取元素被卷去的头部和左侧。

 

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

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

 

scrollTop() 、 scrollLeft()    --返回顶部（带动画的

// 因为是元素做动画，所以不能写文档，而是html和body元素做动画。先stop()停止之前动画，然后animate()设置。

// 其中animate动画函数里有一个scrollTop属性，可以设置位置。

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

 

 

on  -绑定事件

// 单个注册事件 ele.事件(function() {})

$("div").click(function() { })

 

// on 事件处理 绑定事件

// on()方法匹配元素上绑定一个或多个事件的事件处理函数。

// 语法：ele.on(events, [selector], fn)

// events：一个或多个空格分隔的事件类型，如click。

// selector：元素的子元素选择器。     fn：回调函数。

 

            $("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);

 

 

off() - 事件解绑

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

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

 

one()  - 只触发事件一次

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

 

triggter()  - 自动触发事件

// 自动触发事件
            
// 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"); // 自动触发，无焦点，无光标

 

jQuery事件对象

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