jQuery------- (3)-CSDN博客

自定义事件

$("div").on("eat", function () {            
    console.log("is triggered")        
})        
//触发自定义事件eat，也可以触发系统原带的事件        
$("div").trigger("eat")复制代码

触发事件时会发生事件冒泡

$("li").on("click", function () {            
    console.log("this is li")        
});  
      
$("ul").on("click", function () {            
    console.log("this is ul")        
});

$("li").trigger("click");
复制代码

一个小demo

 <style>        
    #demo1{            
        position: absolute;            
        top: 0;            
        left: 0;            
        height: 50px;            
        width: 50px;            
        background: red;        
    }        
</style>复制代码

<div id="demo1"></div>    
<button>+20px</button>    
<button>+50px</button>复制代码

$("#demo1").on("add20", function (ele, data) {            
    $(this).css({width : $(this).width() + data});            
    console.log(ele)            
    console.log(data);        
})        
$("#demo1").on("add50", function (ele , data) {            
    $(this).css({width : $(this).width() + data});            
    console.log(data);        
})
        
$("button").eq(0).on("click", function () {            
    $("#demo1").trigger("add20", 20);        
})        
$("button").eq(1).on("click", function () {            
    if($("#demo1").width() > 300) {                
        $("#demo1").css({width : 800})            
    } else {                
        $("#demo1").trigger("add50", 50);            
    }        
})复制代码

这里注意下，自定义事件的回调函数的ele指的是当前的dom，data是trigger时传的参数，this指代当前选中的jQuery对象

工具方法

这是定义在jQuery函数内的方法，和之前定义在原型上的方法不同，通过$.xxx直接调用

$.type()

在js中判断数据类型的方法有 typeof() , arr instanceof Array , arr.constructor == Array以及Object.prototype.toString.call(arr)。

比如说你在一个页面用iframe标签引入别的页面的DOM结构

$("iframe").on("load" , function () {            
    var arr = $("iframe").get(0).contentWindow.arr;                       
    console.log($.type(arr))//万能方法，返回数据类型字符串        
})复制代码

get把获取的jQuery对象转变成原生DOM，浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的 window 对象。

arr是另一个页面的一个数组，所以得找到这个页面的window，才能获取。contentWindow属性是指指定的frame或者iframe所在的window对象。前三种方法都无法判断arr的数据类型，只有bject.prototype.toString.call(arr)，所以推荐这种方法！！！！

$.trim

var a = $.trim(`    aaaa    `)//只能去除左右两边的空格        
console.log("|" + a + "|")        
复制代码

$.proxy(fn , this)

var obj = {            
    name: "fff",            
    hobby: "IT",            
    sex: "male",            
    oChange: function () {                
        console.log("oChange")            
    }        
}        
function changeThis() {            
    console.log(this);
    //这里指向window            
}        
var changed = $.proxy(changeThis, obj)//会返还一个新的函数，this指向obj        
changed();复制代码

另一种用法

var oChange = $.proxy(obj, "oChange")//另一种方法，返回对象内部的函数，注意第二个传字符串
oChange()复制代码

一个拖拽的demo

$("#demo1").on("mousedown", function (e) {            
    var disX = e.pageX - $("#demo1").offset().left;            
    var disY = e.pageY - $("#demo1").offset().top;            
    $(document).on("mousemove", $.proxy(function (e) {                
        var newL = e.pageX - disX;                
        var newT = e.pageY - disY;                
        $(this).css({left: newL, top: newT})            
    }, this));            
    $(document).on("mouseup", function () {                
        $(document).off();            
    })                    
})复制代码

注意这里proxy的写法，原因是它可以返还一个函数

$.noConflict()

有很多的js库也是用$符，所以当你引入多个js库的时候，为了区别于别的js库可以将jQuery的$符更改成一个自定义的名字

var isJquery = $.noConflict();        
console.log(isJquery("#demo1"));
复制代码

$.parseJSON

var aJson = '{ "name": "my","age": "12"}';
console.log($.parseJSON(aJson));复制代码

把字符串形式的json转变对象的形式

$.makeArray

var arr = {            
    0: "my",            
    1: "you",            
    length: 2        
}        
console.log($.makeArray(arr));//把类数组转换成数组复制代码

高级方法

$.extend

自己定义的工具方法

$.extend({            
    aa: function () {                
        console.log("aa");            
    }        
})        
$.aa();复制代码

$.fn.extend

自己定义实例方法,注意自定义方法函数里的this指向的也是调用他的jQuery对象

$.fn.extend({            
    color: function (color) {                
        this.css({background: color})            
    }        
})        
$("#demo1").color("black");复制代码

$.Callbacks() , .add() , .fire()

function aa() {        console.log("aa");    };    
function bb() {        console.log("bb");        return false;    };    
function cc() {        console.log("cc");    };    
oneCB.add(aa, bb, cc);    
oneCB.fire();复制代码

创建一个回调函数的数组，add方法向里面push回调函数，fire方法触发所有的回调函数

var oneCB = $.Callbacks("stopOnFalse");复制代码

once参数表示只执行一次fire方法，然后就删除这个回调数组

memory参数表示记录fire方法，比如在fire后面使用add方法，会自动触发fire执行，比如源码中是这样写的

if ( memory && !firing ) {        
    fire();                    
}复制代码

触发fire的时候先判断是否有memory参数，有的话判断fire是否为false(fire方法源码有一句fired = firing = true;)

unique参数，同一函数只能添加一次，比如

var oneCB = $.Callbacks("unique");    
oneCB.add(aa, bb, aa);    
oneCB.fire();复制代码

则只触发一次添加aa的行为，打印出aa和bb

stopOnFalse参数，搭配return false使用

意思是当执行到含有return false的回调函数的时候，直接截止，后面的回调函数都不执行了，比如

bb中有return false，fire执行的时候只有aa 和 bb

Ajax

写一个ajax

$.ajax({            
    type: "GET",            
    url: "text.txt",            
    data: "",            
    cache: "",//检查是否走缓存            
    success: function (data) {                
        console.log(data);            
    },            
    error: function (error) {                
        console.log(error);            
    },            
    dataType: "jsonp",
    //实现jsonp跨域的问题            
    crossDomain: true,
    //默认false，true表示跨域，其实设不设置都无所谓，不影响跨域            
    
    jsonp: 'cb',
    //？之后("?cb=doJson")
    //如果前后台相互约定下，需要在请求后面传一些数据，就添加这项，cb其实是相互约定好的名字
    //如果你们约定的名字是callback那就改成callback，不同的网站有不同的要求            
    
    jsonpCallback: 'doJson'
    //这就是你传的回调（即上面cb的内容）        
})

function doJson(data) {    console.log(data);}
复制代码

$.ajax({            
    type: 'GET',            
    url: 'index.php'        
}).done(function() {            
    console.log('success')        
}).fail(function () {            
    console.log('fail')        
}).progress(function () {            
    console.log('ing')        
})复制代码

ajax是一个有状态的函数，成功有成功的回调，失败又失败的回调，那么我们自己写的函数就没有这种状态

$.Deferred 延迟对象

var oCf = $.Deferred();        
oCf.done(function() {            
    console.log('success')        
}).fail(function () {            
    console.log('fail')        
}).progress(function () {            
    console.log('ing')        
});复制代码

function getData() {            
    oCf.resolve();//成功            
    ocf.reject();//失败            
    oCf.notify();//进行中        
}        
getData();
复制代码

$.when()

$.when($.ajax({type: "GET", url: "text.txt"}), $.ajax({type: "GET", url: "index.php"}))    
.done(function() {            
    console.log('success')        
})        
.fail(function () {            
    console.log('fail')        
})        
.progress(function () {            
    console.log('ing')        
});复制代码