12月24日- jQuery事件、动画

一、jQuery 事件

• .on( events [, selector ] [, data ] )

  <button id="btn">按钮</button>
  <script>
    $(function () {
        // 基础事件
        $('#btn1').on('click', function () {
            alert('按钮被点击了');
        });
        // 事件传参
        function myFunc(event){
            alert(event.data.name);
        }
        $('p').on('click',{name: 'eric'}, myFunc);
        // 取消submit 事件
        $('form').on('submit',false);
        // 阻止action 默认事件
        $('form').on('submit',function (event) {
            event.preventDefault();
        });
        // 停止submit 事件向上冒泡
        $('form').on('submit',function (event) {
            event.stopPropagation();
        });
    });
  </script>

二、jQuery 动画

• 显示/隐藏

<p>编程语言(programming language)可以简单的理解为一种计算机和人都能识别的语言。</p>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">显示/隐藏</button>
<script>
    $(function () {
        // 显示
        $('#btn1').click(function () {
            $('p').show(1000);
        });
        // 隐藏
        $('#btn2').click(function () {
            $('p').hide(1000);
        });
        // 显示/隐藏
        $('#btn3').click(function () {
            $('p').toggle(2000);
        });
    });
</script>

• 上滑/下拉

<button id="btn1">上滑</button>
<button id="btn2">下拉</button>
<button id="btn3">上滑/下拉</button>
<ul>
    <li>产品</li>
    <li>用户</li>
    <li>文档</li>
</ul>
<p>编程语言(programming language)可以简单的理解为一种计算机和人都能识别的语言。</p>
<script>
    $(function () {
        // 上滑
        $('#btn1').click(function () {
            $('ul').slideUp('fast');
        });
        // 下拉
        $('#btn2').click(function () {
            $('ul').slideDown('slow');
        });
        // 上滑/下拉
        $('#btn3').click(function () {
            $('ul').slideToggle(2000);
        });
    });
</script>

• 淡入/淡出

<button id="btn1">淡入</button>
<button id="btn2">淡出</button>
<button id="btn3">淡入/淡出</button>
<ul>
    <li>产品</li>
    <li>用户</li>
    <li>文档</li>
</ul>
<p>编程语言(programming language)可以简单的理解为一种计算机和人都能识别的语言。</p>
<script>
    $(function () {
        // 淡入
        $('#btn1').click(function () {
            $('ul').fadeIn('slow');
        });
        // 淡出
        $('#btn2').click(function () {
            $('ul').fadeOut('slow');
        });
        // 淡入/淡出
        $('#btn3').click(function () {
            $('ul').fadeToggle(2000);
        });
    });
</script>

THE END !