jQuery 元素查找事件

╰半夏微凉° 2023-08-17 16:58 98阅读 0赞

> 1.  jQuery中可以链式操作，分为两种  
>     1） 同一个对象  
>     2）多个对象
> 2.  尽量避免多个链式（3~4个）

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <p>6</p>
    </ul>
    <script src="./tea/js/jquery-1.9.1.js"></script>
    <script>
        /*对同一个对象的操作*/
        $("ul").addClass("test1").css("background","pink");
        /*对多个对象的操作*/
        $("ul").addClass("test2").children().addClass("test3").css("background","red");
    </script>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

### 元素查找 ###

![在这里插入图片描述][201909292359268.png]

1.  `children`：查找指定父元素的子元素
2.  `find`:找出正在处理的元素的后代元素
3.  `next`和`pre` 的六种方法  
    其中，`nextUntil`和`prevUntil`在匹配时匹配到的元素为之间的元素（不包括起点和终点）

console.log($("ul").children());
        console.log($("ul").find("li"));
        
        console.log($("ul>").eq(1).next("li"));
        console.log($("ul>").eq(1).nextAll("li"));
        console.log($("ul>").eq(1).nextUntil("p"));
        
        console.log($("ul>").eq(1).prev("li"));
        console.log($("ul>").eq(1).prevAll("li"));
        //从p到a的所有元素但不包括p和a
        console.log($("ul").children().eq(4).prevUntil("a"));

1.  `parent`和`parents` 直接父元素和所有父元素（若添加参数则相当于过滤）

console.log($("ul").children().eq(4).parent());
        console.log($("ul").children().eq(4).parents());

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

1.  `siblings` 同胞兄弟元素（和原生js中的`nextsiblings`和`presiblings`查找结果不同），返回所有兄弟元素；  
    参数可以是空（匹配所有），也可以为元素，或者类名称（加点）

console.log($("ul").children().eq(3).siblings());
        console.log($("ul").children().eq(3).siblings(".sibtest"));

![在这里插入图片描述][20190930005258101.png]

1.  `each` dom元素遍历（集合），参数为回调函数

$("ul").children().each(function (index) { 
    // console.log(index);
            console.log((parseInt($(this).text())) + index);
        });

1.  `map`作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。

$("ul").children().map(function (index){ 
            $(this).html(10+index);
       });

### 元素事件 ###

1.  事件可能会叠加（比如 浏览器加载完成后的事件叠加）  
    ![在这里插入图片描述][20191010172231948.png]
2.  表单的选中事件为`select`

**常规事件**

1.  Dom元素渲染完成（类似浏览器加载完成）

/*1. 元素渲染完成*/
        $(window).ready(function(e){ 
            console.log(1);
        });
        /*简写为：*/
        $(function(){ 
            console.log("事件叠加");
        });

1.  浏览器大小发生变化

//窗口大小
        $(window).resize(function () { 
            console.log(1);
        })

1.  一些常规的鼠标事件

> 参数：事件参数`data`（执行事件传递的参数） `fn` （事件的执行回调函数）

$("#btn").click(1,function(){ 
            console.log("点击我啦！");
        }).mouseenter(function(){ 
            console.log("mouseenter鼠标进入");
        }).mouseleave(function(){ 
            console.log("mouseleave鼠标离开");
        });

1.  表单事件（获焦，失焦，提交等）

$("input").blur(function () { 
            console.log("失焦");
        }).focus(function () { 
            console.log("获焦");
        });

1.  键盘事件

$("body").keypress(function () { 
            console.log("keypress按键");
        }).keydown(function () { 
            console.log("keydown按下");
        }).keyup(function () { 
            console.log("keyup抬起");
        });

1.  Scroll事件

/*5. 滚轴事件*/
        $(window).scroll(function (){ 
           console.log($(this).scrollTop());
        });

1.  鼠标滚轴事件不能直接绑定（`bind/on`可以）

$(window).bind("mousewheel",function (){ 
         console.log(1);
         });

**事件的相关操作**

1.  事件的切换 `hover()` //目前已经废弃
2.  事件相关处理  
    1） `Bind（事件绑定） unbind(事件移除)`  
    如果不加参数为全部移除，加参数移除指定类型参数，移除多个加 空格

$("html").bind("keydown mousemove", function () { 
            console.log("bind绑定的事件键盘事件");
            $(this).unbind("mousemove");
        });

2） `on（事件绑定） off(事件移除)`：如果不加参数为全部移除，加参数移除指定类型参数，移除多个加 “空格”

> 在on事件绑定时，如果有第二个参数是选择器，相当于事件委托（父元素的事件委托给当前指定元素执行）

$(".btn").on("mousemove", function () { 
            console.log("on添加的移动");
        });
        //第二个参数是选择器——点击父元素无效，点击当前元素输出1
        $("ul").on("click", ".sel", function () { 
            console.log(1);
            $("button").off();
        });

3）`one` 绑定一次性事件（事件只被触发一次）

$("ul>li:first").one("click", function () { 
            console.log("li");
        });

4）`Trigger` 自动触发指定类型（默认或自定义）事件

//触发默认事件
        $(".tri").click(function () { 
            console.log("你点我");
        }).trigger("click");
        $("input").select(function () { 
            $(this).css("color", "red");
            //触发自定义事件
        }).trigger("select").on("my", function () { 
            console.log("自定义事件");
        }).trigger("my");

1.  事件参数

> 1） 时间戳`e.timeStamp`：浏览加载到当前事件触发的时间  
> 2） `e.currentTarget`冒泡阶段的元素（冒泡后）  
> 3） `e.target:`最初触发的dom元素,通常和this比较来确定事件是不是由冒泡触发的  
> 4）传递数据在`data`中  
> 5）`e.stopPropagation()`//阻止事件冒泡，防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
> 
> 6）`e.preventDefault()`//阻止事件默认行为  
> 7） `return false;`//阻止事件默认行为和冒泡，相当于以上两者的综合

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20230809/4fe8ae07f08c4637aa1f40dc2861f374.png
[201909292359268.png]: /images/20230809/ebe989fc56a24ab2aafcce703ce9191e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20230809/f6d90fe566b74fb18b617cf4a9e88211.png
[20190930005258101.png]: /images/20230809/7ca3a56f90ec44afb0862084ab752307.png
[20191010172231948.png]: /images/20230809/db093f197a734270ac0f931dba4bb0d6.png