jquery集训营

元素的尺寸

width() height() ★★★★★

innerWidth() innerHeight() ★★★★★

outerWidth() outerHeight() ★★★★★

参数的作用
与原生JS的区别

元素尺寸的获取

<!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是可以获取隐藏元素的尺寸的
 })

实战小技巧

可视区的尺寸
页面的尺寸

<!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() ★
滚动距离

<!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() ★★★★★

left top
position() ★★★

left top
不认margin值

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(); //弹1、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(); //弹1、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(); //弹1、2、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(); //弹1、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()

jquery集训营

元素的尺寸

元素尺寸的获取

元素尺寸的设置

与原生JS获取尺寸的区别

实战小技巧

滚动距离

元素距离

offset()

position

实战小技巧

JQ的事件

用on()的形式绑定事件

用off()取消事件

Event对象

pageX和pageY；clientX和clientY

which键盘键值

ev.target事件源

ev.stopPropagation() 阻止冒泡

ev.preventDefault() 阻止默认事件

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

JQ实战小技巧

多次添加on的处理方式

用jQuery实现拖拽效果

事件委托

delegate() ★★★★★

undelegate()

trigger()

事件的命名空间

事件的命名空间2

工具方法

$.merge()

$.type()

$.extend() ★★★★★

$.proxy() ★★★

JQ实战小技巧

$.map()

$.grep()

$.unique()

$.inArray()

$.makeArray()

$.trim()

ajax扩展

$.param() ★★★

serializeArray()

load()

$.getScript()

jsonp的形式

$.ajaxSetup()

$.noConflict()

$.each()

后退链式操作 end() addBack()

JQ中的队列

queue().dequeue()

JQ中的回调对象

$.Callbacks()

once

memory

unique

stopOnFalse

参数的组合使用

JQ中的延迟对象

$.Deferred()

JQ插件编写 ★★★

$.extend()与$.fn.extend()

扩展工具方法

扩展实例方法

选项卡插件

Sizzle选择器 ★★★

筛选方法 ★

eve0803

引用和评论

webpack+babel+react练习流程记录

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号