jQuery事件與動畫

一. 事件綁定

on() 方法

在被選元素及子元素上添加一個或多個事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()瞻惋、live() 和 delegate() 方法的新的替代品儡首。

.on 直接綁定


     $('.box li').on('click', function() {
                console.log(1)
                var str = $(this).text()
                $('#wrap').text(str)
            })

事件代理綁定


$('.box ul').on('click', 'li', function() {
            var str = $(this).text()
            $('#wrap').text(str)
        })

二. 實(shí)現(xiàn)動態(tài)效果方法

1. show()/ hide()

show()如果被選元素已被隱藏坑夯，則顯示這些元素
hide()如果被選的元素已被顯示，則隱藏該元素纽帖。
hide與show同有兩個參數(shù)：.hide(speed,callback)/.show(speed,callback)
speed：規(guī)定元素從可見到隱藏的速度宠漩。默認(rèn)為 "0"举反。
值：毫秒（比如 1500）/"slow"/"normal"/"fast"
在設(shè)置速度的情況下挂签，元素從可見到隱藏的過程中贪染，會逐漸地改變其高度、寬度、外邊距娃磺、內(nèi)邊距和透明度。
callback: hide 函數(shù)執(zhí)行完之后迈勋，要執(zhí)行的函數(shù)勉耀。除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)粗蔚。

<p>今天也要好好學(xué)習(xí)</p>
    <button class="abc">hide隱藏</button>
    <button class="ccb">show顯示</button>
    <script>
        $(document).ready(function() {
            $('.abc').click(function() {
                $('p').hide(2000)//設(shè)置毫秒為2000,產(chǎn)生動態(tài)效果
            })
            $('.ccb').click(function() {
                $('p').show(2000)
            })
        })
    </script>

Honeycam 2018-12-24 12-58-39.gif

2. slideUp 隱藏 /slideDown 顯示

slideUp()通過高度變化（向上減谐①恕）來動態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)鹏控。這個動畫效果只調(diào)整元素的高度致扯，可以使匹配的元素以“滑動”的方式隱藏起來。
slideDown()通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素当辐，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)抖僵。這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來缘揪。
speed:規(guī)定元素從可見到隱藏的速度（或者相反）耍群。默認(rèn)為 "normal"。在設(shè)置速度的情況下找筝，元素從可見到隱藏的過程中蹈垢，會逐漸地改變其高度（這樣會創(chuàng)造滑動效果）。
callback: slideUp 函數(shù)執(zhí)行完之后袖裕，要執(zhí)行的函數(shù)耘婚。
通過使用滑動效果，隱藏被選元素陆赋。除非設(shè)置了 speed 參數(shù)沐祷，否則不能設(shè)置該參數(shù)。
注意：slideDown 顯示適用于通過 jQuery 隱藏的元素攒岛，或在 CSS 中聲明 display:none 的元素（但不適用于 visibility:hidden 的元素）赖临。

<p>今天也要好好學(xué)習(xí)</p>
    <button class="abc">hide隱藏</button>
    <button class="ccb">show顯示</button>
    <button class="ab">slideUp隱藏</button>
    <button class="cc">slideDown顯示</button>
    <script>
        $(document).ready(function() {
            $('.abc').click(function() {
                $('p').hide()
            })
            $('.ccb').click(function() {
                $('p').show()
            })
        })
        $(document).ready(function() {
            $('.ab').click(function() {
                $('p').slideUp()
            })
            $('.cc').click(function() {
                $('p').slideDown()
            })
        })
    </script>

四個元素的區(qū)別：沒有設(shè)置毫秒數(shù)產(chǎn)生的效果

2.gif

3. slideToggle

slideToggle() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。
如果被選元素是可見的灾锯，則隱藏這些元素兢榨，如果被選元素是隱藏的，則顯示這些元素。

<p>今天也要好好學(xué)習(xí)</p>
    <button class="abc">hide隱藏</button>
    <button class="ccb">show顯示</button>
    <button class="ab">slideUp隱藏</button>
    <button class="cc">slideDown顯示</button>
    <button class="c">slideToggle狀態(tài)切換</button>
    <script>
        $(document).ready(function() {
            $('.abc').click(function() {
                $('p').hide()
            })
            $('.ccb').click(function() {
                $('p').show()
            })
            $('.ab').click(function() {
                $('p').slideUp()
            })
            $('.cc').click(function() {
                $('p').slideDown()
            })
            $('.c').click(function() {
                $('p').slideToggle()
            })
        })
    </script>

3.gif

4. fadeIn/fadeOut

fadeIn() 方法使用淡入效果來顯示被選元素
fadeOut() 方法使用淡出效果來隱藏被選元素
同意可添加毫秒值吵聪，與slideUp值相似凌那。

<p>今天也要好好學(xué)習(xí)</p>
    <button class="abc">fadeIn顯示</button>
    <button class="ccb">fadeOut隱藏</button>
    <button class="ab">fadeIn顯示2秒</button>
    <button class="cc">fadeOut隱藏2秒</button>
    <script>
        $(document).ready(function() {
            $('.abc').click(function() {
                $('p').fadeIn()
            })
            $('.ccb').click(function() {
                $('p').fadeOut()
            })
            $('.ab').click(function() {
                $('p').fadeIn(2000)
            })
            $('.cc').click(function() {
                $('p').fadeOut(2000)
            })
        })
    </script>

4.gif

三. animate動畫

animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。

該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)吟逝。CSS屬性值是逐漸改變的帽蝶，這樣就可以創(chuàng)建動畫效果。
只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）块攒。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）励稳。

語法：.animate( properties [, duration ] [, easing ] [, complete ] )

animate語法資料詳情

1. 使元素變大變小

<div></div>
    <button class="abc">animate變大</button>
    <button class="ccb">animate變小</button>
    <script>
        $(document).ready(function() {
            $('.abc').click(function() {
                $('div').animate({
                    width: '400px',
                    height: '300px'
                })
            })
            $('.ccb').click(function() {
                $('div').animate({
                    width: '100px',
                    height: '50px'
                })
            })

        })
    </script>

5.gif

2. 移動元素

<style>
        .fa {
            position: relative;
        }
        
        .box {
            position: absolute;
            width: 40px;
            height: 40px;
            background: red;
            margin-bottom: 10px;
        }
    </style>
body>
    <button class="left">左移動</button>
    <button class="left_1">左移動+50</button>
    <button class="left_2">左移動-50</button>
    <div class="fa">
        <div class="box"> </div>
    </div>
    <script>
        $('.left').on('click', function() {
            $('.box').animate({
                left: '40px'
            })
        })
        $('.left_1').on('click', function() {
            $('.box').animate({
                left: '+=40px'
            }, 2000)//2秒
        })
        $('.left_2').on('click', function() {
            $('.box').animate({
                left: '-=40'
            }, 1000)//1秒
        })
    </script>

我設(shè)置了三個不同狀態(tài)，左移動只能移動一次囱井，+=可以往左移動疊加 -=往右移動驹尼，并且每個都設(shè)置了不同的移動速度。

11.gif

注意：移動狀態(tài)實(shí)現(xiàn)需要定位庞呕，如果沒有定位將無法實(shí)現(xiàn)新翎。

例如：

  .box {
            
            width: 40px;
            height: 40px;
            background: red;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <button class="left">左移動</button>
    <button class="left_1">左移動+50</button>
    <button class="left_2">左移動-50</button>
    <div class="fa">
        <div class="box"> </div>
    </div>
    <script>
        $('.left').on('click', function() {
            $('.box').animate({
                left: '40px'
            })
        })
        $('.left_1').on('click', function() {
            $('.box').animate({
                left: '+=40px'
            }, 2000)
        })
        $('.left_2').on('click', function() {
            $('.box').animate({
                left: '-=40'
            }, 1000)
        })
    </script>

我沒有設(shè)置絕對定位和相對定位。

22.gif

3. 設(shè)置一個動畫效果

<button class="left">動畫效果</button>

    <div class="fa">
        <div class="box"> </div>
    </div>
    <script>
        $('.left').on('click', function() {
            $('.box').animate({
                left: '100px'
            }, 1000)
            $('.box').animate({
                left: '100px',
                top: '100px'
            }, 1000)
            $('.box').animate({
                left: '0',
                top: '100px'
            }, 1000)
            $('.box').animate({
                left: '0',
                top: '0'
            }, 1000)
        })
    </script>

33.gif

4. stop()方法

有三種狀態(tài)住练，詳情看案例

<button class="left">動畫效果</button>
    <button class="left_1">stop()</button>
    <button class="left_2">.stop(true, false)</button>
    <button class="left_3">stop(true, true)</button>
    <div class="fa">
        <div class="box"> </div>
    </div>
    <script>
        $('.left').on('click', function() {
            $('.box').animate({
                left: '100px'
            }, 1000)
            $('.box').animate({
                left: '100px',
                top: '100px'
            }, 1000)
            $('.box').animate({
                left: '0',
                top: '100px'
            }, 1000)
            $('.box').animate({
                left: '0',
                top: '0'
            }, 1000)
        })
        $('.left_1').on('click', function() {
            //停止當(dāng)前正在運(yùn)行的動畫地啰，后面繼續(xù)運(yùn)行
            $('.box').stop()
        })
        $('.left_2').on('click', function() {
            //停止當(dāng)前動畫，后面的不再運(yùn)行
            $('.box').stop(true, false)
        })
        $('.left_3').on('click', function() {
            //停止當(dāng)前動畫并把當(dāng)前動畫完成澎羞，后面不再運(yùn)行
            $('.box').stop(true, true)
        })
    </script>

stop()沒有參數(shù)髓绽，默認(rèn)參數(shù)為stop（false,false）。
會停止當(dāng)前正在運(yùn)行的動畫妆绞，后面繼續(xù)運(yùn)行
解釋：按我設(shè)置的動畫為例：動畫分為四塊運(yùn)行顺呕，如果點(diǎn)擊stop()正好運(yùn)行的那塊動畫會停止，后面其他塊會繼續(xù)運(yùn)行括饶。

44.gif

* stop(true, false)

會直接停止動畫株茶，后面的不再運(yùn)行。

46.gif

* stop(true, true)

點(diǎn)擊后會讓動畫停止图焰，后面不再運(yùn)行启盛，但是會讓所停止的那塊動畫運(yùn)行完后停止。

47.gif

5. finish

<button class="left">動畫效果</button>
    <button class="left_1">stop()</button>
    <button class="left_2">.stop(true, false)</button>
    <button class="left_3">stop(true, true)</button>
    <button class="left_4">finish</button>
    <div class="fa">
        <div class="box"> </div>
    </div>
  <script>
  $('.left_4').on('click', function() {
            //停止當(dāng)前動畫并把當(dāng)前動畫完成技羔，后面不再運(yùn)行僵闯，但會展示動畫最終效果
            $('.box').finish()
        })
    </script>

點(diǎn)擊后立即停止當(dāng)前動畫，后面不再運(yùn)行藤滥，但會展示動畫最終效果

55.gif

四. ajax

$ajax資料

1. $.ajax

ajax() 方法通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)鳖粟。
語法： jQuery.ajax([settings])
最簡單的情況下，$.ajax() 可以不帶任何參數(shù)直接使用拙绊。

注意：所有的選項都可以通過 $.ajaxSetup() 函數(shù)來全局設(shè)置向图。

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

2. $.get/post

這兩個方法專門用來處理get和post請求

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

dataType：從服務(wù)器返回的預(yù)期的數(shù)據(jù)類型泳秀。默認(rèn)：智能猜測（xml, json, script, 或 html）

3. $.getJSON

使用一個HTTP GET請求從服務(wù)器加載JSON編碼的數(shù)據(jù)，這是一個Ajax函數(shù)的縮寫榄攀，這相當(dāng)于:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

以下整理篇：

jQuery選擇器
jQueryDom與函數(shù)

資料來源于網(wǎng)絡(luò)和W3C嗜傅，文章如果有錯誤的地方希望可以指出，謝謝檩赢。