jQuery入门（三）--- jQuery语法

最新推荐文章于 2022-07-02 12:01:28 发布

m0_47900991

最新推荐文章于 2022-07-02 12:01:28 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/m0_47900991/article/details/109211396

版权

jQuery入门（三）--- jQuery语法

5、jQuery动画-显示show（）隐藏hide（）
6、动态创建元素
7、jQuery添加节点的几种方法
8、清空节点
9、克隆节点clone（）

5、jQuery动画-显示show（）隐藏hide（）

5.1 三组基本动画

+ 显示（show（））与隐藏（hide（））是一组动画
     $obj.show([speed],[callback]);
        //参数1：speed(可选)；动画的执行时间
             //1.如果不传，就没有动画效果。如果是slidde和fade系列，会默认为normal
             //2.毫秒值（比如1000），动画再1000毫秒执行完成（推荐）
             //3.固定字符串，slow（600），normal（400），fast（200），如果传递其他字符串，则默认为normal。
        //参数2：callback（可选）；执行完动画后执行的回调函数

+ 滑入（slideDown（）） 与 滑出（slideUp（））与切换（slideToggle（）），效果与卷帘门类似
+ 淡入（fadeIn（））与淡出（fadeOut（））与切换（fadeToggle（））

10种jQuery动画案例：

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            display:none;
        }
    </style>

  <body>
    <input type="button" value="显示" id="show"/>
    <input type="button" value="隐藏" id="hide"/>
    <input type="button" value="切换" id="toggle"/> <br/>
    <input type="button" value="滑入" id="slideDown">
    <input type="button" value="滑出" id="slideUp">
    <input type="button" value="切换" id="slideToggle"> <br/>
    <input type="button" value="淡入" id="fadeIn"/>
    <input type="button" value="淡出" id="fadeOut"/>
    <input type="button" value="切换" id="fadeToggle"/> 
    <input type="button" value="淡入到哪里" id="fadeTo"/> <br/>
    
    <div id="div1"></div>
     <script>
         $(function(){
         //1、显示  show（）：
             //参数1：动画执行时间,毫秒数，或者代表时长的字符串  fast200  normal400  slow6 00
             //参数2：动画执行完成后的回调函数
             $('#show').click(function(){
                 //给id为div1的元素动画显示
                 //1.1 如果show（）这个方法没有参数，就没有动画效果
                 //$('#div1').show();
                 //1.2 要添加效果，给show添加参数, 回调函数
                 $('#div1').show(2000,function(){
                     alert('动画执行完毕了');
                 });
             })
         //2、隐藏  hide（）
             $('#hide').click(function(){
                 //让id为div1的元素动画隐藏
                 //2.1 没有参数没有动画效果
                 //$('#div1').hide();
                 //2.2 要添加效果，给hide添加参数, 回调函数
                 $('#div1').hide(2000,function(){
                     alert('隐藏了');
                 });     
             })
         //3、切换状态  toggle（）
             $('#toggle').click(function(){
                 $('#div1').toggle(1000);
             })

         //4、滑入  slideDown();
             //参数1：动画执行时间
             //参数2：动画执行完成后的回调函数
             $('#slideDown').click(function(){
                 //让id为div1的元素滑入
                 //没有参数，相当于给默认时长normal
                 $('#div1').slideDown(2000,function(){
                     alert('已经滑入了');
                 })
             })
         //5、滑出  slideUp();
             //参数1：动画执行时间
             //参数2：动画执行完成后的回调函数
             $('#slideUp').click(function(){
                 //让id为div1的元素滑出
                 //没有参数，相当于给默认时长normal
                 $('#div1').slideUp(2000,function(){
                     alert('已经滑出了');
                 })
             })
         //6、切换  slideToggle
             $('#slideToggle').click(function(){
                 $('#div1').slideToggle(1000);
             })

         //7、淡入  fadeIn（）
             $('#fadeIn').click(function(){
                 //让id为div1的元素淡入
                 //没有参数，相当于给默认时长normal
                 $('#div1').fadeIn(1000,function(){
                     alert('淡入完成');
                 })
             })
          //8、淡出  fadeOut（）
              $('#fadeOut').click(function(){
                 //让id为div1的元素淡出
                 //没有参数，相当于给默认时长normal
                 $('#div1').fadeOut(1000,function(){
                     alert('淡入完成');
                 })
             })
         //9、切换  fadeToggle
             $('#fadeToggle').click(function(){
                 $('#div1').fadeToggle(1000);
             })
        //10、淡入到哪里  fadeTo（）
             $('#fadeTo').click(function(){
                 $('#div1').fadeTo(1000,0.5);
             })
         })
     </script>
</body>

5.2 自定义动画 animate

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
            left:0;
        }
        #div1 {
            top:50px;
        }
        #div2 {
            top:170px;
        }
    </style>

  <body>
    <input type="button" value="从左到由800" id="lr800"/>
    <div id="div1"></div>
    <!--<div id="div2"></div>-->
    <script>
        $(function(){
            //自定义动画 animate()
            //参数1：必选的 对象 代表需要做动画的属性
            //参数2：可选的 时长 代表执行动画的时长
            //参数3：可选的 easing  代表缓动还是匀速  linear匀速  swing中间快（默认）
            //参数4：动画执行完毕时的回调函数
            $('#lr800').click(function(){
                //让id为lr800的元素动画移动到800的位置上
                $('#div1').animate({left:800,width:200,height:200,opacity:0.5},2000,'linear',function(){alert('动画完毕了')});
                //$('#div2').animate({left:800},2000,'swing',function(){alert('动画完毕')})
            })
        })
    </script>
</body>

5.3 动画队列–stop函数

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style> 
        div{
            width: 200px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>

<body>
    <input type="button" value="开始动画" id="start">
    <input type="button" value="结束动画" id="stop">
    <div></div>
    <script>
        $(function(){
        //1、开始动画：模拟一个动画队列
            $('#start').click(function(){
                $('div').slideDown(2000).slideUp(2000);
            });
        //2、停止动画：执行stop()
            //参数1：是否清除队列
            //参数2：是否跳转到最终效果
            $('#stop').click(function(){
                //$('div').stop(true,true);
                //$('div').stop(true,false);
                //$('div').stop(false,true);
                $('div').stop(false,false); //默认效果
            })
        })
    </script>
</body>

6、动态创建元素

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
        #div1{
            width: 300px;
            height: 300px;
            border:1px solid red;
        }
</style>
<body>
    <input type="button" value="html()" id="btnHtml1">
    <input type="button" value="$()" id="btn1"> <br/><br/>
    <div id="div1">
        <p>p1
            <span>span1</span>
        </p>
    </div>
    <script>
        $(function(){
        //原生js中创建节点： document.write(); innerHTML; document.createElement();
        //jQuery中如何创建节点： html(); $();
         //1、html(); 
            //设置或者获取内容
            $('#btnHtml1').click(function(){
              //1.1获取内容：html()方法不给参数
                //获取到元素的所有内容，包括标签和内容
                console.log($('#div1').html());
              //1.2 设置内容：html()给参数  会把原来的内容覆盖，设置的标签会被解析出来，搭配字符串拼接
                $('#div1').html('我是新设置的内容<a>解析标签</a>');
            })
          //2、$();
            //确实能创建元素，但创建的元素只存在于内存中，如果要在页面上显示，就要追加节点
            $('#btn1').click(function(){
                var $link = $('<a href="http://news.baidu.com">我是新闻</a>');
                //追加节点
                $('#div1').append($link);
            })
        })
    </script>
</body>

7、jQuery添加节点的几种方法

  append();     父元素.append(子元素)    
  prepend();    父元素.prepend（子元素）
  before();     元素A.before（元素B）
  after();      元素A.after（元素B）
  appendTo();   子元素.appendTo（父元素）

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
    <input type="button" value="append" id="btnAppend">
    <input type="button" value="prepend" id="btnPrepend">
    <input type="button" value="after" id="btnAfter">
    <input type="button" value="before" id="btnBefore">
    <input type="button" value="appendTo" id="btnAppendTo">
    <ul id="ul1">
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li id="li31">我是第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>     
    </ul>
    <ul id="ul2">
        <li>我是第1个li标签2</li>
        <li>我是第2个li标签2</li>
        <li id="li32">我是第3个li标签2</li>
        <li>我是第4个li标签2</li>
        <li>我是第5个li标签2</li>     
    </ul>
    <script>
        
        $(function(){
            //1.append();  
            //父元素.append(子元素) 作为最后一个子元素添加
            $('#btnAppend').click(function(){
                //1.1 给id为ul1的元素添加一个新li标签
                //var $liNew=$('<li>我是新创建的li标签，我在最后面</li>');
                //$('#ul1').append($liNew);
                
                $('#ul1').append('<li>我是新添加的li标签，我在最后面</li>');  //以上两行代码简写
                
                //1.2 把ul1中已经存在的li标签添加到ul中去  剪切后作为最后一个元素添加
                var $li31 = $('#li31');
                $('#ul1').append($li31);
                
                //1.3 把ul2中已经存在的li标签添加到ul1中去  剪切后作为最后一个元素添加到要添加的地方
                var $li31 = $('#li31');
                $('#ul2').append($li31);
            })
             //2、prepend（）
             //父元素.prepend（子元素）
                $(function(){
                    $('#btnPrepend').click(function(){
                    //2.1 新建一个li标签，添加到ul1中
                        $('#ul1').prepend('<li>我是新添加的li,我在最前面</li>')
                       
                    //2.2 把ul1中已经存在的li标签添加到ul1中去，剪切后作为第一个元素添加
                        //$li31=$('#li31');
                        //$('#ul1').prepend($li31);
                        $('#ul1').prepend($('#li31'));   //以上两行缩写
                        
                    //2.3 把ul2中已经存在的li标签添加到ul1中去  剪切后作为第一个元素添加到要添加的地方
                        var $li31 = $('#li31');
                        $('#ul2').prepend($li31);
                    })
                })
            //3、before（）
            //元素A.before（元素B） 把元素B插到元素A前面，作为兄弟元素添加
            $('#btnBefore').click(function(){
                //新建一个div
                var $divNew1=$('<div>我是新建的div</div>');
                $('#ul1').before($divNew1);
            })
            //4、after（）
            //元素A.after（元素B） 把元素B插到元素A后面，作为兄弟元素添加
            $('#btnAfter').click(function(){
                //新建一个div
                var $divNew2=$('<div>我是新建的div</div>');
                $('#ul1').after($divNew2);
            })
            //5、appendTo（）
            //子元素.appendTo（父元素） //把子元素作为父元素的最后一个元素添加
            $('#btnAppendTo').click(function(){
                //新建一个li元素添加到ul1的最后
                var $liNew=$('<li>我是新创建的li</li>');
                $liNew.appendTo('#ul1');
            })
        })
    </script>
</body>

8、清空节点

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
    <input type="button" value="按钮" id="btn">
    <ul id="ul1">
        <li>我是第1个标签</li>
        <li>我是第2个标签</li>
        <li id="li3">我是第3个标签</li>
        <li>我是第4个标签</li>
        <li>我是第5个标签</li>
    </ul>
    
    <script>    
        //清空元素：empty（）
        $(function(){
            $('#btn').click(function(){
                //1、清空ul
                //$('#ul1').html(""); //不推荐使用，由可能会造成内存泄漏，不安全
                 $('#ul1').empty();  //不仅清空掉元素，还清空掉元素上的事件，推荐使用
                //2、移除id为li3的元素
                 $('#li3').remove();  
                //3、移除ul，通过li3这个标签，移除他的父元素ul
                 $('#li3').parent().remove();
            })
        })
    </script>
</body>

9、克隆节点clone（）

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
    <input type="button" value="克隆" id="clone">
    <div id="div1">
        <span>span1</span>
        <p>p1
            <b>b1</b>
        </p>
    </div>
    <script>
        $(function(){
            //jQuery中克隆节点：clone（）
            //存在于内存中，要显示在页面中，就要追加到页面中
            //clone（）方法参数不管是true还是false，都是会克隆到后代节点的
            //clone（）方法参数是true，会把事件也一起克隆，false，不会克隆事件，默认false
            //给按钮设置点击事件
            $('#clone').click(function(){
                var $cloneDiv = $('#div1').clone();
               // console.log($cloneDiv);
               //把克隆的节点追加到body中
               $('body').append($cloneDiv);
            })
        })
    </script>
</body>

m0_47900991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery入门（三）--- jQuery语法

jQuery入门（三）--- jQuery语法5、jQuery动画-显示show（）隐藏hide（）5.1 三组基本动画5.2 自定义动画 animate5.3 动画队列--stop函数6、动态创建元素7、jQuery添加节点的几种方法8、清空节点9、克隆节点clone（）5、jQuery动画-显示show（）隐藏hide（）5.1 三组基本动画+ 显示（show（））与隐藏（hide（））是一组动画 $obj.show([speed],[callback]); //参数1
复制链接

扫一扫