一、事件
在1.7之前的版本中jQuery處理事件有多個方法， (google 搜索: jquery live bind degelate)作用各不相同，後來統一的使用on/off方法
1、.on( events [,selector ] [,data ], handler(eventObject) )
參數複雜，我們先解析各個參數，[]裏面的參數是可選的
參數1events：事件類型或者是可選的命名空間比如"click", "click.name1", 或者 ".myname"
參數2selector：一個選擇器字符串，用於過濾和選中能觸發事件的後代元素
參數3data：當一個事件被觸發時，要傳遞給事件處理函數的event.data
參數4handler(eventObject)：事件被觸發時，執行的函數
舉個例子
html代碼
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>js代碼
場景1，點擊li展示在wrap內展示對應的內容
$('.box li').on('click', function(){
var str = $(this).text()
$('#wrap').text(str)
})
換個寫法，簡寫如下，但不規範
$('.box>ul>li').click(function(){
var str = $(this).text()
$('#wrap').text(str)
})增加一個命名空間，方便刪除對應的事件，所謂的命名空間就相當於給這個事件命名，我刪除事件的時候就只刪除對應這個，不會誤傷這個事件類型的其他事件
$('.box li').on('click.hello', function(){
var str = $(this).text()
$('#wrap').text(str)
})
//命名空間沒什麼特別的作用，只不過在解綁事件時便於區分綁定的事件
$('.box li').off('click.hello')
場景2，加需求：點擊button，把input的值當成li加入ul內
$('.box li').on('click', function(){
var str = $(this).text();
$('#wrap').text(str);
});
$('#btn').on('click', function(){
var value = $('#ipt').val()
$('.box>ul').append('<li>'+value+'</li>')
})
最大的問題是，後面新增的元素沒有綁定click顯示值的事件，需要使用事件代理解決這個問題
$('.box li').on('click', function(){
var str = $(this).text();
$('#wrap').text(str);
});
$('.box ul').on('click', 'li', function(){
var str = $(this).text()
$('#wrap').text(str)
}) //this代表的是觸發事件的元素li場景三：傳遞消息給事件處理函數
//綁定事件的時候我們也可以給事件附帶些數據，只不過這種用法很少見
$('.box').on('click', {name: 'hunger'}, function(e){
console.log(e.data)
})
2、.one( events [, selector ] [, data ], handler(eventObject) )
同 on，綁定事件，但只執行一次
3、.off( events [, selector ] [, handler ] )
移除一個事件處理函數
$('.box li').off('click')4、.trigger( eventType [, extraParameters ] )
用代碼觸發 所匹配元素的 綁定的事件類型對應的處理程序，個人理解是用代碼觸發本應該行動click觸發的事件處理函數
$('#foo').on('click', function() {
console.log($(this).text())
});
$('#foo').trigger('click')5、其他常見事件
二、動畫
1、.hide([duration ] [,easing ] [,complete ])
用於隱藏元素，沒有參數的時候等同於直接設置display屬性=none
參數1：動畫時長的毫秒數值(如：1000)，可以用預設的三種速度("slow","normal", or "fast")表示
參數2：一個字符串，指示轉換使用哪個緩動函數。jQuery提供"linear(線性)" 和 "swing（旋轉）"
參數3：完成後執行的函數
$('.target').hide(); $('#book').hide(300, 'linear', function() {
alert('Animation complete.');
})2、.show( [duration ] [, easing ] [, complete ] )
用於顯示元素，用法和hide類似
3、.toggle( [duration ] [, easing ] [, complete ] )
用來切換元素的隱藏、顯示！用法和show、hide類似
4、fadeIn( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素，
5、.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
6、.slideDown( [duration ] [, easing ] [, complete ] )
用下滑動畫顯示一個匹配元素
7、.slideUp( [duration ] [, easing ] [, complete ] )
用上滑動動畫隱藏一個匹配元素，
8、.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素
9、動畫序列
動畫執行是異步的操作，比如以下代碼不會等到show動畫4000ms完成後，再輸出'hahh'的。他們是異步的操作
$('#btn-box1').on('click', function(){
$('.box').show(4000)
console.log('hahh')
})但如果我們有必須等動畫完成了，才能執行的代碼。我們可以把代碼放在動畫show的回調函數裏面，他就會等動畫完成後執行了。比如像以下寫法
$('#action').on('click', function(){
var $box = $('.box')
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('動畫執行完畢')
})
})
})
})
})
})
console.log('動畫完畢了嗎')
})但這樣寫也很麻煩，jquery有動畫隊列，所以等價於
$box.hide(4000)
.show(3000)
.fadeOut()
.fadeIn
.slideUp()
.slideDown(function(){
console.log('動畫完畢')})
三、自定義動畫
上面幾個簡單的動畫不能滿足需求的時候，jquery提供了自定義動畫行爲的方法
1、.animate( properties [, duration ] [, easing ] [, complete ] )
參數一：properties是組包含作爲動畫屬性和終值的樣式屬性和及其值的集合,動畫將根據這組對象移動。
參數二/三/四同上
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'}, 5000, function() {
// Animation complete.});
});
2、.clearQueue
清除動畫隊列中未執行的動畫
3、.finish
停止當前動畫，並清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最後一幀的最終狀態
4、.stop( [clearQueue ] [, jumpToEnd ] )
停止當前正在運行的動畫
clearQueue(default: false)
jumpToEnd(default: false) 跑到當前執行動畫的最後一幀的最終狀態
.stop( true , true )//停止當前動畫，並清除未執行的動畫隊列，並且展現當前執行動畫的最後一幀的最終狀態
.stop(false,false) //默認，停止當前動畫，繼續以下的動畫
.stop(true,false) //停止當前動畫，並清除未執行的動畫隊列