jQuery入門（三）--- jQuery語法

m0_47900991發表於2020-10-22
jQuery

jQuery入門（三）--- jQuery語法

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>

相關文章