一、事件
1、ready(fn)
1、當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
2、這是事件模塊中最重要的一個函數，因爲它可以極大地提高web應用程序的響應速度。
3、這個方法是對向window.load事件註冊事件( 瀏覽器加載完成事件)的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。==
4、確保在<body>元素的onload事件中沒有註冊函數，否則不會觸發+$(document).ready()事件
5、可以在同一個頁面中無限次地使用$(document).ready()事件。其中註冊的函數會按照（代碼中的）先後順序依次執行
//dom渲染完成事件
$(window).ready(function (){
console.log("1");//寫執行的函數
});
//簡寫
$(function (){
console.log(2);//寫執行的函數
});
2、事件綁定$(selector).on(event,childSelector,data,function)
<ul>
<li>11</li>
<li>22</li>
<li class="inf">33</li>
<li>44</li>
</ul>
<button>按鈕</button>
<button class="btn">按鈕</button>
<button>按鈕</button>
<input type="text" value="你看我變色"/>
舉例
$("ul").on("click",".inf", function () {
console.log(1);
});
$("button").on("mousemove", function () {
console.log("move");
})；
事件綁定bind()
$(window).bind("mousewheel",function (){
console.log(1);
});
$("html").bind("keydown mousemove", function () {
console.log("key");
$(this).unbind("mousemove");
});
bind與on的區別
綁定多個事件toggle([speed],[easing],[fn])
1、這個方法
toggle(fn,fn,fn)1.9版本已刪除,jQuery Migrate（遷移）插件可以恢復此功能。所以我的就不可以實現
2、用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。
3、如果元素是可見的，就切換爲隱藏的；如果元素是隱藏的，就切換爲可見的。$(".tri").toggle();
$(document).ready(function(){
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
3、點擊事件click(data,fn) 鼠標事件 mousedown([[data],fn]) 事件切換hover()
mousedown與click()的區別
mousedown與click事件不同，mousedown事件僅需要按鍵被按下，而不需要鬆開即可發生。
mousemove事件處理函數會被傳遞一個變量——事件對象，其.clientX和 / .clientY` 屬性代表鼠標的座標
鼠標事件的區別
不論鼠標指針穿過被選元素或其子元素，都會觸發mouseover事件。
只有在鼠標指針穿過被選元素時，纔會觸發mouseenter事件。
不論鼠標指針離開被選元素還是任何子元素，都會觸發mouseout事件
只有在鼠標指針離開被選元素時，纔會觸發mouseleave事件。
var a=3;
$("button").click(a, function () {
//傳遞的參數在event.data
console.log(a);
}).mouseenter(function () {
console.log(1);
}).mouseleave(function () {
console.log("2");
});
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
事件切換hover()
某種程度上等於 mouseenter+mouseleave
$("button").hover(function () {
console.log("over");//進入
}, function () {
console.log("out");//離開
});
事件移除off() unbind()
$("button").click(function(){
$("p").off("click");
});
4、鍵盤事件keydown(),keypress(),keyup()
$("body").keypress(function () {
console.log("鍵被按下，與keydown類似，只不過有些鍵不會觸發此事件，如shift，需要用keydown");
}).keyup(function () {
console.log("鍵被鬆開");
});
$("body").keydown(function () {
console.log("鍵按下的過程");
}).keyup(function () {
console.log("鍵被鬆開");
});
5、滾動事件scroll()
<div style="height: 3000px;"></div>
$(window).scroll(function (){
console.log($(this).scrollTop());
});
6、一次性綁定事件one()
$("ul>li").one("click", function () {
console.log("li");
});
7、失焦穫焦blur() focus()
$("input").blur(function () {
console.log("失");
}).focus(function () {
console.log("獲");
});
8、select([[data],fn])
當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件
這個函數會調用執行綁定到select事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。
$("input").select(function () {
$(this).css("color", "red");
}).trigger("select").on("my", function () {
console.log("自定義事件");
}).trigger("my");
事件的執行參數
$(window).keypress(10, function (e) {
console.log(e.timeStamp);//時間
console.log(e.currentTarget);//冒泡階段的元素
console.log(e.target);//最初觸發的dom元素
console.log(e.data);//傳遞數據 在data
e.stopPropagation()//阻止事件冒泡
e.preventDefault()//阻止事件默認行爲
return false;//阻止事件默認
});
9、triggerHandler(type, [data])
如果你對一個focus事件執行了 .triggerHandler() ，瀏覽器默認動作
將不會被觸發，只會觸發你綁定的動作
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
二、效果
1、hide()和show()
$(".tri").click(function () {
$(".tri").hide()
})
$(".tri").click(function () {
$(".tri").show()
})
2、animate()
$(selector).animate(styles,speed,easing,callback)
$(document).ready(function()
{
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
三、工具
.each()
/*
* each 方法 類似for
* */
var arr = [1, 2, 3];
$.each(arr, function (index, val) {
console.log(index, val);
});
$.each($("li"), function (index, val) {
console.log(index, val);
});
jQuery.extend([deep], target, object1, [objectN])
用一個或多個其他對象來擴展一個對象，返回被擴展的對象
相當於內容的覆蓋
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//結果settings == { validate: true, limit: 5, name: "bar" }
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
//結果 settings == { validate: true, limit: 5, name: "bar" }
//empty == { validate: true, limit: 5, name: "bar" }
//例3
var stu={
name:"張三",
sex:"女",
age:18
}
var s={
name:"李四",
sex:"男",
age:20
}
var person=$.extend({},s,stu);
console.log(person);
.grep(array,fn)
使用過濾函數過濾數組元素
此函數至少傳遞兩個參數：待過濾數組和過濾函數。過濾函數必須返回 true 以保留元素或 false 以刪除元素
$.grep( [0,1,2], function(n,i){
return n > 0;
});//[1, 2]
.makeArray(obj)
將類數組對象轉換爲數組對象。
.toArray()
把jQuery集合中所有DOM元素恢復成一個數組
console.log($("li").toArray());
.map(arr|obj,callback)
將一個數組中的元素轉換到另一個數組中
作爲參數的轉換函數會爲每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作爲參數。轉換函數可以返回轉換後的值、null（刪除數組中的項目）或一個包含值的數組，並擴展至原始數組中
console.log($.map([1, 2, 3], function (val) {
return val + 2;
}));
.proxy(function,context)
var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
以下代碼跟上面那句是等價的:
$("#test").click( jQuery.proxy( obj.test, obj ) );
$.fn.jquery
代表 jQuery 版本號的字符串。
.jquery屬性是通過jQuery 原型賦值的，通過使用它的別名$.fn進行引用。它是一個含有 jQuery 版本號的字符串，例如 “1.5.0” 或 “1.4.4”.
//給init對象原型追加的方法或者屬性
$.fn.mySort=function (){
console.log("2222");
}
$("li").mySort();
console.log($());
四、核心
