jQuery

目录

jQuery

选择器

基础选择器

子元素选择器

后代元素选择器

属性选择器

jQuery扩展

DOM操作

addclass()

removeClass()

toggleClass()

hasClass()

html()

val()

attr()

removeAttr()

DOM插入并包裹现有内容

DOM插入现有元素内

DOM插入现有元素外

DOM移除

DOM替换

CSS操作

css()获取和设置匹配元素的样式

height(),width()

innerHeight(),innerWidth()

outerHeight(),outerWidth()

offset()获取元素当前坐标

position()

scrollLeft(),scrollTop()

事件

绑定事件处理器

on()

one()

off()

鼠标事件

表单事件

focus()

blur()

change()

submit()

键盘事件

浏览器事件

事件对象

遍历

动画

---

jQuery

jQuery是一个高效，精简并且功能丰富的js工具库。可以简化DOM操作

官网：jQuery官网

中文文档：jQuery API 中文文档

选择器

$:就是jQuery缩写

基础选择器

    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <div id="container">id选择器</div>

   <script>
        $(".box").html("jQuery类选择器");
        $("span").html("jQuery元素选择器");
        $("#container").html("jQueryID选择器")
    </script>

子元素选择器

选择指定父元素的所有直接后代元素

给ul的子元素添加边框

   <ul class="test">
        <li>第一个li标签</li>
        <li>
            <ul>
                <li>嵌套的li标签</li>
                <li>嵌套的li标签</li>
                <li>嵌套的li标签</li>
            </ul>

        </li>
        <li>第二个li标签</li>
    </ul>

     //js实现---给ul的子元素(直接子元素)
        var ul=document.getElementsByClassName("test")[0];
        console.log(ul.childNodes);
        var lis = ul.children;
        for(var i=0;i<lis.length;i++){
            lis[i].style.border="1px solid red";
        }

        //jQuery实现
        $(".test > li").css("border","1px solid green");

后代元素选择器

选择指定父元素的所有后代元素

        //js实现
        //获取父元素
        var ulParent = document.getElementsByClassName("test")[0];
        //获取全部后代所有li标签
        var liSons = ulParent.getElementsByTagName("li");
        for(var i=0;i<liSons.length;i++){
            liSons[i].style.border="1px solid red";
        }

        //jQuery实现
        $(".test  li").css("border","1px solid green");

属性选择器

1.选择指定属性的给定值的元素

     <div>
        <span>姓名</span>
        <input type="text" name="username">
        
    </div>
    <div>
        <span>密码</span>
        <input type="text" name="paassword">
    </div>
    <script>
        //jQuery实现修改span标签的内容为用户姓名
        //prev()获取同级的上一个节点
        //next()获取同级的下一个节点
        $("input[name='username']").prev().html("用户姓名");
   </script>

2.选择指定属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符"-"）的元素

    <a href="#" alt="test">测试样本1</a>
    <a href="#" alt="test-demo">测试样本2demo</a>
    <a href="#" alt="demo">测试样本3</a>
    <script>
        //为alt属性是test或前缀为test添加边框
        $("a[alt|=test]").css("border","2px solid red");
    </script>

3.选择指定属性具有包含一个给定的子字符串的元素

    <a href="#" alt="test">测试样本1</a>
    <a href="#" alt="test-demo">测试样本2demo</a>
    <a href="#" alt="demotestdemo">测试样本3</a>
    <a href="#" alt="demo">测试样本3</a>
    <script>
        //为alt属性是test或前缀为test添加边框
        $("a[alt*=test]").css("border","2px solid red");
    </script>

4.选择指定属性用空格分隔的值中包含一个给定值的元素

    <a href="#" alt="test">测试样本1</a>
    <a href="#" alt="test demo">测试样本2demo</a>
    <a href="#" alt="demo-test">测试样本3demo-test</a>
    <a href="#" alt="demo">测试样本3</a>
    <script>
        //为alt属性是test或前缀为test添加边框
        $("a[alt~=test]").css("border","2px solid red");
    </script>

5.选择指定属性是以给定值结尾的元素，这个比较是区分大小写的

    <a href="#" alt="test">测试样本1</a>
    <a href="#" alt="test demo">测试样本2demo</a>
    <a href="#" alt="demo-test">测试样本3demo-test</a>
    <a href="#" alt="demotest">测试样本4demo-test</a>
    <a href="#" alt="demo">测试样本5</a>
    <script>
        //为alt属性是test或前缀为test添加边框
        $("a[alt $= est]").css("border","2px solid red");
    </script>

6.选择属性是以指定字符串开始的元素

    <a href="#" alt="test">测试样本1test</a>
    <a href="#" alt="test demo">测试样本2demo</a>
    <a href="#" alt="demo-test">测试样本3demo-test</a>
    <a href="#" alt="demotest">测试样本4demotest</a>
    <a href="#" alt="demo">测试样本5</a>
    <script>
        //为alt属性是test或前缀为test添加边框
        $("a[alt ^= test]").css("border","2px solid red");
    </script>

jQuery扩展

:eq(index)Selector

在匹配的集合里面选择索引为index的元素，index下标索引是从0开始的

:even   选择偶数

:odd    选择奇数

:first   选择第一个

:last   选择最后一个

:gt(index)  选择匹配集合中索引大于给定index的元素

:lt(index)  选择匹配集合中所有索引值小于给定index参数的元素

    <ul>
        <li>第一个li标签</li>
        <li>第二个li标签</li>
        <li>第三个li标签</li>
        <li>第四个li标签</li>
        <li>第五个li标签</li>
        <li>第六个li标签</li>
    </ul>
    <script>
        //选择单个元素
        $("li:eq(1)").css("border","2px solid red");
        //选择偶数 0 2 4
        $("li:even").css("border","2px solid green");
        //选择奇数
        // $("li:odd").css("border","1px solid red");
    </script>

DOM操作

addclass()

给元素添加css，这个方法不会替换一个样式类名，只是将一个样式类型叠加到元素上，也可以同时添加多个class

    <style>
        .myClass1{
            font-size: 24px;
            color: red;
        }
        .myClass2{
            display: block;
            width: 200px;
            height: 40px;
            border: 2px solid green;
        }
    </style>

=================================================

    <p>hello,world</p>
    <script>
        //添加一个样式类
        $("p").addClass("myClass1");
        //添加2个或多个样式类
        $("p").addClass("myClass1  myClass2");
    </script>

removeClass()

移除元素中每个匹配元素上的一个，多个，或全部样式

      //移除一个class
        $("p").removeClass("myClass1");
        //移除多个class
        $("p").removeClass("myClass1 myClass2");
        //移除全部样式
        $("p").removeClass();

toggleClass()

这是一个开关方法，如果class存在就删除，不存在就添加

         //存在就删除，不存在就添加
        $("p").toggleClass("myClass1");

hasClass()

判断一个元素上是否含有某个class

        //判断p元素是否有myClass1
        var flag = $("p").hasClass("myClass1");
        console.log(flag);

html()

获取元素中的html内容，并且还可以设置元素的html内容

        //获取p元素的html内容
        console.log($("p").html());
        //将p元素的html内容修改成：你好，世界
        $("p").html("你好，世界");
        

val()

获取<input>标签中的内容，也可以设置<input标签的内容>

        //获取input标签内容
        $(".input").val();
        //设置input标签内容
        $(".input").val("请输入内容");

attr()

获取匹配元素的属性值或在设置匹配元素的一个或多个属性。

    <img/>
    <div></div>
    <script>
        //设置属性
        $("img").attr({
            src:"./th.jpg",
            alt:"动漫女主",
            title:"动漫女主"
        })
        //获取属性值
        $("div").html($("img").attr("title"));
    </script>

removeAttr()

为匹配的元素集合中的每个元素中移除一个属性

        //移除alt属性
        $("img").removeAttr("alt")

DOM插入并包裹现有内容

wrap()

在每个匹配的元素外层包上一个html元素

unwrap()

将匹配集合的父级元素删除，保留自身原本的位置

    <p>hello</p>
    <p>hello</p>
    <script>
        //给p标签添加一个父元素div，class=father
        $("p").wrap("<div class='father'></div>")//两个p标签都会添加父标签
        //去掉第二个p标签的父标签div
        $("p:eq(1)").unwrap();
    </script>

wrapAll()

在所有匹配元素的外面包裹一个html结构

    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <script>
        //给三个p标签添加一个父标签div
        $("p").wrapAll("<div class='container'></div>")
    </script>

wrapInner()

在匹配元素里的内容上外包一层html结构

    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <script>
       //给第二个p标签里的内容添加b标签
       $("p:eq(1)").wrapInner("<b></b>")
    </script>

DOM插入现有元素内

append()

在一个现有元素内插入新内容

prepend()

将参数插入到每个匹配元素的前面（元素内部）

   <p>helloWorld</p>
    <script>
        //在p标签的内容后面添加内容
        // $("p").append("世界");
        $("p").append("<strong>：世界</strong>");
        //在p标签的内容前面添加内容
        $("p").prepend("<strong>世界</strong>");
    </script>

DOM插入现有元素外

在一个现有元素外插入内容

after()

在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

before()

在匹配元素集合中的每个元素前面插入参数所指定的内容，作为其兄弟节点。

   <p>helloWorld</p>
    <script>
        //给p标签添加兄弟节点添加到p标签后面
        $("p").after("<b>世界你好</b>");
        //给p标签添加兄弟节点添加到p标签前面
        $("p").before("<div>你好世界</div>");
    </script>

DOM移除

从DOM树中删除元素

empty()

从DOM移除集合中所有匹配元素的索引子节点

remove()

将匹配元素从DOM删除

     <div class="container">
        <div class="top">
            <ul>
                <li>第一个li标签</li>
                <li>第二个li标签</li>
                <li>第三个li标签</li>
                <li>第四个li标签</li>
            </ul>
        </div>
    </div>

    <script>
        //删除div的class属性为top的所有子节点
        $(".top").empty();
        //删除div的class属性为top的节点
        $(".top").remove();
    </script>

DOM替换

从OM树移除已经有的内容并将其替换成新内容

replaceAll()

用集合匹配元素替换每个目标元素

replaceWith()

用提供的内容替换集合中所有匹配的元素

    <p>helloWorld</p>
    <span>helloWorld</span>
    <script>
        $("<div>hello</div>").replaceAll("p");

        $("p").replaceWith("<a href='#'>helloworld<a>");
    </script>

CSS操作

css()获取和设置匹配元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"> </script>
    <style>
        /* 设置div样式 */
        div{
            width: 200px;
            height: 200px;
            border: 10px solid green;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>测试jQuery的css方法</span>
    </div>
    <script>
        //1.获取div标签的宽和高
        var width=$("div:eq(0)").css("width");
        var height=$("div:eq(0)").css("height");
        console.log("div盒子的宽高是：",width,height);
        //将div盒子的宽高设置成100px,并且背景颜色为红色
        $("div:eq(0)").css({
            width:"100px",
            height:"100px",
            backgroundColor:"red"
        });
    </script>
</body>
</html>

height(),width()

获取元素的当前高度值宽度值或者设置元素的高度值宽度值

    <div>
        <span>测试jQuery的css方法</span>
    </div>
    <script>
        //1.获取div标签的宽和高
        var width=$("div:eq(0)").width();
        var height=$("div:eq(0)").height();
        console.log("div当前的宽度高度是:",width,height);
        //将div盒子的宽度和高度设置成50px
        $("div:eq(0)").width("50px");
        $("div:eq(0)").height("50px");
    </script>

innerHeight(),innerWidth()

为元素计算当前高度值和宽度值，包括padding，但是不包括border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"> </script>
    <style>
        /* 设置div样式 */
        div{
            width: 200px;
            height: 200px;
            border: 10px solid green;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>测试jQuery的css方法</span>
    </div>
    <script>
        //1.获取div标签的宽和高包括padding
        var width=$("div:eq(0)").innerWidth();//220px=border+padding*2
        var height=$("div:eq(0)").innerHeight();//220px
        console.log("div当前的宽度高度是:",width,height);
    </script>
</body>
</html>

outerHeight(),outerWidth()

获取元素的当前宽度值和高度值，包括padding，border和选择性的margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"> </script>
    <style>
        /* 设置div样式 */
        div{
            width: 200px;
            height: 200px;
            border: 10px solid green;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>测试jQuery的css方法</span>
    </div>
    <script>
        //1.获取div标签的宽和高包括padding,border
        var width=$("div:eq(0)").outerWidth();//240px=border+padding*2+border*2
        var height=$("div:eq(0)").outerHeight();//240px
        console.log("div当前的宽度高度是:",width,height);

        //1.获取div标签的宽和高包括padding,border,,margin
        var width=$("div:eq(0)").outerWidth(true);//280px=border+padding*2+border*2+margin*20
        var height=$("div:eq(0)").outerHeight(true);//280px
        console.log("div当前的宽度高度是:",width,height);
    </script>
</body>
</html>

offset()获取元素当前坐标

获取当前元素坐标，或设置元素当前坐标，坐标相对于文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-left: 100px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取div元素的位置
        var div  = $("div:eq(0)").offset();
        console.log("left:",div.left,"top:",div.top);//left: 100 top: 30
        //设置div的位置为水平居中，具顶50px
        $("div:eq(0)").offset({
            left:div.left+50,
            top:div.top+100
        });
    </script>
</body>
</html>

position()

获取当前元素的坐标，是相对于父级元素的坐标

这个方法可以获取元素相对于父元素的偏移位置。offset是相对于文档的位置，

因此当把一个元素放到同一个容器里面的另一个元素附近时，使用position()会更好。

scrollLeft(),scrollTop()

获取元素的当前水平和垂直滚动条的位置

设置每个匹配元素的水平滚动条和垂直滚动条位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        .box{
            width: 300px;
            height: 300px;
            overflow: auto;
            background-color: gray;

        }
        .text{
            width: 1000px;
            height: 1000px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="text">测试滚动</div>
        <span>helloworld</span>
    </div>
    <script>
        //设置滚动条位置据顶和距离左边都是400
        $(".box").scrollTop(400);
        $(".box").scrollLeft(400);
        //获取滚动位置
        var divTop = $(".box").scrollTop();
        var left=$(".box").scrollLeft();
        console.log("top:",divTop);
        console.log("left:",left);
    </script>
    
</body>
</html>

事件

绑定事件处理器

on()

在选定的元素上绑定一个或者多个事件处理函数

    <button class="btn">按钮</button>
    <script>
        //点击按钮控制台打印，点击按钮
        $(".btn").on("click",function(){
            console.log("点击了按钮");
            
        })
    </script> 

事件委托效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
</head>
<body>
    <ul>
        <li>第一个li标签</li>
        <li>第二个li标签</li>
        <li>第三个li标签</li>
        <li>第四个li标签</li>
    </ul>
    <script>
        //点击li标签，在控制台输出点击的是那个li标签
        //给父元素添加点击事件
        $("ul").on("click",function(e){
            console.log(e.target.innerHTML);
            
        })
    </script>
</body>
</html>

one()

为元素的事件添加处理函数，处理函数在每个与那苏上每种事件类型最多执行一次

        //点击按钮控制台打印，点击按钮，只会执行一次
        $(".btn").one("click",function(){
            console.log("点击了按钮");
            
        })

off()

移除一个事件处理函数，主要是移除on事件处理器

       //点击按钮控制台打印，点击按钮，只会执行一次
        function myFn(){
            console.log("点击了按钮");
        }
        $(".btn").on("click",myFn);
        //移除点击事件
        $(".btn").off("click",myFn);

鼠标事件

方法	方法描述
click()	为js的"click"事件绑定一个处理器，或者触发元素上的"click"事件
hover()	将事件函数绑定到匹配元素上，分辨是当鼠标移入指针进入和离开元素时被执行
mouseenter()	鼠标进入事件
mouseleave()	鼠标离开事件
mousemove()	鼠标滑动事件
mouseover()	鼠标进入事件（支持事件冒泡）也就是是从父元素进入子元素会触发
mouseout()	鼠标离开事件支持冒泡事件）也就是说离开子元素时也会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="container">
        <div class="box1"></div>
    </div>
    <script>
        //添加点击事件
        $("#btn").click(function(){
            console.log("点击了按钮");
        })
        //验证hover方法--从父元素移入子元素或从子元素移入父元素并不会触发
        $(".container").hover(
            function (){
                console.log("鼠标移入了");
                
            },
            function(){
                console.log("鼠标移出了");
                
            }
        )
    </script>
</body>
</html>

表单事件

focus()

为js的"focus"事件绑定一个获取焦点处理函数，或者触发元素上的"focus"事件

blur()

为"blur"事件绑定一个失去焦点处理函数

change()

为js的"change"事件绑定一个表单改变处理函数

submit()

当用户提交表单时，就会在这个表单元素上触发submit事件，只能绑定在form元素上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
</head>
<body>
    <form >
        <div>
            <span>姓名</span>
            <input type="text" name="name" id="name">
        </div>
        <button>提交</button>
    </form>
    <script>
        //input输入框获得焦点触发函数
        $("#name").focus(function(){
            console.log("获得了焦点");
            
        })
        //失去焦点触发函数
        $("#name").blur(function(){
            console.log("失去了焦点");
            
        })
        //当表单内容发生了改变触发函数
        $("#name").change(function(){
            console.log("内容发送了改变");
            
        })
        //当提交表单的收获获取输入框的内容
        $("form").submit(function(){
            var value=$("#name").val();
            console.log(value);
        })
    </script>
    
</body>
</html>

键盘事件

keydown()

添加键盘按下事件

keypress()

添加键盘事件

keyup()

添加键盘抬起事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
</head>
<body>
    <input type="text" id="context" placeholder="请输入内容">
    <script>
        //键盘按下事件
        $("input").keydown(function(){
            console.log("键盘按下了");
        })
        //键盘抬起事件
        $("input").keyup(function(){
            console.log("键盘抬起了");
        })
        //添加键盘事件
        $("input").keypress(function(){
            console.log("键盘事件执行了");
            
        })
    </script>
    
</body>
</html>

浏览器事件

resize()

添加浏览器窗口发生变化触发事件

scroll()

浏览器滚动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        p{
            height: 400px;
        }
    </style>
</head>
<body>
    <p>测试浏览器事件</p>
    <p>测试浏览器事件</p>
    <p>测试浏览器事件</p>
    <p>测试浏览器事件</p>
    <p>测试浏览器事件</p>
    <script>
        //浏览器窗口发生变化触发事件
        $(window).resize(function(){
            console.log("浏览器发生了变化");
        })
        //当页面滚动触发事件
        $(window).scroll(function () {
            console.log("页面滚动了");        
        })
    </script>
    
</body>
</html>

事件对象

event.type:获取事件类型

event.target:获取当前元素对象

event.currentTarget:获取当前元素对象

event.preventDefault():如果调用这个事件，默认事件行为将不再触发

event.stopPropagation():防止事件，冒泡到DOM树上，也就是不触发任何前辈元素上的事件处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">按钮</button>
    </div>
    
    <script>
        $("div").click(function(e){
            //获取事件类型
            console.log(e.type);
            //获取当前元素
            console.log(e.target);
            //获取当前元素
            console.log(e.currentTarget);
        })
    </script>
</body>
</html>

target:指向触发事件元素，currentTarget：指向添加事件的元素

当点击按钮时效果是

阻止默认事件，比如a链接的跳转

    <a href="http://ww.baidu.com">百度</a>
    <script>
        $("a").click(function(e){
            //阻止默认跳转
            e.preventDefault();
            console.log("点击了链接");
        })
    </script>

阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <a href="http://ww.baidu.com">百度</a>
    <div class="container">
        <div class="box"></div>
    </div>
    <script>
        $("a").click(function(e){
            //阻止默认跳转
            e.preventDefault();
            console.log("点击了链接");
        })
        //给container盒子添加点击事件
        $(".container").click(function(){
            console.log("点击了盒子");
            
        })
        //给box盒子添加点击事件
        $(".box").click(function(){
            //阻止冒泡，不阻止的话，点击这个盒子父盒子的点击事件也会触发
            e.stopPropagation();
            console.log("点击了盒子");
            
        })
    </script>
    
</body>
</html>

遍历

map()：通过一个函数匹配当前集合中每个元素，产生一个新的jQuery对象

each():遍历一个jQuery,为每个匹配元素执行一个函数

get():通过jQuery对象获取一个对应的DOM元素

each和map的返回值不同，map返回一个新的数组，each返回原始数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
</head>
<body>
    <ul>
        <li>第一个li标签</li>
        <li>第二个li标签</li>
        <li>第三个li标签</li>
        <li>第四个li标签</li>
        <li>第五个li标签</li>
    </ul>
    <script>
        //map遍历
        $("li").map(function(index,ele){
            console.log(index,ele);//index是从0开始的，ele元素   
        })
        //each遍历
        $("li").each(function(index,ele){
            console.log(index,ele);//index从0开始的，ele元素
        })
        //get得到第三个元素
        console.log($("li").get(2));
    </script>
    
</body>
</html>

children():获得直接子元素可以传递一个选择器参数

find():寻找后代元素

next():获取元素紧邻的后面同级元素

parebt():获取元素的父元素

siblings():获取元素的兄弟元素，可以传一个选择器参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
</head>
<body>
    <div class="box">
        <ul class="test1">
            <li>第一个li标签</li>
            <li>第二个li标签</li>
            <li>
                <ul class="test2">
                    <li>嵌套的第一个li标签</li>
                    <li>嵌套的第二个li标签</li>
                    <li>嵌套的第三个li标签</li>
                </ul>
            </li>
            <li>第三个li标签</li>
        </ul>
        <span>测试内容</span>
    </div>
    <script>
        //获取div标签的直接子标签
        console.log($(".box").children());
        $(".box").children().css("border","2px solid red");
        //获取第一个ul的后代li元素
        console.log($(".test1").find("li"));
        $(".test1").find("li").css("border","2px solid green");
        //获取ul ： class=test1的下一个同级元素
        console.log($(".test1").next());//span
        //获取span标签的父级元素
        console.log($("span").parent());//div
        //获取元素的同级元素
        console.log($("span").siblings());//ul
    </script>
    
</body>
</html>

动画

show()：执行显示动画

hide():执行隐藏动画

fadeln():通过淡入的方式显示匹配元素

fadeOut():通过淡出的方式显示匹配元素

slideDown():用滑动动画显示一个元素

slideUp():用滑动动画隐藏一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <button class="btn1">隐藏盒子</button>
    <button class="btn2">显示盒子</button>
    <button class="btn3">淡出隐藏盒子</button>
    <button class="btn4">淡入显示盒子</button>
    <button class="btn5">滑动隐藏元素</button>
    <button class="btn6">滑动显示元素</button>
    <script>
        $(".btn1").click(function(){
            //动画形式隐藏盒子
        $("div").hide(2000);
        });
        $(".btn2").click(function(){
            //显示盒子
        $("div").show(2000);
        });
        $(".btn3").click(function(){
            //通过淡出的方式隐藏元素
        $("div").fadeOut(2000);
        });
        $(".btn4").click(function(){
            //通过淡出的方式隐藏元素
        $("div").fadeIn(2000);
        });
        //滑动动画隐藏元素
        $(".btn5").click(function(){
            $("div").slideUp();
        });
        //滑动动画显示元素
        $(".btn6").click(function(){
            $("div").slideDown();
        });
    </script>
    
</body>
</html>

animate():执行自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <button class="btn">按钮</button>
    <button class="reset">复原</button>
    <script>
        $(".btn").click(function(){
            $("div").animate({
            width:"400px",
            opacity:0.5

        },2000)
        })
        $(".reset").click(function(){
            $("div").animate({
            width:"200px",
            opacity:1

        },2000)
        })  
    </script>
    
</body>
</html>