• jQuery总结

    目录

    基础选择器：

            元素选择器：

    ​编辑       

            类选择器

    ​编辑

            id选择器

    关系选择器：

            子代选择器

    ​编辑        后代选择器

    ​编辑

    属性选择器：

            完美匹配：

    ​编辑

            前缀匹配or完美匹配：

    ​编辑

            包含：

    ​编辑

            空格分隔or完美匹配：

    ​编辑

            结尾or完美匹配： 

    ​编辑

            开头or完美匹配：

    扩展选择器：

            :eq(index)下标选择器

            :even偶数选择器   

    ​编辑

            :odd奇数选择器

            :first选择器

    ​编辑

            :last选择器

            :gt(index)选择器

            :lt(index)选择器

    DOM操作：

            Class操作：

    addClass("类名")

    ​编辑

    removeClass("类名")

    ​编辑

    toggleClass("类名")

    hasClass("类名")

            文本操作：

    html()：

    text()：

    val()：

            属性操作：

    attr()：

    ​编辑 ​编辑

    removeAttr()：

    ​编辑

            插入元素并包含指定内容：

    wrap()：    

    ​编辑unwrap()：

    wrapAll()：

    wrapInner()：

            元素内添加内容：

    append()：   

    ​编辑

    prepend()：

            元素外添加内容：

    after()：

    before()：

            移除：

            替换：

    CSS操作：

            css方法：

            height()和width()

            innerHeight()和innerWidth()

            outerHeight()和outerWidth()

    ​编辑

            offset()

    ​编辑

            position()

    ​编辑

    事件：

            on事件处理器

            one一次性事件处理器

            off清除事件处理器

    ​编辑

            鼠标事件：

    click()：

    mouseenter()和mouseleave()：

    mouseover()和mouseout()：

    mousemove()：

            表单事件：

            键盘事件：

            浏览器事件：

    resize()：

    scroll()：

            Event对象的属性

    target：

    currentTarget：

            Event对象的方法

    preventDefault()：

    stopPropagation()：

    遍历：

            map()和each()

    ​编辑

    js对象和jQuery对象的互转：

            为什么js对象和jQuery对象需要互转？

            js对象 - > jQuery对象($(js对象))

    ​编辑

            jQuery对象 - > js对象

    ​编辑

    动画：

            show()和hide()

            fadein()和fadeout()

    ​编辑

            slideDown()和slideUp()

            自定义动画animate()

    jQuery方便了我们使用JavsScript进行DOM操作的，首先我们需要知道jQuery的官网，通过官网下载jQuery，我们主要下载的是压缩板的，因为压缩版的大小会更小一些

    jQuery官网https://jquery.com/download/

     当我们下载过后需要对jQuery文件进行引用，我们将jQuery文件放到使用的文件夹中 

    通过script标签的src属性赋值，添加jQuery文件对应的链接

    基础选择器：

            元素选择器：

    jQuery通过$("元素名")获取对应的元素集

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    4.     <style>
    5.         div{
    6.             width: 200px;
    7.             height: 200px;
    8.             background-color: pink;
    9.         }
    10.     style>
    12. <body>
    13.     <div>div>
    14.     <script>
    15.         var div = $("div");//相当js的document.getElementsByTagName("div")
    16.         //测试
    17.         div.css("background-color","green");
    18.     script>
    19. body>

    本来背景色是粉色的，我们通过元素选择器将对应的元素的背景色改为绿色(green)，这里使用的css方法是对css进行操作的，我们后面会讲，这里用来测试

           

            类选择器

    jQuery通过$(".类名")获取对应类名的元素集

    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    4.     <style>
    5.         .box{
    6.             width: 200px;
    7.             height: 200px;
    8.             background-color: pink;
    9.         }
    10.     style>
    12. <body>
    13.     <div class="box">div>
    14.     <script>
    15.         var box = $(".box");//相当于js的document.getElementsByClassName("box")
    16.         //测试
    17.         box.css("background-color","green");
    18.     script>
    19. body>

            id选择器

    jQuery通过$("#id名")获取对应的元素

    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    4.     <style>
    5.         #box{
    6.             width: 200px;
    7.             height: 200px;
    8.             background-color: pink;
    9.         }
    10.     style>
    12. <body>
    13.     <div id="box">div>
    14.     <script>
    15.         var box = $("#box");//相当于document.getElementById("box");
    16.         //测试
    17.         box.css("background-color","green");
    18.     script>
    19. body>

    关系选择器：

            子代选择器

    定义：

            选择被E元素直接包含的F元素,用>表示

    语法：

            E > F

    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul id="ul">
    7.         <li>item 1li>
    8.         <li>
    9.             <ul>
    10.                 <li>item 2.1li>
    11.                 <li>item 2.2li>
    12.             ul>
    13.         li>
    14.         <li>item 3li>
    15.         <li>item 4li>
    16.     ul>
    17.     <p>段落p>
    18.     <p>段落p>
    19.     <p>段落p>
    20.     <script>
    21.         //子代选择器,选择#ul的直接子元素li
    22.         $("#ul>li").css("border","1px solid red");
    23.     script>
    24. body>

            后代选择器

    定义：

            选择所有被E元素包含的F元素，中间用空格隔开

    语法：

            E F

    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul id="ul">
    7.         <li>item 1li>
    8.         <li>
    9.             <ul>
    10.                 <li>item 2.1li>
    11.                 <li>item 2.2li>
    12.             ul>
    13.         li>
    14.         <li>item 3li>
    15.         <li>item 4li>
    16.     ul>
    17.     <p>段落p>
    18.     <p>段落p>
    19.     <p>段落p>
    20.     <script>
    21.         //后代选择器，该元素下的所有li元素
    22.         $("#ul li").css("border","1px solid red");
    23.     script>
    24. body>

    属性选择器：

            完美匹配：

    元素名[属性="value"]

    选择指定属性是给定值的元素

    2.     <a href="#" alt="sxt">sxta>
    3.     <a href="#" alt="sxt-itbaizhan">sxt-itbaizhana>
    4.     <a href="#" alt="sxtitbaizhan">sxtitbaizhana>
    5.     <script>
    6.         //完美匹配"sxt"
    7.         $("a[alt=sxt]").css("border","1px solid red");
    8.     script>

            前缀匹配or完美匹配：

    元素名[属性 |= "value"]

    2.     <a href="#" alt="sxt">sxta>
    3.     <a href="#" alt="sxt-itbaizhan">sxt-itbaizhana>
    4.     <a href="#" alt="sxtitbaizhan">sxtitbaizhana>
    5.     <script>
    6.         //前缀匹配or完美匹配“sxt”
    7.         $("a[alt|='sxt']").css("border","1px solid red");
    8.     script>

            包含：

    元素名[属性*="value"]

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <a href="#" alt="sxt">sxta>
    7.     <a href="#" alt="sxtitbaizhan">sxtitbaizhana>
    8.     <a href="#" alt="sxt-itbaizhan">sxt-itbaizhana>
    9.     <script>
    10.         $("a[alt*='sxt']").css("border","1px solid red");
    11.     script>
    12. body>

            空格分隔or完美匹配：

    元素名[属性~="value"]

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <a href="#" alt="sxt">sxta>
    7.     <a href="#" alt="sxt itbaizhan">sxt itbaizhana>
    8.     <a href="#" alt="sxt-itbaizhan">sxt-itbaizhana>
    9.     <script>
    10.         $("a[alt~=sxt]").css("border","1px solid red");
    11.     script>
    12. body>

            结尾or完美匹配： 

    元素名[属性$="value"]

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <a href="#" alt="sxt">sxta>
    7.     <a href="#" alt="itbaizhansxt">itbaizhansxta>
    8.     <a href="#" alt="sxt-itbaizhan">sxt-itbaizhana>
    9.     <script>
    10.         $("a[alt$='sxt']").css("border","1px solid red");
    11.     script>
    12. body>

            开头or完美匹配：

    元素名[属性^=“value”]

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <a href="#" alt="sxt">sxta>
    7.     <a href="#" alt="itbaizhansxt">itbaizhansxta>
    8.     <a href="#" alt="sxt-itbaizhan">sxt-itbaizhana>
    9.     <script>
    10.         $("a[alt^='sxt']").css("border","1px solid red");
    11.     script>
    12. body>

    扩展选择器：

    当我们使用基础选择器，或者属性选择器，或者关系选择器选择好元素之后，我们都可以通过冒号( : )+扩展选择器对元素再一次选择，就相当于对我们选择的元素再一次过滤，选择更加合适的元素

            :eq(index)下标选择器

    在匹配的集合中选择索引值为index的元素。（下标）

    index下标计算是从0开始的

    2.     <ul id="ul">
    3.         <li>item 1li>
    4.         <li>
    5.             <ul>
    6.                 <li>item 2.1li>
    7.                 <li>item 2.2li>
    8.             ul>
    9.         li>
    10.         <li>item 3li>
    11.         <li>item 4li>
    12.     ul>
    13.     <p>段落p>
    14.     <p>段落p>
    15.     <p>段落p>
    16.     <script>
    17.         $("li:eq(0)").css("border","1px solid red");
    18.     script>

            :even偶数选择器   

    在匹配的集合中选择下标为偶数的元素

    注意：下标从0开始计算

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul>
    7.         <li>item0li>
    8.         <li>item1li>
    9.         <li>item2li>
    10.         <li>item3li>
    11.         <li>item4li>
    12.     ul>
    13.     <script>
    14.         //偶数选择器
    15.         $("li:even").css("border","1px solid red");
    16.     script>
    17. body>

            :odd奇数选择器

     在匹配的集合中选择下标为奇数的元素

    注意：下标从0开始计算

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul>
    7.         <li>item0li>
    8.         <li>item1li>
    9.         <li>item2li>
    10.         <li>item3li>
    11.         <li>item4li>
    12.     ul>
    13.     <script>
    14.         //奇数选择器
    15.         $("li:odd").css("border","1px solid red");
    16.     script>
    17. body>

            :first选择器

    在匹配元素集中的选择第一个元素

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul>
    7.         <li>item0li>
    8.         <li>item1li>
    9.         <li>item2li>
    10.         <li>item3li>
    11.         <li>item4li>
    12.     ul>
    13.     <script>
    14.         //在匹配的元素集中选择第一个元素
    15.         $("li:first").css("border","1px solid red");
    16.     script>
    17. body>

            :last选择器

    在匹配的元素集中选择最后一个元素

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul>
    7.         <li>item0li>
    8.         <li>item1li>
    9.         <li>item2li>
    10.         <li>item3li>
    11.         <li>item4li>
    12.     ul>
    13.     <script>
    14.         //在匹配的元素集中选择最后一个元素
    15.         $("li:last").css("border","1px solid red");
    16.     script>
    17. body>

            :gt(index)选择器

    在匹配的集合中，选择下标大于指定下标的所有元素(index)

    注意：下标从0开始计算

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul>
    7.         <li>item0li>
    8.         <li>item1li>
    9.         <li>item2li>
    10.         <li>item3li>
    11.         <li>item4li>
    12.     ul>
    13.     <script>
    14.         //在匹配的集合中选择大于指定下标的所有元素
    15.         $("li:gt(2)").css("border","1px solid red");
    16.     script>
    17. body>

            :lt(index)选择器

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <ul>
    7.         <li>item0li>
    8.         <li>item1li>
    9.         <li>item2li>
    10.         <li>item3li>
    11.         <li>item4li>
    12.     ul>
    13.     <script>
    14.         //在匹配的集合中选择小于指定下标的所有元素
    15.         $("li:lt(2)").css("border","1px solid red");
    16.     script>
    17. body>

    DOM操作：

            Class操作：

    addClass("类名")

    向类中添加class属性，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <div class="box">div>
    7.     <script>
    8.         //向元素中添加box1 box2类名
    9.         $(".box").addClass("box1 box2");
    10.     script>
    11. body>

    removeClass("类名")

    删除类中指定的类名，如果为空那么类名全部删除 

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <div class="box box1 box2">div>
    7.     <div class="b b1 b2">div>
    8.     <script>
    9.         //删除box类名
    10.         $(".box").removeClass("box");
    11.         //删除所有类名
    12.         $(".b").removeClass();
    13.     script>
    14. body>

    toggleClass("类名")

    这是一个开关方法，如果类名存在则删除，不存在则添加

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <div class="box">div>
    7.     <script>
    8.         //存在则删除
    9.         $("div").toggleClass("box");
    10.         //不存在则添加
    11.         $("div").toggleClass("box1");
    12.     script>
    13. body>

    hasClass("类名")

    判断元素是否包含该类名，返回布尔值

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <div class="box">div>
    7.     <script>
    8.         //输出div元素是否含有box类名
    9.         console.log($("div").hasClass("box"));  
    10.     script>
    11. body>

            文本操作：

    html()：

    给元素添加内容(可以识别html语句)

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <div id="box">hellodiv>
    7.     <div id="box1">hellodiv>
    8.     <script>
    9.         //添加内容
    10.         $("#box").html("world");
    11.         //识别html语句
    12.         $("#box1").html("
      hello world
      "      );
    13.     script>
    14. body>

    text()：

    作用几乎和html()一样，但是html()可以识别html语句，但是text()无法识别html语句，直接将内容渲染为字符串添加到元素中

    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <div id="box">hellodiv>
    7.     <div id="box1">hellodiv>
    8.     <script>
    9.         //添加内容
    10.         $("#box").text("world");
    11.         //识别html语句
    12.         $("#box1").text("
      hello world
      "      );
    13.     script>
    14. body>

    val()：

    获取/设置对应元素的value值

    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    5. <body>
    6.     <input type="text" value="默认内容">
    7.     <script>
    8.         //获取val值
    9.         console.log($("input").val());
    10.         //设置val值
    11.         $("input").val("设置后的内容");
    12.     script>
    13. body>

            属性操作：

    attr()：

    给元素设置/获取属性

    1、一次设置一条属性

    2、通过对象的形式设置多条属性

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         .box1{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.         #box1{
    16.             background-color: red;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <div>div>
    22.     <p>p>
    23.     <script>
    24.         //设置一条属性
    25.         $("div").attr("class","box1");
    26.         //通过对象的形式设置多条属性
    27.         $("p").attr({
    28.             class:"box1",
    29.             id:"box1"
    30.         })
    31.         //给定需要的属性，获取指定属性值
    32.         console.log($("p").attr("class"));
    33.         
    34.     script>
    35. body>
    36. html>

     

    removeAttr()：

    删除元素的指定属性，无法全部删除

    1. <head>
    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    4. head>
    5. <body>
    6.     <div class="box1" id="box1" style="border:1px solid red;width: 200px;height: 200px;">div>
    7.     <script>
    8.             $(".box1").removeAttr("style");
    9.     script>
    10. body>

            插入元素并包含指定内容：

    wrap()：    

    创建一个元素，包裹对应元素，如果有多个对应元素，那么每个对应元素包裹一层

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>Documenttitle>
    6.     <script src="../../jquery-3.6.1.min.js">script>
    7. head>
    8. <body>
    9.     <p>hellop>
    10.     <p>hellop>
    11.     <p>hellop>
    12.     <script>
    13.         //找到p元素，并包裹一层div,如果有多个那么每个包裹一层
    14.         $("p").wrap("
      "      )
    15.     script>
    16. body>


    unwrap()：

    删除一层包裹

    1. <head>
    2.     <title>Documenttitle>
    3.     <script src="../../jquery-3.6.1.min.js">script>
    4. head>
    5. <body>
    6.     <div>
    7.         <p>hello worldp>
    8.     div>
    9.     <script>
    10.         //找到p元素，删除一层包裹
    11.         $("p").unwrap();
    12.     script>
    13. body>

    wrapAll()：

    wrap()如果有多个元素，每个都包裹一层

    而wrapAll()就是如果有多个元素，所有对应元素外面包裹一层

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>Documenttitle>
    6.     <script src="../../jquery-3.6.1.min.js">script>
    7. head>
    8. <body>
    9.     <p>hellop>
    10.     <p>hellop>
    11.     <p>hellop>
    12.     <script>
    13.         //找到所有p元素，在外面包裹一层div
    14.         $("p").wrapAll("
      "      );
    15.     script>
    16. body>

    wrapInner()：

    对应元素里面的内容包裹一层

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <p>hellop>
    12.     <p>hellop>
    13.     <p>hellop>
    14.     <script>
    15.         //找到所有p元素，每个对应p元素中的内容包裹一层div
    16.         $("p").wrapInner("
      "      );
    17.     script>
    18. body>
    19. html>

            元素内添加内容：

    append()：   

    在元素内的尾部添加内容

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>Documenttitle>
    6.     <script src="../jquery-3.6.1.min.js">script>
    7.     <style>
    8.         p{
    9.             background-color: pink;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div>
    15.         <p>hellop>
    16.     div>
    17.     <script>
    18.         //在div元素内的尾部添加p标签
    19.         $("div").append("
      world
      "      );
    20.     script>
    21. body>

    prepend()：

    在元素内的头部添加内容

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>Documenttitle>
    6.     <script src="../jquery-3.6.1.min.js">script>
    7.     <style>
    8.         p{
    9.             background-color: pink;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div>
    15.         <p>hellop>
    16.     div>
    17.     <script>
    18.         //在div元素内的头部添加p标签
    19.         $("div").prepend("
      world
      "      );
    20.     script>
    21. body>

            元素外添加内容：

    after()：

    在对应元素的后面添加内容

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>Documenttitle>
    6.     <script src="../jquery-3.6.1.min.js">script>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: pink;
    12.         }
    13.     style>
    14. head>
    15. <body>
    16.     <div>
    17.         <p>hellop>
    18.     div>
    19.     <script>
    20.         //在对应元素后面添加p标签
    21.         $("div").after("
      world
      "      );
    22.     script>
    23. body>

    before()：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div>
    19.         <p>hellop>
    20.     div>
    21.     <script>
    22.         //在对应元素的前面添加内容
    23.         $("div").before("
      world
      "      );
    24.     script>
    25. body>
    26. html>

            移除：

    empty()：

    删除元素中的内容

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>Documenttitle>
    6.     <script src="../jquery-3.6.1.min.js">script>
    7. head>
    8. <body>
    9.     <div>
    10.         <p>hellop>
    11.         <p>worldp>
    12.         <p>你好p>
    13.     div>
    14.     <script>
    15.         //移除div里边的内容
    16.         $("div").empty();
    17.     script>
    18. body>

    remove()：

    删除整个元素，包括里面的内容

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <div>
    12.         <p>hellop>
    13.         <p>worldp>
    14.         <p>你好p>
    15.     div>
    16.     <script>
    17.         //移除div
    18.         $("div").remove();
    19.     script>
    20. body>
    21. html>

            替换：

    replacWith()：

    匹配对应的元素并替换为对应的元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <div>
    12.         <p>hellop>
    13.         <p>worldp>        
    14.     div>
    15.     <script>
    16.         //将对应元素替换为指定元素
    17.         $("p").replaceWith("替换后的内容");
    18.     script>
    19. body>
    20. html>

    CSS操作：

            css方法：

    css方法和attr方法很像，但是css方法只能设置属性值

    1、一次设置一个属性

    2、通过对象的方式设置多个属性

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>Documenttitle>
    5.     <script src="../jquery-3.6.1.min.js">script>
    6. head>
    7. <body>
    8.     <div id="box1">div>
    9.     <div id="box2">div>
    10.     <script>
    11.         //一次设置一个属性
    12.         $("#box1").css("border","1px solid red");
    13.         $("#box1").css("width","100px");
    14.         $("#box1").css("height","100px");
    15.         //通过对象的方式设置多个属性
    16.         $("#box2").css({
    17.             width:200,
    18.             height:200,
    19.             backgroundColor:"pink"
    20.         })
    21.     script>
    22. body>
    23. html>

            height()和width()

    获取对应元素的高度和宽度，不包括padding、边框、margin

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             padding: 10px;
    14.             border: 5px;
    15.             margin: 10px;
    16.             background-color: pink;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <div>div>
    22.     <script>
    23.         //获取div的高度和宽度，不包括padding、边框、margin
    24.         var width = $("div").width();
    25.         var height = $("div").height();
    26.  
    27.         console.log("height:"+height);
    28.         console.log("width:"+width);
    29.     script>
    30. body>
    31. html>

            innerHeight()和innerWidth()

    获取对应元素的高度和宽度，包括padding内边距

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             padding: 10px;
    14.             border: 5px;
    15.             margin: 10px;
    16.             background-color: pink;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <div>div>
    22.     <script>
    23.         //获取div的高度和宽度，包括padding 不包括边框、margin
    24.         var iwidth = $("div").innerWidth();
    25.         var iheight = $("div").innerHeight();
    26.  
    27.         console.log("innerheight:"+iheight + " (包括padding)");
    28.         console.log("innerwidth:"+iwidth + " (包括padding)");
    29.     script>
    30. body>
    31. html>

            outerHeight()和outerWidth()

    获取对应元素的高度和宽度，包括padding、border，默认不包括margin，可以给定参数true，使包括margin 

    不包括margin：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             padding: 10px;
    14.             border: 5px solid red;
    15.             margin: 10px;
    16.             background-color: pink;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <div>div>
    22.     <script>
    23.         //获取div的高度和宽度，包括padding、边框，默认不包括margin
    24.         var owidth = $("div").outerWidth();
    25.         var oheight = $("div").outerHeight();
    26.  
    27.         console.log("outerheight:"+oheight + " (包括padding+border)");
    28.         console.log("outerwidth:"+owidth + " (包括padding+border)");
    29.     script>
    30. body>
    31. html>

    包括margin：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             padding: 10px;
    14.             border: 5px solid red;
    15.             margin: 10px;
    16.             background-color: pink;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <div>div>
    22.     <script>
    23.         //获取div的高度和宽度，包括padding、边框，默认不包括margin
    24.         var owidth = $("div").outerWidth(true);
    25.         var oheight = $("div").outerHeight(true);
    26.  
    27.         console.log("outerheight:"+oheight + " (包括padding+border+marin)");
    28.         console.log("outerwidth:"+owidth + " (包括padding+border+margin)");
    29.     script>
    30. body>
    31. html>

            offset()

     获取元素与文档的距离

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box1{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.             margin: 50px;
    15.         }
    16.         #box2{
    17.             width: 100px;
    18.             height: 100px;
    19.             background-color: green;
    20.         }
    21.     style>
    22. head>
    23. <body>
    24.     <div id="box1">
    25.         <div id="box2">div>
    26.     div>
    27.     <script>
    28.         //获取box2与文档的距离
    29.         console.log($("#box2").offset());
    30.     script>
    31. body>
    32. html>

            position()

    获取元素与父类具有定位功能的距离

    如果父类没有定位功能：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box1{
    11.             width: 200px;
    12.             height: 200px;
    13.             margin: 50px;
    14.             background-color: pink;
    15.         }
    16.         #box2{
    17.             width: 100px;
    18.             height: 100px;
    19.             background-color: green;
    20.         }
    21.     style>
    22. head>
    23. <body>
    24.     <div id="box1">
    25.         <div id="box2">div>
    26.     div>
    27.     <script>
    28.         //获取box2与父类具有定位功能的距离
    29.         console.log($("#box2").position());
    30.     script>
    31. body>
    32. html>

     父类具有定位功能：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box1{
    11.             width: 200px;
    12.             height: 200px;
    13.             margin: 50px;
    14.             position: relative;
    15.             background-color: pink;
    16.         }
    17.         #box2{
    18.             width: 100px;
    19.             height: 100px;
    20.             background-color: green;
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div id="box1">
    26.         <div id="box2">div>
    27.     div>
    28.     <script>
    29.         //获取box2与父类具有定位功能的距离
    30.         console.log($("#box2").position());
    31.     script>
    32. body>
    33. html>

    事件：

            on事件处理器

    需要两个参数，第一个参数是事件类型，第二个参数是触发事件后的行为  

    语法：

    on(事件类型，触发事件后的行为)

    测试：这里我们就先使用click点击事件作为测试，click事件后面会详细讲解

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head> 
    10. <body>
    11.     <button id="btn">按钮button>
    12.     <script>
    13.         $("#btn").on("click",
    14.         function(){
    15.             console.log("点击了按钮");
    16.         })
    17.     script>
    18. body>
    19. html>

            one一次性事件处理器

    one事件处理器的使用方法和on事件处理器一样，但是one事件处理器只会被触发一次

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <button id="btn">按钮button>
    12.     <script>
    13.         $("#btn").one("click",
    14.         function(){
    15.             console.log("一次性事件");
    16.         })
    17.     script>
    18. body>
    19. html>

            off清除事件处理器

    off删除对应元素的事件,可以传递参数，如果不传递参数那么清除所有事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <button id="btn">按钮button>
    12.     <script>
    13.         $("#btn").on("click",
    14.         function(){
    15.             console.log("点击了按钮");
    16.         });
    17.         $("#btn").on("mouseenter",
    18.         function(){
    19.             console.log("进入了按钮");
    20.         });
    21.         //清除所有事件
    22.         $("#btn").off();
    23.     script>
    24. body>
    25. html>

            鼠标事件：

    click()：

    点击事件，当鼠标点击拥有该事件的元素就会触发

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <button id="btn">按钮button>
    12.     <script>
    13.         $("#btn").click(function(){
    14.             console.log("点击了按钮");
    15.         });
    16.         //相当于$("#btn").on("click",function(){
    17.         //     console.log("点击了按钮");
    18.         // })
    19.         
    20.     script>
    21. body>
    22. html>

    mouseenter()和mouseleave()：

    mouseenter()：当鼠标进入触发(不会事件冒泡)

    mouseleave()：当鼠标离开触发(不会事件冒泡)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div id="box">div>
    19.     <script>
    20.         $("#box").mouseenter(function(){
    21.             console.log("鼠标进入了");
    22.         });
    23.         $("#box").mouseleave(function(){
    24.             console.log("鼠标离开了");
    25.         })
    26.     script>
    27. body>
    28. html>

    mouseover()和mouseout()：

    mouseover()：鼠标进入触发(会事件冒泡)

    mouseout()：鼠标离开触发(会事件冒泡)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.         #box2{
    16.             width: 100px;
    17.             height: 100px;
    18.             background-color: green;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div id="box">
    24.         <div id="box2">div>
    25.     div>
    26.     
    27.     <script>
    28.         $("#box").mouseover(function(){
    29.             console.log("鼠标进入了box");
    30.         });
    31.         $("#box").mouseout(function(){
    32.             console.log("鼠标离开了box");
    33.         })
    34.         $("#box2").mouseover(function(){
    35.             console.log("鼠标进入了box2");
    36.         });
    37.         $("#box2").mouseout(function(){
    38.             console.log("鼠标离开了box2");
    39.         })
    40.     script>
    41. body>
    42. html>

    mousemove()：

    鼠标移动触发该事件 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div id="box">div>
    19.     <script>
    20.         $("#box").mousemove(function(){
    21.             console.log("鼠标移动了");
    22.         });
    23.     script>
    24. body>
    25. html>

            表单事件：

    focus()：

    获得焦点时触发该事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" id="username">
    12.     <script>
    13.         $("#username").focus(function(){
    14.             console.log("获得焦点");
    15.         })
    16.     script>
    17. body>
    18. html>

    blur()：

     失去焦点时触发事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" id="username">
    12.     <script>
    13.         $("#username").focus(function(){
    14.             //获得焦点时触发事件
    15.             console.log("获得焦点");
    16.         })
    17.         $("#username").blur(function(){
    18.             //失去焦点时打印输入框内容
    19.             console.log($("#username").val());
    20.         })
    21.     script>
    22. body>
    23. html>

    change()：

    输入框内容改变过后失去焦点或输入回车触发该事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" id="username">
    12.     <script>
    13.         $("#username").change(function(){
    14.             //当触发该事件时输出输入框中的内容
    15.             console.log($("#username").val());
    16.         })
    17.     script>
    18. body>
    19. html>

    submit()：

    submit事件只能给form表单设置，触发该事件将会提交数据

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <form action="">
    12.         username:<input type="text" id="username"><br>
    13.         password:<input type="password" id="pwd">
    14.         <input type="submit" id="sub" value="提交">
    15.     form>
    16.     <script>
    17.         $("#sub").click(function(){
    18.             //当点击提交按钮后，触发form表单的submit事件
    19.             $("form").submit(function(){
    20.                 alert("提交了数据");
    21.             })
    22.         })
    23.     script>
    24. body>
    25. html>

     

            键盘事件：

    keydown()：

    当键盘按下触发该事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" id="username">
    12.     <script>
    13.         $("#username").keydown(function(){
    14.             console.log("键盘按下");
    15.         })
    16.     script>
    17. body>
    18. html>

    keyup()：

    键盘抬起触发该事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" id="username">
    12.     <script>
    13.         $("#username").keyup(function(){
    14.             console.log("键盘抬起");
    15.         })
    16.     script>
    17. body>
    18. html>

    keypress()：

    键盘按下触发

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" id="username">
    12.     <script>
    13.         $("#username").keypress(function(){
    14.             console.log("触发keypress");
    15.         })
    16.     script>
    17. body>
    18. html>

            浏览器事件：

    resize()：

    当页面两端大小改变时，触发该事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box1{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16.  
    17. head>
    18. <body>
    19.     <div id="box1">div>
    20.     <script>
    21.         var box1 = $("#box1")
    22.         $(window).resize(
    23.             //当页面两端大小发生改变时，触发该事件
    24.             function(){
    25.                 if($(window).width() > 800){
    26.                     //当页面两端大小>800px是，box1显示
    27.                     box1.css("display","block");
    28.                 }else{
    29.                     //否则消失
    30.                     box1.css("display","none");
    31.                 }
    32.             }
    33.         )
    34.     script>
    35. body>
    36. html>

    scroll()：

    当页面滚动时触发该事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         h3{
    11.             height: 500px;
    12.         }
    13.     style>
    14. head>
    15. <body>
    16.     <h3>标题h3>
    17.     <h3>标题h3>
    18.     <h3>标题h3>
    19.     <h3>标题h3>
    20.     <h3>标题h3>
    21.     <script>
    22.         $(window).scroll(
    23.             function(){
    24.                 console.log($(window).scrollTop());
    25.             }
    26.         )
    27.     script>
    28. body>
    29. html>

            Event对象的属性

    target：

    target谁触发了该事件指向谁

    currentTarget：

    currentTarget当事件冒泡到谁身上就指向谁

    1. <html>
    2.  
    3. <head>
    4.     <title>Documenttitle>
    5.     <script src="../jquery-3.6.1.min.js">script>
    6.     <style>
    7.         #box1 {
    8.             width: 500px;
    9.             height: 500px;
    10.             background-color: pink;
    11.         }
    12.  
    13.         #box2 {
    14.             width: 100px;
    15.             height: 100px;
    16.             background-color: green;
    17.         }
    18.     style>
    19. head>
    20.  
    21. <body>
    22.     <div id="box1">
    23.         <div id="box2">
    24.             <button id="btn">按钮button>
    25.         div>
    26.     div>
    27.     <script>
    28.         //e.target谁触发了该事件指向谁
    29.         //e.currentTarget当事件冒泡到谁身上就指向谁
    30.         $("#box1").click(
    31.             function (e) {
    32.                 console.log(e.target);
    33.                 console.log(e.currentTarget);
    34.             }
    35.         )
    36.         $("#box2").click(
    37.             function (e) {
    38.                 console.log(e.target);
    39.                 console.log(e.currentTarget);
    40.             }
    41.         )
    42.         $("#btn").click(
    43.             function (e) {
    44.                 console.log(e.target);
    45.                 console.log(e.currentTarget);
    46.             }
    47.         )
    48.     script>
    49. body>
    50.  
    51. html>

            Event对象的方法

    preventDefault()：

    阻止浏览器默认行为 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <a href="https://www.baidu.com">百度a>
    12.     <script>
    13.         $("a").click(
    14.             function(e){
    15.                 //停止浏览器默认事件
    16.                 e.preventDefault();
    17.                 console.log("点击了,但我不跳咋滴");
    18.             }
    19.         )
    20.     script>
    21. body>
    22. html>

    stopPropagation()：

    阻止事件冒泡

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         #box1{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.         #box2{
    16.             width: 100px;
    17.             height: 100px;
    18.             background-color: red;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div id="box1">
    24.         <div id="box2">div>
    25.     div>
    26.     <script>
    27.         $("#box2").click(
    28.             //当点击子级box2，不再事件冒泡到父级box1
    29.             function(e){
    30.                 e.stopPropagation();
    31.                 console.log("点击了box2");
    32.             }
    33.         )
    34.         $("#box1").click(
    35.             function(){
    36.                 console.log("点击了box1");
    37.             }
    38.         )
    39.     script>
    40. body>
    41. html>

    遍历：

            map()和each()

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <ul>
    12.         <li>item1li>
    13.         <li>item2li>
    14.         <li>item3li>
    15.         <li>item4li>
    16.     ul>
    17.     <script>
    18.         $("li").map(
    19.             //第一个参数：代表每个元素的下标(index)
    20.             //第二个参数：代表每个元素
    21.             function(index,ele){
    22.                 //map方法和each方法获得到的都是js对象
    23.                 console.log(ele);
    24.             }
    25.         );
    26.         $("li").each(
    27.             //第一个参数：代表每个元素的下标(index)
    28.             //第二个参数：代表每个元素
    29.             function(index,ele){
    30.                 //map方法和each方法获得到的都是js对象
    31.                 console.log(ele);
    32.             }
    33.         );
    34.         
    35.     script>
    36. body>
    37. html>

    js对象和jQuery对象的互转：

            为什么js对象和jQuery对象需要互转？

    因为js对象和jQuery对象的方法不能互相使用

            js对象 - > jQuery对象($(js对象))

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <div>div>
    12.     <script>
    13.         //js -> jQuery
    14.         console.log($(document.getElementsByTagName("div")[0]));
    15.     script>
    16. body>
    17. html>

            jQuery对象 - > js对象

    1、通过get()，获取一个js对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <ul>
    12.         <li>item 1li>
    13.         <li>item 2li>
    14.         <li>item 3li>
    15.         <li>item 4li>
    16.     ul>
    17.     <script>
    18.         //输出第一个对应的li元素(js对象)
    19.         console.log($("li").get(0));
    20.         
    21.     script>
    22. body>
    23. html>

    2、通过map()、each()获取多个js对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9. head>
    10. <body>
    11.     <ul>
    12.         <li>item1li>
    13.         <li>item2li>
    14.         <li>item3li>
    15.         <li>item4li>
    16.     ul>
    17.     <script>
    18.         $("li").map(
    19.             //第一个参数：代表每个元素的下标(index)
    20.             //第二个参数：代表每个元素
    21.             function(index,ele){
    22.                 //map方法和each方法获得到的都是js对象
    23.                 console.log(ele);
    24.             }
    25.         );
    26.         $("li").each(
    27.             //第一个参数：代表每个元素的下标(index)
    28.             //第二个参数：代表每个元素
    29.             function(index,ele){
    30.                 //map方法和each方法获得到的都是js对象
    31.                 console.log(ele);
    32.             }
    33.         );
    34.         
    35.     script>
    36. body>
    37. html>

    动画：

            show()和hide()

    .show()

    执行显示动画

    .hide()

    执行隐藏动画

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div>div>
    19.     <button id="show">showbutton>
    20.     <button id="hide">hidebutton>
    21.     <script>
    22.         var show = $("#show");
    23.         var hide = $("#hide");
    24.         var div = $("div");
    25.         show.click(
    26.             function(){
    27.                 //动画一秒后显示div
    28.                 div.show(1000);
    29.             }
    30.         )   
    31.         hide.click(
    32.             function(){
    33.                 //动画一秒隐藏div
    34.                 div.hide(1000);
    35.             }
    36.         )
    37.     script>
    38. body>
    39. html>

            fadein()和fadeout()

    .fadeIn()

    通过淡入的方式显示匹配元素。

    .fadeOut()

    通过淡出的方式显示匹配元素

    1. <head>
    2.     <title>Documenttitle>
    3.     <script src="../jquery-3.6.1.min.js">script>
    4.     <style>
    5.         div{
    6.             width: 200px;
    7.             height: 200px;
    8.             background-color: pink;
    9.         }
    10.     style>
    11. head>
    12. <body>
    13.     <div>div>
    14.     <button id="fadein">淡入button>
    15.     <button id="fadeout">淡出button>
    16.     <script>
    17.         var fadein = $("#fadein");
    18.         var fadeout = $("#fadeout")
    19.         fadein.click(
    20.             function(){
    21.                 $("div").fadeIn(2000);
    22.             }
    23.         )
    24.         fadeout.click(
    25.             function(){
    26.                 $("div").fadeOut(2000);
    27.             }
    28.         )
    29.     script>
    30. body>

            slideDown()和slideUp()

    .slideDown()

    用滑动动画显示一个元素

    .slideUp()

    用滑动动画隐藏一个元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="../jquery-3.6.1.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div>div>
    19.     <button id="up">upbutton>
    20.     <button id="down">downbutton>
    21.     <script>
    22.         var show = $("#up");
    23.         var hide = $("#down");
    24.         var div = $("div");
    25.         show.click(
    26.             function(){
    27.                 //动画一秒后划出div
    28.                 div.slideDown(1000);
    29.             }
    30.         )   
    31.         hide.click(
    32.             function(){
    33.                 //动画一秒隐藏div
    34.                 div.slideUp(1000);
    35.             }
    36.         )
    37.     script>
    38. body>
    39. html>

            自定义动画animate()

    自定义动画

    语法:

      选择器.animate(

      {

        动画所执行的操作

       }, 执行时间);

    );

            

  • 相关阅读:
    InterSystems IRIS使用python pyodbc连接 windows环境,odbc驱动安装，DSN配置，数据源配置
    FreeRTOS入门教程（信号量的概念及API函数使用）
    Windows提取环境变量
    C++11 条件变量
    mysql高级篇
    [moeCTF 2023] crypto
    intel驱动程序和支持助理常见问题：不识别、无法检测等问题解决方法
    前后端分离权限系统
    与脑交互最高效的交互方式：深度内部处理 冥想
    基于Apache Hudi和Debezium构建CDC入湖管道
  • 原文地址：https://blog.csdn.net/cccccccmmm/article/details/126637073