jquery集訓營

時間 2019-12-07

標籤 jquery 集訓欄目 JQuery 简体版

原文原文鏈接

元素的尺寸

width() height() ★★★★★javascript

innerWidth() innerHeight() ★★★★★php

outerWidth() outerHeight() ★★★★★css

參數的做用html
與原生JS的區別java

元素尺寸的獲取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title></title>
    <style>
        #div1 {width: 100px; height: 100px; background: red; padding: 10px; margin:10px; border: 1px solid #000;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            alert($('#div1').width()); //100 不帶單位
            //width() => width
            alert($('#div1').innerWidth()); //120
            //innerWidth() => width + padding
            alert($('#div1').outerWidth()); //122
            //outerWidth() => width + padding + border
            alert($('#div1').outerWidth(true)); //142
            //outerWidth(true) => width + padding + border + margin
        })
    </script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>

元素尺寸的設置

<script>
        $(function(){
            //$('#div1').width(200); //設置了style中的width
            //$('#div1').innerWidth(200); //padding左右是20；而後總共是200，那麼style中的width就是180 => width: 200 - padding
            //$('#div1').outerWidth(200); //padding左右是20；border左右是2；總共200，那麼width就是178 => width: 200 - padding - border
            $('#div1').outerWidth(200, true);
            //width: 200 - padding - border - margin爲168
        })
    </script>

與原生JS獲取尺寸的區別

$(function(){
   alert($('#div1').get(0).offsetWidth); //0 原生的JS是獲取不到隱藏元素的尺寸的
   alert($('#div1').width()); //100 JQ是能夠獲取隱藏元素的尺寸的
 })

實戰小技巧

可視區的尺寸
頁面的尺寸jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可視區的尺寸</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; display: none; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            alert($(window).height()); //可視區的高
            alert($(document).height()); //頁面的高
            //若是沒有給body清margin和padding，獲得的是2016；若是清掉了，獲得的就是2000
        })
    </script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>

滾動距離

scrollTop() ★★★★★scr
ollLeft() ★
滾動距離ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可視區的尺寸</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; display: none; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            $(document).click(function(){
                alert($(document).scrollTop()); //獲取滾動距離
                //當滾動條滾到最底部的時候 $(document).scrollTop() == $(document).height() - $(window).height()
                $(document).scrollTop(300); //設置滾動距離
            })
        })
    </script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>

元素距離

offset() ★★★★★json

left top
position() ★★★數組

left top
不認margin值app

offset()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>到達頁面的距離：offset()</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
        #div2 {width: 100px; height: 100px; margin: 50px; background: yellow; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //offset()的距離值都是相對於整個頁面的
            alert($('#div1').offset().left); //200 元素距離整個頁面左邊的距離是offset().left，top就是距離整個頁面上邊的距離。注意left和top後面都不加括號。
            alert($('#div2').offset().left); //250 不論怎樣嵌套，定位父級是誰，都是到達頁面邊緣的距離。這個與原生的offsetLeft和offsetTop不一樣。原生的相對於定位的祖先節點的距離。
        })
    </script>
</head>
<body style="height: 2000px;">
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

position

alert($('#div2').position().left); //0

#div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
  
<script>
        $(function(){
            alert($('#div2').position().left); //50
            //position()就是到有定位的祖先節點的距離
        })
    </script>

實戰小技巧

利用計算原理，獲得相應值
offsetParent() ★
例子：懶加載頁面中的圖片
計算出到有定位的祖先節點的距離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
        #div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            alert($('#div2').offset().left - $('#div2').offsetParent().offset().left); //50
            //經過計算的方法得到到達有定位的祖先元素的距離，不論是不是由margin產生的，所以規避了position()不認margin的問題                 
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

懶加載圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {margin: 0; padding: 0;}
        div {margin-top: 300px; width: 470px; height: 150px; border: 1px #000 solid;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            toChange();
            $(window).scroll(toChange);
            function toChange(){
                $('img').each(function(i, elem){
                    if($(elem).offset().top < $(window).height() + $(document).scrollTop()){ //若是圖片進入了可視區
                        $(elem).attr('src', $(elem).attr('_src'));
                    }
                });
            }       
        })
    </script>
</head>
<body>
    <div><img _src="img/1.jpg" alt=""></div>
    <div><img _src="img/2.jpg" alt=""></div>
    <div><img _src="img/3.jpg" alt=""></div>
    <div><img _src="img/4.jpg" alt=""></div>
    <div><img _src="img/5.jpg" alt=""></div>
    <div><img _src="img/6.jpg" alt=""></div>
</body>
</html>

JQ的事件

on() ★★★★★

off() ★★★★★

JQ中都是綁定的形式
支持多事件寫法
click()寫法，也是採用off()取消

用on()的形式綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的事件</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //在JQ中的事件操做都是綁定的形式
        $(function(){
            //原生中有的事件均可以像下面這麼用（去掉on）
            //$('#div1').click(function(){alert(123);});
            //$('#div1').mouseover(function(){alert(123);});
            //$('#div1').mousedown(function(){alert(123);});
            //$('#div1').scroll(function(){alert(123);})
            //$('#div1').on('click', function(){alert(123);}) //這就至關於$('#div1').click(function(){alert(123);})
            //$('#div1').on('click mouseover', function(){alert(123);}); //經過空格分隔多個事件名稱，能夠同時綁定
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

用off()取消事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的事件</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //不管是用on()仍是用click()形式綁定的事件，都是用off()取消的
        $(function(){
            /*
            $('#div1').on('click mouseover', function(){
                alert(123);
                $(this).off(); //刪除全部的事件操做
            })
            */
            $('#div1').on('click mouseover', function(){
                alert(123);
                $(this).off('mouseover'); //取消指定的事件
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

Event對象

經常使用性★★★★★

pageX, pageY 與cient的區別
which
target
stopPropagation()
preventDefault()
return false

pageX和pageY；clientX和clientY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件對象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('#div1').click(function(ev){
                alert(ev.pageY); //鼠標的y座標
                //ev.pageX和ev.pageY始終是相對於整個頁面的
                alert(ev.clientY); //鼠標的y座標
                //ev.clientX和ev.clientY始終是相對於可視區的
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

which鍵盤鍵值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件對象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //ev.which是鍵盤的鍵值
        $(function(){
            $(document).keydown(function(ev){
                alert(ev.which); //頁面上按下按鍵，彈出鍵盤鍵值
                //alert(ev.keyCode); //也能夠彈出鍵盤鍵值
                //alert(ev.ctrlKey); //能夠檢測是否ctrl鍵是按下的
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

ev.target事件源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件對象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //ev.target 當前目標元素，也就是事件源
        $(function(){
            $(document).click(function(ev){
                //alert(this); //這個this老是指向document
                alert(ev.target); //若是點擊到a上，那麼彈出的就是#div1這個元素
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

ev.stopPropagation() 阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件對象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //stopPropagation()：阻止冒泡
        $(function(){
            $(document).click(function(){
                alert(123);
            })
            $('#div1').click(function(ev){
                ev.stopPropagation(); //阻止了#div1的事件冒泡，那麼點擊#div1就不會再彈出123了
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

ev.preventDefault() 阻止默認事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件對象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //ev.preventDefault()：阻止默認事件
        $(function(){
            $(document).contextmenu(function(ev){ //點擊右鍵就不會彈出默認右鍵菜單了
                ev.preventDefault();
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

return false 既阻止默認事件又阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件對象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //在事件函數中寫return false表明：既阻止默認事件又阻止冒泡
        $(function(){
            $(document).contextmenu(function(ev){
                //代碼
                return false;
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

JQ實戰小技巧

屢次添加on的處理方式
例子：拖拽效果

屢次添加on的處理方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屢次添加on的處理方式</title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            /*
            //如下這種形式，若是屢次點擊#div1後再點擊#span1，會發現1會彈出屢次，這是由於經過屢次點擊#div1，使得#span1屢次調用了click事件
            $('#div1').click(function(){
                $('#span1').click(function(){
                    alert(1);
                })
            })
            */
            //解決以上問題的方法
            $('#div1').click(function(){
                $('#span1').off('click').click(function(){
                    alert(1);
                })
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
    <span id="span1">span</span>
</body>
</html>

用jQuery實現拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用JQ實現拖拽</title>
    <style>
        * {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var disX = 0;
            var disY = 0;
            var $div = $('#div1');
            $div.on('mousedown', function(ev){
                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;
                $(document).on('mousemove', function(ev){
                    $div.css('left', ev.pageX - disX);
                    $div.css('top', ev.pageY - disY);
                })
                $(document).on('mouseup', function(){
                    $(this).off();
                })
                return false;
            })      
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">div</div>
</body>
</html>

事件委託

delegate() ★★★★★

委託的好處
ev.delegateTarget

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委託</title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            /* 普通寫法，click加到li身上
            $('li').on('click', function(){
                $(this).css('background', 'red');
            })
            */
            //事件委託的寫法
            //click加到了ul身上
            $('ul').delegate('li', 'click', function(ev){
                $(this).css('background', 'red'); //this指向觸發的li
                $(ev.delegateTarget).css('background', 'green'); //這時候的ev.delegateTarget指向的就是$('ul')
            })
            //事件委託的好處：
            //1. 性能更好
            //2. 對後續添加的元素，能夠直接擁有一些操做行爲
            //3. 事件委託的時間函數中的this指向的是委託的元素 要想找到是誰進行委託的，那個元素是哪一個，能夠用ev.delegateTarget來找到。
            $('#input1').click(function(){
                var $li = $('<li>hello</li>');
                $('ul').append($li);
            })
            //後來添加的li照樣有click事件，這是經過事件委託實現的。若是用普通寫法，新添加的li是沒有click事件的。
        })
    </script>
</head>
<body style="height: 2000px;">
    <input id="input1" type="button" value="添加">
    <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>
</body>
</html>

undelegate()

取消委託

trigger()

比click()形式更強大
事件的命名空間
例子：主動觸發的添加內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的命名空間</title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        // trigger(): 主動觸發
        $(function(){
            $('ul').delegate('li', 'click', function(){
                $(this).css('background', 'red'); //this指向觸發的li
            })
            $('#input1').click(function(){
                var $li = $('<li>'+ $('#input2').val() +'</li>');
                $('ul').append($li);
            })
            $('#input2').keydown(function(ev){
                if(ev.which == 13){
                    $('#input1').trigger('click'); //點擊回車的時候，就主動觸發#input1的click事件
                    //$('#input1').click();  這種寫法就至關於上面的那種寫法
                }
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <input id="input1" type="button" value="添加"><input id="input2" type="text">
    <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>
</body>
</html>

事件的命名空間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的命名空間</title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('div').on('click', function(){
                alert(1);
            })
            $('div').on('click.abc', function(){ //注意，這裏click後面有個.abc 這就是命名空間
                alert(2);
            })
            $('div').trigger('click.abc'); //只主動觸發div上命名空間爲abc的click事件
        })
    </script>
</head>
<body style="height: 2000px;">
    <div>div</div>
</body>
</html>

事件的命名空間2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的命名空間</title>
    <style>
        * {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var disX = 0;
            var disY = 0;
            var $div = $('#div1');
            $div.on('mousedown', function(ev){
                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;
                $(document).on('mousemove.drag', function(ev){
                    $div.css('left', ev.pageX - disX);
                    $div.css('top', ev.pageY - disY);
                })
                $(document).on('mouseup.drag', function(){
                    //$(this).off('mousemove.drag').off('mouseup.drag'); //這種寫法和下面的寫法均可以
                    $(this).off('.drag');
                    //注意：off()中能夠只添加命名空間，可是trigger()中的命名空間前面必需要添加事件名才行
                })
                return false;
            })      
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">div</div>
</body>
</html>

工具方法

教程網站

$.merge()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            var a = [1, 2, 3];
            var b = [4, 5, 6];
            var c = $.merge(a, b); //$.merge只能是兩個參數
            console.log(c); //[1, 2, 3, 4, 5, 6]
        })
    </script>
</head>
<body>
</body>
</html>

$.type()

★★★★★比原生typeof更強大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.type()</title>
    <style>
        * {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //$().css() $().html() $().click(); //這些方法都是針對JQ對象的，針對原生是不能調用這些方法的
    //$.XXX() $.YYY() $.ZZZ(); //這些方法前面只有一個$ 這些就是工具方法：既能夠給JQ對象用，也能夠給原生JS用
    //好比：$.XXX($('div'))和$.XXX(oDiv) 這兩種寫法均可以
        $(function(){
            // $.type(): 查看變量的類型
            /*
            var a = 'hello';
            alert(typeof a); //string
            alert($.type(a)); //string
            */
            /*
            var a = [1, 2, 3];
            alert(typeof a); //object
            alert($.type(a)); //array
            */
            /*
            var a = new Date;
            alert(typeof a); //object
            alert($.type(a)); //date
            */
            /*
            var a = null;
            alert(typeof a); //object
            alert($.type(a)); //null
            */
            var a = {};
            alert(typeof a); //object
            alert($.type(a)); //object
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">div</div>
</body>
</html>

$.isFunction() ★★★

$.isNumeric() ★★★

$.isArray() ★★★

$.isWindow() ★★★

$.isEmptyObject() ★★★

$.isPlainObject() ★★★

$.extend() ★★★★★

對象繼承操做
深拷貝操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.extend() 對象的拷貝</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            /*
            var a = {
                name: 'hello'
            };
            var b = a;
            b.name = 'hi';
            alert(a.name); //hi 對象引用，b.name更改後，a也收到了影響。由於a、b在同一個指針上
            */
            /* $.extend進行淺拷貝
            var a = {
                name: 'hello'
            };
            var b = {};
            $.extend(b, a, {age: 20}); //把從第二個參數開始，把後面全部的都像第一個參數進行拷貝
            console.log(b);
            b.name = 'hi';
            alert(a.name); //a沒有受到影響
            */
            /* $.extend默認是淺拷貝
            var a = {
                name: {age: 20}
            };
            var b = {};
            $.extend(b, a); 
            b.name.age = 30;
            alert(a.name.age); //30 a又受到了影響，由於$.extend()默認爲淺拷貝，就是指拷貝一層
            */
            //經過添加參數true實現$.extend的深拷貝
            var a = {
                name: {age: 20}
            };
            var b = {};
            $.extend(true, b, a); //經過添加參數true實現深拷貝
            b.name.age = 30;
            alert(a.name.age); //20 深拷貝就是指無論多少層，都不會影響到以前的對象
        });
    </script>
</head>
<body>
</body>
</html>

$.proxy() ★★★

兩處傳參的的區別
$.proxy()改變this指向的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.proxy改變this指向</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            // $.proxy(): 改this指向
            function show(){
                alert(this);
            }
            //show(); //this是指向window的
            //show.call(document); //讓this指向document
            //如下是經過$.proxy()方法來改變this指向
            $.proxy(show, document); //讓show函數中的this指向document，只改變指向，並無調用
            $.proxy(show, document)(); //後面加一對小括號纔算是調用了，這時候彈出的就是document
        });
    </script>
</head>
<body>
</body>
</html>

用$.proxy()傳參的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.proxy改變this指向</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            function show(n1, n2){
                alert(n1);
                alert(n2);
                alert(this);
            }
            $.proxy(show, document)(3, 4); //後面加一對小括號纔算是調用了，這時候彈出的就是document
            //也能夠寫成以下形式：
            $.proxy(show, document, 3, 4)();
            //也能夠寫成以下形式：
            $.proxy(show, document, 3)(4);
        });
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.proxy改變this指向</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            function show(n1, n2){
                alert(n1);
                alert(n2);
                alert(this);
            }
            //$(document).on('click', $.proxy(show, window)(3,4)); //這樣寫show函數就直接調用了，因此要寫成下面的形式
            $(document).on('click', $.proxy(show, window, 3, 4));
        });
    </script>
</head>
<body>
</body>
</html>

JQ實戰小技巧

利用This改指向，更加方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.proxy改變this指向</title>
    <style>
        #div1 {width: 100px; height: 100px; border: 1px solid #000; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('#div1').on('click', function(){
                /*
                setTimeout(function(){
                    //$(this).css('background', 'red'); 這樣寫確定是有錯誤的，由於this指向的是window
                }, 1000);
                */
                //如下是一種比較簡單的改變this指向的方法
                 var This = this;
                 setTimeout(function(){
                    $(This).css('background', 'red');
                 }, 1000);
            })
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

本課練習:登陸彈窗效果

$.map()

$.map方法也是用來遍歷數組和對象，可是會返回一個新對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //$.map(數組，回調)
            var arr = ['a', 'b', 'c'];
            arr = $.map(arr, function(val, i){
                console.log(val); //值
                console.log(i); //索引
                return val + i //數組就變成['a0', 'b1', 'c2']
                //return 'hello' //數組變成['hello', 'hello', 'hello']
            })
            console.log(arr);
        })
    </script>
</head>
<body>
</body>
</html>

$.grep()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            var arr = [1, 5, 3, 8, 2];
            arr = $.grep(arr, function(val, i){
                return val > 4; //返回值大於4的數 爲真就保留，爲假就剔除
            })
            console.log(arr); //[5, 8]
        })
    </script>
</head>
<body>
</body>
</html>

$.unique()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //$.unique() 針對dom節點的去重方法，對數組不起做用
            var aDiv = $('div').get(); //要轉成原生
            var arr = [];
            for(var i=0; i<aDiv.length; i++){
                arr.push(aDiv[i]);
            }
            for(var i=0; i<aDiv.length; i++){
                arr.push(aDiv[i]);
            } //循環了兩次，所以arr裏面出現了一些重複的
            arr = $.unique(arr); //去掉了重複的
            console.log(arr); 
        })
    </script>
</head>
<body>
    <div class="box">div</div>
    <div>div</div>
    <div>div</div>
</body>
</html>

$.inArray()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //$.inArray() 相似於indexOf()的做用
            var arr = ['a', 'b', 'c', 'd'];//1
            console.log($.inArray('b', arr)); //'b'在arr中的位置是1，若是沒有出現過的就返回-1
        })
    </script>
</head>
<body>
    <div class="box">div</div>
    <div>div</div>
    <div>div</div>
</body>
</html>

$.makeArray()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //$.makeArray() 把不是數組的轉成數組
            var aDiv = document.getElementsByTagName('div');
            //aDiv.push() //會報錯，由於aDiv不是數組
            aDiv = $.makeArray(aDiv);
            aDiv.push(); //此次就不報錯了
            console.log(aDiv);
            var aString = 'hello';
            aString = $.makeArray(aString);
            console.log(aString);
        })
    </script>
</head>
<body>
    <div class="box">div</div>
    <div>div</div>
    <div>div</div>
</body>
</html>

$.trim()

用於移除字符串頭部和尾部多餘的空格

$.trim('   Hello   ') // Hello

ajax擴展

$.param() ★★★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //'key = value$key=value$key=value' ajax中經過這種形式傳到後臺
            var obj = {"name": "hello", "age": "20"};
            obj = $.param(obj); //自動轉成上述字符串
            console.log(obj); //name=hello&age=20
            /*
            $.ajax({
                data: {"name": "hello", "age": "20"} //後臺會自動轉成上面拼接的形式
            });
            */
        })
    </script>
</head>
<body>
    <div class="box">div</div>
    <div>div</div>
    <div>div</div>
</body>
</html>

serializeArray()

經常使用度★★★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //serializeArray()是針對form表單中的name和value的實例方法
            var a = $('form').serializeArray();
            console.log(a); //a就處理成[{name="a", value="1"}, {name="b", value="2"}, {name="c", value="3"}]
        })
    </script>
</head>
<body>
    <form action="">
        <input type="text" name="a" value="1">
        <input type="text" name="b" value="2">
        <input type="text" name="c" value="3">
    </form>
</body>
</html>

load()

經常使用度 ★篩選的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //load() 給元素裏面添加東西
           //$('#div1').load('data.html', function(){}); //回調函數是加載後出發的函數，data.html的內容會直接被添加到指定的元素裏面
            $('#div1').load('data.html .box', function(){}); //該函數還有篩選功能，在地址後面加個空格加上.box，那麼在data.html中的.box的內容才能被加到div中來
        })
    </script>
</head>
<body>
    <div id="div1"> </div>
</body>
</html>

$.getScript()

經常使用度★
$.getJSON
經常使用度★

JSONP，不受同源影響
建議直接使用問號

$(function(){
            // $.getJson() 動態請求json或JsonP
            //直接用$.getJSON，咱們就不須要再經過設置dataType: json了
            $.getJSON('data.php', function(data){
                console.log(data);
            }); //data.php返給咱們的是一個json格式
 })

jsonp的形式

$.getJSON('data.php?callback=?', function(data){ //data.php返回的是jsonp的形式，咱們就能夠後面添上callback=? 注意其中callback是key值，而問號?是value值。一旦用getJSON時，必定要是用callback=?的。若是給callback指定了名稱，那麼返回的是字符串形式，並非json形式，在getJSON裏面就解析不了，因此就只能走error。因此在$.getJSON()裏面給callback命名是沒有意義的，必定要是用?才能夠自動解析
                console.log(data);
            }).error(function(err){
                console.log(err);
            });
            $.ajax({ //在使用ajax的時候，能夠給callback自定義名稱，例以下面定義了「show」
                url:'data.php?callback=show',
                success: function(data){
                    //返回的數據就是一個相似"show({name: 'hello'})"的字符串，而後再後續處理進行使用
                }
            })
            //另外若是在$.ajax()中設置了datatype爲'jsonp'，那麼在url的地方是不須要加callback的，由於它會自動添加好

$.ajaxSetup()

經常使用度★
默認配置

$(function(){
            //若是有不少ajax，那麼能夠利用$.ajaxSetup()來進行默認設置
            $.ajaxSetup({
                type: 'POST' //那麼全部的ajax傳輸類型都改成post了
            });
})

全局事件
加到document上，參數的意義
$.ajaxStart() ★
$.ajaxStop() ★
$.ajaxSuccess() ★
$.ajaxError() ★
$.ajaxComplete() ★
$.ajaxSend() ★
屬性 ★
Global, Context
JSONP, jsonpCallback
Cache, Timeout
processData
contentType
ajax參考資料

$.noConflict()

經常使用度★
防止庫之間衝突

<script>
        var J = $.noConflict();
        var $ = 123;
        //後面就能夠用J代替$或者jQuery來直接用了
        J().css();
        J.trim();
    </script>

$.each()

經常使用度★★★
遍歷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script>
        $(function(){
            //$().each() 只能針對jQuery的集合
            //$.each() 工具方法，能夠針對原生的集合，還針對數組和json均可以
            var arr = ['a', 'b', 'c'];
            var obj = {'name': 'hello', 'age': '20'}
            $.each(arr, function(i, val){
                console.log(i);
                console.log(val);
            })
            $.each(obj, function(i, val){
                console.log(i);
                console.log(val);
            })
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

後退鏈式操做 end() addBack()

經常使用度★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script>
        $(function(){
            //end() 回到上一級
            //$('div').next().css('background', 'red').end().css('color', 'blue');
            //addBack() 不只返回上一層，還會包含本身自己
            //$('div').next().css('background', 'red').addBack().css('color', 'blue');
            //add() 添加到集合中
            $('div').add('span').css('background', 'red').addBack().css('color', 'blue');
        })
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

JQ中的隊列

queue().dequeue()

概念與參數意義
隊列名稱

$(function(){
            //$.queue() 三個參數：隊列添加到哪一個元素身上；隊列的名字；第三個參數是一個函數
            //$.dequeue() 兩個參數：元素和隊列名字
            //JQ中的隊列，存儲的都是函數
            //JQ的隊列，當進行出隊的操做的時候，會自動執行相應的函數
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            $.queue(document, 'myeve', a);
            $.queue(document, 'myeve', b);
            $.queue(document, 'myeve', c);
            $.dequeue(document, 'myeve'); //彈1
            $.dequeue(document, 'myeve'); //彈2
            $.dequeue(document, 'myeve'); //彈3
        })

queue() dequeue()

源碼分析運動隊列
默認隊列名fx
隊列的具體應用基本使用

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {width: 100px; height: 100px; background: red; position: absolute;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script>
        //JQ中，animate的隊列名稱是'fx'
        $(function(){
            function a(){
                $('div').css('background', 'blue');
                $('div').dequeue('fx'); //若是不寫這句話的話，隊列就卡在這裏了，無法往下執行了
            }
            $('div').animate({width: 200});
            $('div').queue('fx', a);
            $('div').animate({height: 200});
            $('div').animate({left: 200});
        })  
    </script>
</head>
<body>
    <div>div</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {width: 100px; height: 100px; background: red; position: absolute;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script>
        //JQ中，animate的隊列名稱是'fx'
        $(function(){
            $('div').animate({width: 200});
            //$('div').delay(2000); 下面的操做就至關於這一句的操做
            $('div').queue('fx', function(){
                setTimeout(function(){
                    $('div').dequeue();
                }, 2000)
            })
            $('div').animate({height: 200});
            $('div').animate({left: 200});
        })  
    </script>
</head>
<body>
    <div>div</div>
</body>
</html>

JQ中的回調對象

$.Callbacks()

基本概念與用法
- add
- remove
- fire
應用場景
四大參數
- once
- memory
- unique
- stopOnFalse

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            var cb = $.Callbacks(); //回調對象
            cb.add(a); //a添加到回調對象的集合裏面
            cb.fire(); //fire就是觸發 彈出1
            cb.add(b); 
            cb.fire(); //彈出1和2
            cb.add(c);
            cb.remove(b);
            cb.fire(); //彈出1和3
 })

用回調對象來解決做用域的問題

$(function(){
            var cb = $.Callbacks();
            function a(){
                alert(1);
            }
            (function(){
                function b(){
                    alert(2);
                }
                cb.add(a);
                cb.add(b);
            })();
           // a(); //彈1
            //b(); //b這個函數是找不到的，由於做用域裏面沒它
            cb.fire(); //彈一、2
 })

once

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數 once：只能觸發一次
            var cb = $.Callbacks('once');
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈一、2
            cb.fire(); //由於添加了參數once，因此前面觸發過一次以後，這裏再也不觸發
        })

memory

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數 memory：無論先後添加的都一塊兒觸發
            var cb = $.Callbacks('memory');
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈一、二、3，由於參數memory，讓觸發時無論前面後面add的都觸發
            cb.add(c); 
 })

unique

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數 unique：去重功能
            var cb = $.Callbacks('unique');
            cb.add(a);
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈一、2，而不是彈1,1,1,2
        })

stopOnFalse

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
                return false;
            }
            function c(){
                alert(3);
            }
            //參數 unique：去重功能
            var cb = $.Callbacks('stopOnFalse');
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.add(c);
            cb.fire(); //彈1,1,2 不談3，由於在b裏面碰到了false就不繼續執行後面的函數c了
        })

參數的組合使用

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
                return false;
            }
            function c(){
                alert(3);
            }
            //回調對象的參數能夠組合使用
            var cb = $.Callbacks('once memory');
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1,1,2,3   
            cb.add(c);
            cb.fire(); //什麼也不彈
        })

JQ中的延遲對象

經常使用度★★★

$.Deferred()

基本概念與用法
- 與Callbacks()對比學習
- 應用場景
- 狀態的定義
- 狀態的映射 resolve, done reject, fail
- ajax中的應用 $.when()
利用狀態的應用

JQ插件編寫 ★★★

$.fn.extend() this指向
$.extend()

編寫插件基本格式
- 分析jQuery.e-calendar
- 配置參數
- 方法
- 自定義事件

實例：編寫選項卡插件

$.extend()與$.fn.extend()

<script>
        $.extend(a); //在$.extend()裏面只寫一個參數的時候，就是說這個a要往jQuery源碼自己身上添加 工具方法（靜態方法）
        $.fn.extend(); //JQ方法（實例方法）
        //----------源碼中----------
            function $(selector){
                return new Jquery();
            }
            $.trim = function(){};
            $.type = function(){};
            //上面兩行的寫法與下面這個$.extend的寫法是一回事
            $.extend({
                trim: function(){},
                type: function(){}
            })
            function Jquery(selector){ 
            }
            Jquery.prototype.css = function(attr, value){ 
            }
            Jquery.prototype.html = function(){
            }
            //上面兩個加載prototype上的實例方法也能夠經過下面的$.fn.extend()來實現，二者是一回事
            $.fn.extend({
                css: function(){},
                html: function(){}
            })
        });
    </script>

擴展工具方法

$(function(){
            //$.trim是去掉左右空格，如今擴展一個只去左邊空格的方法
            $.extend({
                leftTrim: function(str){
                    //this : 工具方法中 this與$等價
                    return str.replace(/^\s+/g,'');
                }
            });
            var str = '   hello  ';
            alert('(' + $.leftTrim(str) + ')');
        })

擴展實例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {width: 100px; height: 100px; background: red; position: absolute;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            //$('div').size(); 本身實現如下這個size()的功能
            $.fn.extend({
                size2: function(){
                    //實例方法中：this 至關於調用這個方法的 $('div')
                    return this.length;
                }
            });
            //extend方法能夠擴展多個方法，若是隻擴展一個實例方法，也能夠寫成這樣：$.fn.size2 = function(){};
            alert($('div').size2());
        })
    </script>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

選項卡插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>編寫選項卡的插件</title>
    <style>
        #tab div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
        #tab .active {background: red;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
        //自定義事件：
        //自定義一個切換前的事件和切換後的事件beforeChange和afterChange
        $(function(){
            //$('#tab').tabs();
            $('#tab').tabs({
                heads: ['體育', '娛樂', '新聞', '視頻'],
                bodies: ['體育1111', '娛樂123123', '新聞ffff', '視頻fffggg'],
                events: 'mouseover'
            });
            $('#tab').on('beforeChange', function(){
                alert($('#tab').find('div:visible').html());
            }); //把切換前的div內容彈出來
            $('#tab').on('afterChange', function(){
                alert($('#tab').find('div:visible').html());
            }); //把切換後的div內容彈出來
        });
        (function($){
            var defaults = {
                heads: ['1', '2', '3'],
                bodies: ['1111111', '2222222', '3333333'],
                events: 'click'
            };
            var settings = {};
            var $parent = null;
            function fnTab(options){
                $parent = this; //$parent就是#tabs
                settings = $.extend(settings, defaults, options); //有配置走配置，沒配置走默認
                create();
                bind();
            }
            function create(){ //建立佈局
                for(var i=0; i<settings.heads.length; i++){
                    var $input = $('<input type="button" value="' + settings.heads[i] + '">');
                    if(i == 0){
                        $input.attr('class', 'active');
                    }
                    $parent.append($input);
                }
                for(var i=0; i<settings.bodies.length; i++){
                    var $div = $('<div>' + settings.bodies[i] + '</div>');
                    if(i == 0){
                        $div.css('display', 'block');
                    }
                    $parent.append($div);
                }
            }
            function bind(){
                $parent.find('input').on(settings.events, function(){
                    //這裏就是改變前beforeChange
                    $parent.trigger('beforeChange');
                    $parent.find('input').attr('class', '');
                    $(this).attr('class', 'active');
                    $parent.find('div').css('display', 'none');
                    $parent.find('div').eq($(this).index()).css('display', 'block');
                    //這裏就是改變後的afterChange
                    $parent.trigger('afterChange');
                })
            }
            $.fn.extend({
                tabs: fnTab
            })
        })(jQuery);
    </script>
</head>
<body>
    <div id="tab">
        <!-- <input class="active" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display: block">1111111</div>
        <div>2222222</div>
        <div>3333333</div> -->
    </div>
</body>
</html>

Sizzle選擇器 ★★★

介紹與實現接口
- $() -> find()
通用選擇 *
層級選擇 > + ~
基本篩選 :
- animated
- :eq()
- :even
- :odd
- :first
:last
:gt()
:lt()
內容篩選
- :contains()
- :empty
- :parent
可見性篩選
- :hidden
- :visible
子元素篩選
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :nth-child()
- :nth-of-type()
- :only-child
- :only-of-type
表單篩選
- :button
- :checkbox
- :radio
- :checked
- :disabled
- :enabled
- :selected

篩選方法 ★

filter()not()has()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。