JavaScript-day42

最新推荐文章于 2024-04-26 16:47:03 发布

君莫笑灬金彪

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量135

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_43369815/article/details/114643472

版权

Day42 事件委托、动画、插件、Ajax

1. 动画

1.1 显示/隐藏
Hide() : 隐藏,无参是直接隐藏,第一个参数是毫秒数
show() : 显示,无参是直接显示出来,第一个参数是毫秒数
toggle() : 切换,显示就变隐藏,隐藏就变显示,第一个参数是毫秒数

第二个参数是回调函数,比如,2秒内显示完成,显示完成后把大小更改
因为动画效果本质就是定时器,而定时器实质会开启一个线程,和定时器之外的代码异步执行,假如我们需要在动画完成之后,要做一些其他操作,就需要用到第二个参数

在这里插入图片描述
新事件 - toggle,需要引入1.8.3的jQuery包

   $(function () {
            // 如果不写参数,或者写一个时间,那么toggle只是隐藏和显示的功能
            // $("#topicList h3").toggle(1000);

            // 如果传递了两个函数的话,则toggle就不会隐藏和显示了
            // 除非你在函数中的代码体现了显示或隐藏
            // 这个时候 toggle只是点击事件而已,通过点击,交替执行两个函数
            // 第一次点击执行第一个函数,第二个点击执行第二个函数,第三次点击执行第一个函数....
            $("#topicList h3").toggle(function(){
                console.log(111);
            },function(){
                console.log(222);
            })

            // 切换效果,两个参数,都是函数,第一次点击执行第一个函数,第二次执行第二个函数,
            // 第三次执行第一个函数.....

            // toggle在1.8.3包中
            // jQuer对象.toggle(函数1,函数2);
            // jQuery对象.click(函数);
            // $("#topicList h3").toggle(function () {
            //     // 获取UL
            //     var ul = $(this).next("ul");
            //     // 执行显示
            //     // ul.show();
            //     // 1秒显示完成
            //     // ul.show(1000);
            //     // 1秒显示完成,完成后弹框-加载完成
            //     ul.show(1000,function(){
            //         alert('加载完成');
            //     });
            // }, function () {
            //     // 获取UL
            //     var ul = $(this).next("ul");
            //     // 直接隐藏
            //     // ul.hide();
            //     // 1秒隐藏完成
            //     // ul.hide(1000);
            //     // 1秒隐藏完成,完成后弹框-看不见了吧
            //     ul.hide(1000,function(){
            //         alert('看不见了吧');
            //     });
            // });

1.2 淡入/淡出
fadeIn , fadeOut,fadeToggle , 用法同上

在这里插入图片描述

// 2 淡入淡出 fadeToggle , fadeIn , fadeOut
		$("#topicList h3").click(function(){
        $(this).next('ul').fadeToggle(1000);
  });

1.3 滑动
slideDown , slideUp,slideToggle , 同上

在这里插入图片描述

// 3 滑动效果 slideDown, slideUp, slideToggle
    $("#topicList h3").click(function(){
    $(this).next('ul').slideToggle(1000);
 });

1.4 自定义
以上几种方法,都不是我们想要的效果,我们就可以通过animate进行自定义
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #block {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 10px;
        }
    </style>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("#go").click(function () {
                // 1 animate原理 : 由原始状态到达一个目的状态,支持链式调用
                // 三个参数, 1 目标状态(最终要显示什么效果)
                // 2 多久完成
                // 3 完成后的回调函数(也可以不写)
                // !! 注意 属性要把 - 改为 首字母大写,如果有字符串括起来,就无所谓了
                // $("#block").animate({
                //     width: "200px",
                //     height: "200px",
                //     fontSize:'50px'
                // }, 1000).animate({
                //     width: "100px",
                //     height: "100px",
                //     "font-size":'20px'
                // }, 1000);


                // 2 透明度渐变
                // $("#block").css({
                //     'opacity':0
                // }).animate({
                //     'opacity':1,
                //     width:"200px"
                // },1000);

                // 3 更改位置
                // $("#block").css({
                //     'position':'relative'
                // }).animate({
                //     'left':"100px"
                // },1000);

                // 4 切换
                // $("#block").css({
                //     'position':'relative'
                // }).animate({
                //     'width':"toggle",
                //     'opacity':'toggle'
                // },1000);

                // 不能设置颜色
                // $("#block").animate({
                //     'color':'green'
                // },1000);

                // 6 抖动换色
                $("#block").css({
                    'position': 'relative'
                }).animate({
                    'left': '10px',
                    'opacity': 0.8
                }, 20).animate({
                    'left': '-10px',
                    'opacity': 0.6
                }, 20).animate({
                    'left': '10px',
                    'opacity': 0.4
                }, 20).animate({
                    'left': '-10px',
                    'opacity': 0.2
                }, 20).animate({
                    'left': '10px',
                    'opacity': 0
                }, 20, function () {
                    $("#block").css("background-color", 'green').animate({
                        'left': '-10px',
                        'opacity': 0.2
                    }, 20).animate({
                        'left': '10px',
                        'opacity': 0.4
                    }, 20).animate({
                        'left': '-10px',
                        'opacity': 0.6
                    }, 20).animate({
                        'left': '10px',
                        'opacity': 0.8
                    }, 20).animate({
                        'left': '0px',
                        'opacity': 1
                    }, 20)
                });
            });

            $("#block").mouseenter(function () {
                // 7 移入变大
                $("#block").css({
                    'position': 'relative'
                }).animate({
                    left:'1px',
                    width:'110px',
                    height:'110px'
                }, 100).animate({
                    left:'-1px',
                    width:'120px',
                    height:'120px'
                }, 100).animate({
                    left:'0px'
                }, 100);
            }) 
            $("#block").mouseleave(function () {
                // 7 移入变大
                $("#block").css({
                    'position': 'relative'
                }).animate({
                    left:'1px',
                    width:'115px',
                    height:'115px'
                }, 100).animate({
                    left:'-1px',
                    width:'110px',
                    height:'110px'
                }, 100).animate({
                    left:'0px'
                }, 100);
            })
        });
    </script>
</head>

<body>
    <button id="go">Run</button>
    <div id="block">123</div>
</body>

</html>

1.5 Stop
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #block {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 10px;
        }
    </style>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("#go").click(function () {
               
                $("#block").css({
                    'opacity':0
                }).animate({
                    'opacity':1,
                    width:"200px"
                },10000);
            });
            $("#stop").click(function () {
                // 停止动画效果
                $("#block").stop();
               
           });
        });
    </script>
</head>

<body>
    <button id="go">Run</button> <button id="stop">停止</button>
    <div id="block">123</div>
</body>

</html>

1.6 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./js/jquery-1.11.1.min.js"></script> -->
    <!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
    <script src="./js/jquer-1.8.3.js"></script>
    <script>
        $(function () {
            // 如果不写参数,或者写一个时间,那么toggle只是隐藏和显示的功能
            // $("#topicList h3").toggle(1000);

            // 如果传递了两个函数的话,则toggle就不会隐藏和显示了
            // 除非你在函数中的代码体现了显示或隐藏
            // 这个时候 toggle只是点击事件而已,通过点击,交替执行两个函数
            // 第一次点击执行第一个函数,第二个点击执行第二个函数,第三次点击执行第一个函数....
            $("#topicList h3").toggle(function(){
                console.log(111);
            },function(){
                console.log(222);
            })

            // 切换效果,两个参数,都是函数,第一次点击执行第一个函数,第二次执行第二个函数,
            // 第三次执行第一个函数.....

            // toggle在1.8.3包中
            // jQuer对象.toggle(函数1,函数2);
            // jQuery对象.click(函数);
            // $("#topicList h3").toggle(function () {
            //     // 获取UL
            //     var ul = $(this).next("ul");
            //     // 执行显示
            //     // ul.show();
            //     // 1秒显示完成
            //     // ul.show(1000);
            //     // 1秒显示完成,完成后弹框-加载完成
            //     ul.show(1000,function(){
            //         alert('加载完成');
            //     });
            // }, function () {
            //     // 获取UL
            //     var ul = $(this).next("ul");
            //     // 直接隐藏
            //     // ul.hide();
            //     // 1秒隐藏完成
            //     // ul.hide(1000);
            //     // 1秒隐藏完成,完成后弹框-看不见了吧
            //     ul.hide(1000,function(){
            //         alert('看不见了吧');
            //     });
            // });

            // $("#topicList h3").click(function(){
            //     // 切换,显示就隐藏,隐藏就显示
            //    // $(this).next('ul').toggle('1000');
            //    var ul = $(this).next('ul');
            //    if(ul.css('display') == 'none'){
            //        ul.show(1111);
            //    }else{
            //        ul.hide(1111);
            //    }
            // });

            // 2 淡入淡出 fadeToggle , fadeIn , fadeOut
            // $("#topicList h3").click(function(){
            //     $(this).next('ul').fadeToggle(1000);
            // });

            // 3 滑动效果 slideDown, slideUp, slideToggle
            // $("#topicList h3").click(function(){
            //     $(this).next('ul').slideToggle(1000);
            // });
        });
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 12px;
        }

        body {
            padding: 40px;
        }

        #topicList {
            width: 600px;
            border: 1px solid #999;
        }

        #topicList h3 {
            height: 45px;
            background-color: #345;
            color: #fff;
            border-bottom: 1px solid #fff;
            line-height: 45px;
            cursor: pointer;
        }

        #topicList h3 span {
            font-size: 20px;
            position: relative;
            left: 15px;
        }

        #topicList ul {
            list-style: none;
            /* 隐藏 */
            display: none;
        }

        #topicList ul li {
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dotted #aaa;
        }
    </style>
</head>

<body>
    <div id="topicList">
        <h3>
            <span>今日热搜</span>
        </h3>
        <ul>
            <li>四川自贡"毒花生随电瓶车被盗"续：已追回电瓶车，"毒花生"系报案人谎称，已对报案人进行批评教育;</li>
            <li>北京：东城区推出新冠疫苗接种线上统一预约平台，可通过微信小程序"声智健康"预约；</li>
            <li>北京：启动空气重污染黄色预警。北京市教委：黄色预警期间，中小学停止户外活动，西城、海淀等区已启动应急预案；</li>
            <li>专家：国产人工角膜或今年上半年用于临床，恢复好可以到1.0的视力，目前有30多个临床病人，视力恢复到0.5以上，效果很好；</li>
            <li>继《李焕英》宣布延长上映至4月11日后，《唐探3》也宣布将延长至4月10日；</li>
            <li>杭州：第三方房源平台不得挂牌未核验房源，目前已下架660余套；</li>
            <li>成都多部门：脏车禁止进入成都5+2主城区，将在城区及主要出入城通道进行执法检查；</li>
            <li>3月9日，中俄两国正式签署合作建设国际月球科研站谅解备忘录，将联合推动国际月球科研站广泛合作；</li>
            <li>全国人大代表：建议普通高中录取率提至80%以上，家长：希望提高到95%以上；</li>
            <li>3月8日菲律宾一市发生枪击事件，包括市长和2名警察在内5人身亡。菲司法部已下令调查此案；</li>
        </ul>
    </div>
</body>

</html>

2. 事件

2.1 事件注册
Bind和on可以绑定多个事件,但是不能动态绑定(后添加的元素,不会拥有该事件)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            // $("p").click(function(){
            //     console.log(this.innerText);
            // });

            // 支持绑定多个事件,但是触发函数一致 多个用空格隔开
            // $("p").bind('click mouseover',function(){
            //     console.log(this.innerText);
            // });
            // 不会对新增元素绑定
            // $("#home").append('<p>子节点2</p>');

            // on 第一种 不会动态绑定
            // $("p").on('click', function () {
            //     console.log(this.innerText);
            // });

            // on 第二种 可以进行动态绑定
            // 设置域为父标签
            // 对home下的p绑定点击事件(本质使用事件源)
            //   $("#home").on('click','p', function () {
            //     console.log(this.innerText);
            // });

            // 对父标签绑定事件,然后由子标签p进行触发
            $("#home").delegate('p','click',function(){
                console.log(this.innerText);
            });
            // 会对新增元素绑定
            $("#home").append('<p>子节点2</p>');
        });
    </script>
</head>

<body>
    <div id="home">
        <p>子节点1</p>
    </div>
</body>

</html>

2.2 事件委托
本质就是利用冒泡机制和事件源,对父标签绑定事件,然后通过子标签去触发执行
这样可以进行事件的动态绑定,使新增元素也拥有事件监听
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(event){
                event = event?  event : window.event; 
                console.log(event);
            });
        });
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>

Key,keyCode,target,type,pageX,pageY,data

2.4 Each
就是forEach,主要做遍历操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
      $(function(){
        var lis = $("li");
        console.log(lis);
        // js写法
        for(var i = 0 ; i< lis.length;i++){
            console.log(lis[i]);
        }

        // jQuery写法
        lis.each(function(){
            // this是jQuery对象中,封装的每一个DOM对象
            // this是DOM,DOM,DOM
            console.log($(this).html());
        });
      });
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

3. HTML设置与捕获

3.1 Html()

<body>
    <button id='set1'>设置内容(html)</button>
    <button id='get1'>获取内容(html)</button>
    <button id='set2'>设置内容(text)</button>
    <button id='get2'>获取内容(text)</button>
    <button id='get3'>获取输入框内容</button>
    <button id='set3'>设置输入框内容</button>
    <p>我是一个段落</p>
    <input type="text" name="" id="in">
</body>

Html() 等价于 innerHTML
无参是获取,有参是设置

 var p = $("p");
 var inp = $("#in");
  $('#set1').click(function(){
      p.html('通过html()设置成功<span>子标签</span>');
  });
  $('#get1').click(function(){
      console.log("通过html() 获取 : "+p.html());;
  });

3.2 Text()
Text() 等价于 innerText
无参是获取,有参是设置

 $('#set2').click(function(){
 p.text('通过text()设置成功<span>子标签</span>');
  });

  $('#get2').click(function(){
      console.log("通过text() 获取 : "+p.text());;
  });

3.3 Val()
Val()等价于 value , 常用于表单操作
无参是获取,有参是设置

$('#set3').click(function(){
    inp.val('通过val()设置成功');
});

$('#get3').click(function(){
    console.log("通过val() 获取 : "+inp.val());;
});

3.4 Attr()

<body>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <input type="checkbox" id='all'> <span>全选</span>
    <input type="button" id="reverse" value="反选">

</body>

属性操作,等价于 setAttribute和getAttribute
一个参数是获取对应的属性值,两个参数是设置该属性的值
可以自定义属性,但是输入框相关的,比如checked等获取不到

  // 判断当前全选复选框是否是选中状态
  // undefined
       // console.log($(this).attr('checked'));
       // // all
       // console.log($(this).attr('id'));
       // // 可以操作自定义属性
       // $(this).attr('aaa','xxxx')

3.5 Prop()
一个参数,如果是表单的checked等,就是判断该元素是否有该属性(是否被选择)
如果是id,class之类的就是获取对应的值
两个参数是设置该元素的属性和值
只支持元素自带属性,不能自定义属性
一般用于表单操作,比如判断是否选中


   // true/flase
   // console.log($(this).prop('checked'));
   // // all
   // console.log($(this).prop('id'));
   // // 可以设置自带属性
   // $(this).prop('class','xxx')
   // // 不可以自定义属性
   // $(this).prop('aaa','xxx')

   if ($(this).prop('checked')) {
       // 如果是选中 , 把所有的复选框都选中
       $("input[type='checkbox']").prop('checked',true);
   } else {
       // 如果是取消选中,把所有的复选框都取消
       $("input[type='checkbox']").prop('checked',false);
   }

4. 宽高相关

4.1 Width()和height()

只是宽高,不包含内外边距,无参是获取,有参是设置
在这里插入图片描述
4.2 InnerWidth()和innerheight()
包含内边距

4.3 outerWidth()和outerheight()
包含内边距和边框
如果想要获取外边距需要加 true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv{
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 20px;
            border: 1px solid;
        }
    </style>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            var dv = $("#dv");
            $("#btn").click(function(){
                // 100
                console.log(dv.height()+" : "+dv.width());
                // 120 
                console.log(dv.innerHeight()+" : "+dv.innerWidth());
                // 122
                // 如果想要获取外边距 需要加 true
                console.log(dv.outerHeight(true)+" : "+dv.outerWidth());

                // 设置高度为200
                dv.height(200);
            });
        });
    </script>
</head>
<body>
    <button id="btn">获取</button>
    <div id="dv"></div>
</body>
</html>

4.4 滚动条
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            position: fixed;
            right: 10px;
            bottom: 100px;
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 20px;
            display: none;
        }
    </style>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            
            window.onscroll=function(){
                // 滚动高度
                console.log($(this).scrollTop());
                // 窗口高度
                console.log($(this).height());
                // 滑动三分之二的时候,显示回到顶端
                if($(this).scrollTop() >= $(this).height()/3*2){
                    $("a").show(500);
                }else{
                    $("a").hide(500);
                }
            }
           
        });
    </script>
</head>
<body>
    <p id='one'>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>
    <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>
    <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>   <p>11</p>
    <a href="#one">回到顶端</a>
</body>
</html>

5. 元素操作

5.1 Append
尾部追加元素,添加为子标签
$(‘#div’).append§

在这里插入图片描述

// 1 append 内部尾部追加
// $("#dv").append("<p>子节点2</p>");
// // 把h4剪切,插入到dv的内部的尾部
// $("#dv").append($("h4"));
// // 把dv剪切,插入到dv2的内部的尾部
// $("#dv").appendTo($("#dv2"));

5.2 Prepend
插入到内部的首部


 // 2 prepend 内部首部追加
 // $("#dv").prepend("<p>子节点2</p>");
 // 把h4剪切,插入到dv的内部的首部
 // $("#dv").prepend($("h4"));

5.3 After
平级关系,插入到你后面

// 2 after 平级插入元素后面
// $("#dv").after("<p>子节点2</p>");
// 把h4剪切,插入到dv的后面
// $("#dv").after($("h4"));

5.4 Before
平级关系,插入到你前面

   // 2 before 平级插入元素前面
   // $("#dv").before("<p>子节点2</p>");
    // 把h4剪切,插入到dv的前面
    // $("#dv").before($("h4"));

5.5 Remove
删除一个节点


// 删除该元素
// $("h4").remove();

5.6 Empty
清空子节点

// 清空内部内容,保留该标签(dv)
 $("#dv").empty();

5.7 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv {
            border: 1px solid;
        }

        #dv2 {
            border: 1px solid red;
        }
    </style>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                // 1 append 内部尾部追加
                // $("#dv").append("<p>子节点2</p>");
                // // 把h4剪切,插入到dv的内部的尾部
                // $("#dv").append($("h4"));
                // // 把dv剪切,插入到dv2的内部的尾部
                // $("#dv").appendTo($("#dv2"));

                // 2 prepend 内部首部追加
                // $("#dv").prepend("<p>子节点2</p>");
                // 把h4剪切,插入到dv的内部的首部
                // $("#dv").prepend($("h4"));

                // 2 after 平级插入元素后面
                // $("#dv").after("<p>子节点2</p>");
                // 把h4剪切,插入到dv的后面
                // $("#dv").after($("h4"));

                // 2 before 平级插入元素前面
                // $("#dv").before("<p>子节点2</p>");
                // 把h4剪切,插入到dv的前面
                // $("#dv").before($("h4"));

                // 删除该元素
                // $("h4").remove();

                // 清空内部内容,保留该标签(dv)
                $("#dv").empty();
            });
        });
    </script>
</head>

<body>
    <button id="btn">添加</button>
    <div id="dv">
        <p>子节点1</p>
    </div>

    <h4>22222</h4>
    <div id="dv2"></div>
</body>

</html>

君莫笑灬金彪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-day42

Day42 事件委托、动画、插件、Ajax1. 动画1.1 显示/隐藏Hide() : 隐藏,无参是直接隐藏,第一个参数是毫秒数show() : 显示,无参是直接显示出来,第一个参数是毫秒数toggle() : 切换,显示就变隐藏,隐藏就变显示,第一个参数是毫秒数第二个参数是回调函数,比如,2秒内显示完成,显示完成后把大小更改因为动画效果本质就是定时器,而定时器实质会开启一个线程,和定时器之外的代码异步执行,假如我们需要在动画完成之后,要做一些其他操作,就需要用到第二个参数新事件 - t
复制链接

扫一扫