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)
        })

二. 实现动态效果方法

1. show()/ hide()

show()如果被选元素已被隐藏，则显示这些元素
hide()如果被选的元素已被显示，则隐藏该元素。
hide与show同有两个参数：.hide(speed,callback)/.show(speed,callback)
speed：规定元素从可见到隐藏的速度。默认为 "0"。
值：毫秒（比如 1500）/"slow"/"normal"/"fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback: hide 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

<p>今天也要好好学习</p>
    <button class="abc">hide隐藏</button>
    <button class="ccb">show显示</button>
    <script>
        $(document).ready(function() {
            $('.abc').click(function() {
                $('p').hide(2000)//设置毫秒为2000,产生动态效果
            })
            $('.ccb').click(function() {
                $('p').show(2000)
            })
        })
    </script>

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

2. slideUp 隐藏 /slideDown 显示

slideUp()通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
speed:规定元素从可见到隐藏的速度（或者相反）。默认为 "normal"。在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback: slideUp 函数执行完之后，要执行的函数。
通过使用滑动效果，隐藏被选元素。除非设置了 speed 参数，否则不能设置该参数。
注意：slideDown 显示适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

<p>今天也要好好学习</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>

四个元素的区别：没有设置毫秒数产生的效果

2.gif

3. slideToggle

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

<p>今天也要好好学习</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状态切换</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>今天也要好好学习</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() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "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>

我设置了三个不同状态，左移动只能移动一次，+=可以往左移动叠加 -=往右移动，并且每个都设置了不同的移动速度。

11.gif

注意：移动状态实现需要定位，如果没有定位将无法实现。

例如：

  .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>

我没有设置绝对定位和相对定位。

22.gif

3. 设置一个动画效果

<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()方法

有三种状态，详情看案例

<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() {
            //停止当前正在运行的动画，后面继续运行
            $('.box').stop()
        })
        $('.left_2').on('click', function() {
            //停止当前动画，后面的不再运行
            $('.box').stop(true, false)
        })
        $('.left_3').on('click', function() {
            //停止当前动画并把当前动画完成，后面不再运行
            $('.box').stop(true, true)
        })
    </script>

stop()没有参数，默认参数为stop（false,false）。
会停止当前正在运行的动画，后面继续运行
解释：按我设置的动画为例：动画分为四块运行，如果点击stop()正好运行的那块动画会停止，后面其他块会继续运行。

44.gif

* stop(true, false)

会直接停止动画，后面的不再运行。

46.gif

* stop(true, true)

点击后会让动画停止，后面不再运行，但是会让所停止的那块动画运行完后停止。

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() {
            //停止当前动画并把当前动画完成，后面不再运行，但会展示动画最终效果
            $('.box').finish()
        })
    </script>

点击后立即停止当前动画，后面不再运行，但会展示动画最终效果

55.gif

四. ajax

$ajax资料

1. $.ajax

ajax() 方法通过 HTTP 请求加载远程数据。
语法： jQuery.ajax([settings])
最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

$.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：从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）

3. $.getJSON

使用一个HTTP GET请求从服务器加载JSON编码的数据，这是一个Ajax函数的缩写，这相当于:

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

以下整理篇：

jQuery选择器
jQueryDom与函数

资料来源于网络和W3C，文章如果有错误的地方希望可以指出，谢谢。