一. 節點操作

1. append()

在父元素後面添加子節點

語法:

父元素.append(子節點)

$('.box1').append(`<h2>我是二級標題</h2>`);

2. $()可以將一個普通字符串轉成一個JQuery對象

    let $span = $('<span>123</span>');
    // console.log($span);
    // 不能這麼寫 ,下面的寫法是選擇文檔中的p標籤了
    $('span')

3. 創建節點

$('<p></p>')

$()不僅僅能選擇節點也能創建節點

4. appendTo()

將一個jQuery元素添加到另外一個元素中,和append()方法是相反的,被動形式,追加於

$('<p>好的</p>').append($('.box1'))

5. prepend()

在父元素的最前面插入節點

    $('.box1').prepend('<h1>h1標題</h1>')

6. prependTo()

prependTo()被動形式插入到父元素節點最前面

    $('<p>沒問題</p>').prependTo($('.box1'))

7. after()

在選中的元素後面插入一個兄弟元素節點

所有div標籤後面插入一個span兄弟元素

    $('div').after('<span>白日依山盡</span>')

8. before()

在選中的元素前面插入一個兄弟節點

    $('div').before('<span>吃了沒</span>')

9. insertBefore()

不同於原生的方法,在兄弟節點前插入新的節點

    $('<p>馬蘭開花二十一</p>').insertBefore($('p')[2])

10. wrap()

給選中的元素外邊添加一個包裹元素

    $('p:first').wrap('<div class="wrap"></div>');

11. wrapAll()

給所有的元素添加一個包裹元素

    $('div').wrapAll('<div class="wrap"></div>');

12. replaceWith()

將選中的元素替換掉,元素節點替換

    $('p:first').replaceWith('<div class="wrap">123</div>');

13. empty()

清空元素中的內容

    $('.box1').empty()

清空之後大盒子box1依舊存在

14. remove()

刪除節點

清空box1中的所有節點(包括box1本身)

    $('.box1').remove()

box1本身也被刪除掉

15. clone()

節點克隆,參數爲布爾值

如果不傳參數,默認爲false,表示不可克隆元素的事件

如果傳true,表示克隆元素的事件

$('div').clone();
$('div').clone(true);
// true表示要克隆div元素身上的事件

原生JavaScript的克隆,使用cloneNode()

如果不傳參數,默認爲false,表示不克隆元素的後代節點

如果參數爲true,表示不僅克隆當前的元素節點,還會將所有的後代節點克隆下來

元素的克隆方法只會克隆節點,不會克隆事件

二. 事件監聽

1. 通過事件名綁定事件

在JQuery裏面,所有事件均變成回調函數,事件一律不加on

    $('.box1').click(function () {
        alert('你好');
    })

案例

    $('p').mouseenter(function(){
        $(this).css('background-color','#9CCC65');
    })

    // 鼠標離開
    $('p').mouseleave(function(){
        $(this).css('background-color','#4FC3F7');
    })

2. 通過on綁定事件

    //給box2綁定點擊事件
   $('.box2').on('click',() => {
        alert('123');
    })

3. 通過off取消事件綁定

    //取消給box2的點擊事件
    $('.box2').off('click');

4. 值綁定一次事件one()

    //點擊div時只會打印一次1
    $('div').one('click',()=>{
        console.log(1);
    })

5. 移入移出事件

    $('.box1').hover(function(){
        // 鼠標移入觸發
        console.log(1);
    },function(){
        // 鼠標移出觸發
        console.log(2);
    })

6. 獲取對象事件源

    $('.box2').on('click',(ev) => {
        alert('123');
        //獲取當前點擊的原生DOM元素
        console.log(ev.target)
    })

二. animation方法

1.animate方法的基本使用

該方法接收兩個參數:

第一個參數：終點JSON

第二個參數：動畫運行的時間，毫秒

第三個參數爲動畫運行完後的參數

    $('p:eq(5)').animate({'margin-left':200,'margin-top':300},2000);

2. 動畫運行完的回調函數

第三個參數爲動畫運行完後的參數

背景顏色是不能在動畫裏漸變的,只有在回調裏完成,如果想讓顏色慢慢漸變需要使用css3技術.

  $('p:eq(5)').animate({'margin-left':200,'margin-top':300},2000,function() {
       // console.log(1);
       $(this).css('background-color','#8BC34A');
   });

3.動畫排隊

3.1 同一個元素的不同動畫會排隊

    $('p:first').animate({'width':500},1000,function() {
       $(this).css('background-color','pink');
   })
   $('p:first').animate({'height':300},1000)

jQuery的動畫和我們封裝的不一樣，不是斜着走的，而是先向右運動，結束後在向下移動

因爲jQuery默認有一個處理機制，叫做動畫排隊

動畫排隊：

當一個元素接收到了兩個animate命令後，後面的animate會排隊

所以上面的動畫，先豎着跑在橫着跑，總動畫時長爲3000毫秒

如果想同時變化就寫在一個animate裏面

   $('p:first').animate({'width':500,'height':300},1000,function() {
       $(this).css('background-color','pink');
   })

3.1 不同元素的動畫不會存在動畫排隊

這裏的p選擇的是多個元素，不排隊同時運行動畫

    $('p').animate({'width':500,'height':60},2000,function() {
        $(this).css('background-color','pink');
    })

三. 動畫的相關方法

1.內置的show(),hide(),toggle()方法

方法	功能
show()	顯示
hide()	隱藏
toogle()	切換

基本使用方法:

show([time[,callback]])

參數都是可選的>_<

1.1 沒有參數的情況

$('div').show();  // 讓div元素顯示
$('div').hide();  // 讓div元素隱藏,添加display:none
$('div').toggle();// 切換顯示狀態,自行帶有判斷,如果顯示,則隱藏,如果隱藏則顯示

1.2 如果有數值參數,將變爲動畫,第一個參數爲運動速度或時間

速度單詞,fast normal, slow ,參數爲字符串,通常不建議使用,因爲是JQuery內置的,我們不能準確的把握時間

如果傳入的爲時間,則單位爲毫秒數

讓元素在顯示與影藏之間動畫運動1s,還有透明度變換

$('div').show(1000);  // 從左上角徐徐展開
$('div').hide(1000);  // 徐徐縮小到左上角,運動完成添加display:none
$('div').toggle(1000);// 切換顯示狀態,自行帶有判斷,如果顯示,則隱藏,如果隱藏則顯示

1.3 第二個參數爲運動完成後的回調

$('input:eq(0)').click(function(){
    $('div').show(1000,function(){
        $(this).css('background','red');  // 動畫運行完執行的回調函數
    });
})

案例:

   let is_click = true;
    $('.display').on('click',function () {
        if(is_click) {
            $('.box3').hide(1000);
        }else{
            $('.box3').show(1000);
        }
        is_click = !is_click;
    })

如果不傳時間參數

表示瞬間顯示或隱藏,不會有過渡效果

如果傳時間參數

表示顯示和隱藏之間會有時間過渡,在過渡的過程中,JQuery會有通過寬高以及透明度等讓元素有過渡效果,當結束運動之後變爲display:none或display:block;

不但可以傳數值,還可以傳速度有關的單詞

fast normal, slow

2. slideDown(),slideUp(),slideToggle()

滑動,捲簾運動,這個動畫改變的就只有元素的高度

使用方式:

slideDown([time[,callback]])

2.1 不傳參數的情況

slideDown()方法的動畫機理

一個display:none;的元素,瞬間顯示,瞬間高度變爲0,然後jQuery自己捕捉原有的height作爲動畫的重點.

最好不要用行內元素做動畫

等價於:

$('div').show(); // 瞬間顯示

let oldHeight = $('div').css('height'); // 記住原有高度

$('div').css('height':0); // 將高度設置爲0

$('div').animate({'height':oldHeight},1000); // 執行高度從0到原有高度的動

$('div').slideDown();  // 下滑展開
$('div').slideUp();    // 上滑收回
$('div').slideToggle();// 滑動切換

2.2 第一個參數爲運動速度或時間

速度單詞,fast normal, slow ,參數爲字符串

如果傳入的爲時間,則單位爲毫秒

$('div').slideDown(1000);

2.3 傳入的第二個參數爲回調函數

$('div').slideDown(function(){
    $(this).css('background','red')
});

2.4 結合上面兩種方法自動執行

   $('div').show(1000,function(){
       $(this).slideUp(1000,function(){
           $(this).slideDown(1000,function(){
               $(this).hide(1000)
           })
       })
   })

3. fadeIn(),fadeOut(),fadeTo(),fadeToggle();

淡入淡出的一系列方法

如果元素有opacity屬性,一定要理解,你所設置的opacity值爲,淡入的終點值,如果你設置爲0,那麼元素將永遠淡入不了;

fadeIn()動畫機理:

一個display:none的元素,瞬間可見,然後透明度瞬間變爲opacity:0,然後自己的opacity開始變換,如果自己沒有設置opacity,就變爲1

3.1 不傳參數淡入或淡出

$('div').fadeIn();      // 淡入
$('div').fadeOut();     // 淡出 
$('div').fadeTo();      // 淡入到哪個數字,不傳參數沒效果,最好是時間和最終的opacity值一樣設置.
						// 這個比較特殊,如果起點至比較大,就是淡出,起點值小,就是淡入
$('div').fadeToggle();  // 淡入淡出切換

3.2 第一個參數爲速度或時間

$('div').fadeIn(1000);      // 淡入過程1000完成
$('div').fadeOut(1000);     // 淡出 
$('div').fadeTo(1000);      // 第一參數爲過渡時間,第二個但是纔是淡入到哪個數字
$('div').fadeToggle(100);  // 淡入淡出切換

3.3 第三個參數是回調函數

$('div').fadeIn(1000,function(){
    
});

fadeTo()方法比較特殊:

如果不傳參數沒有效果,最好是時間和透明度參數一起傳入

第一個參數表示動畫的運行時間

第二個參數表示的是透明度變化的終點值

        $('div').fadeTo(2000,0.8)

在開發者工具中可以清楚的看見opacity值的變化....

4. stop()

關於動畫停止一共有四種,不同的參數情況不同

stop();
stop(true);
stop(true,true);
stop(false,true);

4.1 不傳入參數

stop ()停止動畫如果沒有參數,則表示停止當前的animate動畫,但是不清除動畫隊列,立即執行後面的animate動畫

$('div').stop();

4.2 stop(true)

停止當前animate動畫,並且清除動畫隊列,盒子此時留在停止動畫時的位置

$('div').stop(true);

4.3 stop(true,true)

停止當前animate動畫,盒子瞬間停在當前animate動畫的終點位置,並且清除動畫隊列,

可以理解爲瞬間執行完當前動畫,並且清除動畫隊列

$('div').stop(true,true);

4.4 stop(false,true)

瞬間完成當前的animate動畫,但是不會清除動畫隊列,並且執行後面的動畫

$('div').stop(false,true);

Emmmmmm......看完這幾個方法,你有沒有疑惑,這啥都有了,爲啥就是沒有過stop(true,false)呢???

其實stop(true),就是stop(true,false);後面的false可以省略,現在就明白了吧,stop()就是stop(false,false);

一點點小小的總結 :

stop() 對應 stop(fasle,false);

stop(true) 對應 stop(true,false);

stop(true,true) 對應 stop(true,true);

stop(false,ture) 對應 stop(false,ture) ;

以上的四種方法都會清除當前的動畫,stop方法接收兩個參數:

第一個參數:是否清除動畫隊列,true,清除動畫隊列,false,不清除動畫隊列

第二個參數:停止當前animate動畫,停止後動畫的位置,true爲瞬間結束動畫,動畫停止後位置爲當前動畫的終點,false,停止動畫值,元素停留在停止動畫的位置

案例

<style>
        * {
            margin:0;
            padding:0;
        }

        .box {
            position: absolute;
            left:50px;
            top:80px;
            width: 100px;
            height: 100px;
            /*display: none;*/
            /*opacity: 0;*/
            background-color: #FF5722;
        }

        button {
            width: 200px;
            height: 50px;
            background-color: #80CBC4;
            font-size:18px;
        }
    </style>


    <button>stop()</button>
    <button>stop(true)</button>
    <button>stop(true,true)</button>
    <button>stop(false,true)</button>
    <div class="box"></div>


    <script>
        $('div').animate({'left':700},1000);
        $('div').animate({'top':500},1000);
        $('div').animate({'left':50},1000);
        $('div').animate({'top':80},1000);
        $('button:eq(0)').click(function () {
           $('.box').stop();
        })
        $('button:eq(1)').click(function () {
            $('.box').stop(true);
        })
        $('button:eq(2)').click(function () {
            $('.box').stop(true,true);
        })
        $('button:eq(3)').click(function () {
            $('.box').stop(false,true);
        })
    </script>

下面分別展示了正常狀態下的效果,stop()的效果,stop(true)的效果及stop(true,true)和stop(false,true)的效果.

一張動圖可能不能完全的展示出所有效果,大家可以自己動手嘗試一下,和前面的文字想結合還是很好理解的.

4.5 stop()可以防止動畫積累

每次點擊都會在動畫隊列裏添加一個動畫,動畫會排隊

        $('button:eq(0)').click(function(){
            $('div').animate({'left':700},1000);
        })
        $('button:eq(1)').click(function(){
            $('div').animate({'left':100},1000);
        })

連續觸發之後再不觸發,動畫依舊會運行(之前點擊的動畫會在動畫隊列中,會一直運動完所有的已點擊動畫)

就像定時器,設表先關

用動畫先關閉前面的動畫

可以連續打點的調用,先清除動畫隊列,再行新的動畫

5. finish()

瞬間完成所有動畫

        $('button:eq(2)').click(function(){
            $('div').finish();
        })

6. delay()

延遲,觸發動畫之後延遲多少時間再執行動畫,必須放在運動語句之前

$('div').delay(1000).animate({'left':500},1000);
$('div').delay(1000).slideUp();

注意hide()不加參數,就不是動畫,是瞬間完成的,加參數哪怕數字1也是動畫

$('div').delay(1000).hide(3000);

7. is(":animted")

判斷一個元素是否在運動中,可以防止動畫積累

$('div').animate({'width':900},4000);
$('div').click(function(){
    alert($(this).is(':animated'))
});

JQuery學習筆記二(節點操作,事件監聽,動畫相關方法)

上篇JQuery學習筆記一(JQuery選擇器.css樣式操作,節點關係)