jquery集训营

摘要：不论怎样嵌套，定位父级是谁，都是到达页面边缘的距离。原生的相对于定位的祖先节点的距离。后来添加的照样有事件，这是通过事件委托实现的。如果用普通写法，新添加的是没有事件的。一旦用时，一定要是用的。

width() height() ★★★★★

innerWidth() innerHeight() ★★★★★

outerWidth() outerHeight() ★★★★★

参数的作用

与原生JS的区别

    
        
    
    
    


div

$(function(){
   alert($("#div1").get(0).offsetWidth); //0 原生的JS是获取不到隐藏元素的尺寸的
   alert($("#div1").width()); //100 JQ是可以获取隐藏元素的尺寸的
 })

可视区的尺寸
页面的尺寸

    
    
    
    
    


div

scrollTop() ★★★★★scr
ollLeft() ★
滚动距离

    
    
    
    
    


div

offset() ★★★★★

left top
position() ★★★

left top
不认margin值

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

 #div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
  

利用计算原理，得到相应值
offsetParent() ★
例子：懒加载页面中的图片
计算出到有定位的祖先节点的距离

懒加载图片

on() ★★★★★

off() ★★★★★

JQ中都是绑定的形式
支持多事件写法
click()写法，也是采用off()取消

    
    
    
    


    
aaaaaa

    
    
    
    


    
aaaaaa

常用性★★★★★

pageX, pageY 与cient的区别
which
target
stopPropagation()
preventDefault()
return false

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

多次添加on的处理方式
例子：拖拽效果

    
    
    
    
    


    
aaaaaa
    span

    
    
    
    
    


    
div

委托的好处
ev.delegateTarget

    
    
    
    
    


    
    

        
11111
        
11111
        
11111
        
11111
        
11111
    

取消委托

比click()形式更强大
事件的命名空间
例子：主动触发的添加内容

    
    
    
    
    


    
    

        
11111
        
11111
        
11111
        
11111
        
11111
    

    
    
    
    
    


    
div

    
    
    
    
    


    
div

教程网站

★★★★★比原生typeof更强大

    
    
    
    
    


    
div

$.isFunction() ★★★

$.isNumeric() ★★★

$.isArray() ★★★

$.isWindow() ★★★

$.isEmptyObject() ★★★

$.isPlainObject() ★★★

对象继承操作
深拷贝操作

两处传参的的区别
$.proxy()改变this指向的用法

用$.proxy()传参的用法

利用This改指向，更加方便

本课练习:登录弹窗效果

$.map方法也是用来遍历数组和对象，但是会返回一个新对象

    
    
    
    
    


    
div
    
div
    
div

    
    
    
    
    


    
div
    
div
    
div

    
    
    
    
    


    
div
    
div
    
div

用于移除字符串头部和尾部多余的空格

$.trim("   Hello   ") // Hello

    
    
    
    
    


    
div
    
div
    
div

常用度★★★

常用度 ★筛选的功能

常用度★
$.getJSON
常用度★

JSONP，不受同源影响

建议直接使用问号

$(function(){
            // $.getJson() 动态请求json或JsonP
            //直接用$.getJSON，我们就不需要再通过设置dataType: json了
            $.getJSON("data.php", function(data){
                console.log(data);
            }); //data.php返给我们的是一个json格式
 })

$.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的，因为它会自动添加好

常用度★
默认配置

$(function(){
            //如果有很多ajax，那么可以利用$.ajaxSetup()来进行默认设置
            $.ajaxSetup({
                type: "POST" //那么所有的ajax传输类型都改为post了
            });
})

全局事件
加到document上，参数的意义
$.ajaxStart() ★
$.ajaxStop() ★
$.ajaxSuccess() ★
$.ajaxError() ★
$.ajaxComplete() ★
$.ajaxSend() ★
属性 ★
Global, Context
JSONP, jsonpCallback
Cache, Timeout
processData
contentType
ajax参考资料

常用度★
防止库之间冲突

常用度★★★
遍历

常用度★

    
    
    
    
   


    
div
    span

概念与参数意义

队列名称

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

队列的具体应用基本使用

基本使用

    
    
    
    
   


    
div

    
    
    
    
   


    
div

基本概念与用法

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

   $(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，所以前面触发过一次之后，这里不再触发
        }) 
 

    $(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); 
 })  

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

  $(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(); //什么也不弹
        })  

常用度★★★

基本概念与用法

与Callbacks()对比学习

应用场景

状态的定义

状态的映射 resolve, done reject, fail

ajax中的应用 $.when()

利用状态的应用

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

编写插件基本格式

分析jQuery.e-calendar

配置参数

方法

自定义事件

实例：编写选项卡插件

 $(function(){
            //$.trim是去掉左右空格，现在扩展一个只去左边空格的方法
            $.extend({
                leftTrim: function(str){
                    //this : 工具方法中 this与$等价
                    return str.replace(/^s+/g,"");
                }
            });
            var str = "   hello  ";
            alert("(" + $.leftTrim(str) + ")");
        })

    
    
    
    
    


    
div1
    
div2
    
div3

介绍与实现接口

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