jquery集训营

2024年1月27日 106次阅读 来源: eve0803

元素的尺寸

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

    原文作者：eve0803
    原文地址: https://segmentfault.com/a/1190000005055839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞