一、監聽事件大全

1.1 JavaScript事件

onblur      元素失去焦點
onchange    用戶改變域的內容 
onclick     滑鼠點擊某個對象 
ondblclick  滑鼠雙擊某個對象 
onfocus     元素獲得焦點
onkeydown   某個鍵盤的鍵被按下  
onkeypress  某個鍵盤的鍵被按下或按住  
onkeyup     某個鍵盤的鍵被鬆開  
onload      某個頁面或圖像被完成載入
onmousedown 某個滑鼠按鍵被按下
onmousemove 滑鼠被移動  
onmouseout  滑鼠從某元素移開  
onmouseover 滑鼠被移到某元素之上 
onmouseup   某個滑鼠按鍵被鬆開 
onreset     重置按鈕被點擊
onresize    視窗或框架被調整尺寸 
onselect    文本被選定 
onsubmit    提交按鈕被點擊
onunload    用戶退出頁面
onscroll    元素滾動時執行

JavaScript事件使用示例：

oDiv.onclick = function(){

}

1.2 jQuery事件

blur()       觸發、或將函數綁定到指定元素的 blur 事件
change()     觸發、或將函數綁定到指定元素的 change 事件
click()      觸發、或將函數綁定到指定元素的 click 事件
dblclick()   觸發、或將函數綁定到指定元素的 double click 事件
error()      觸發、或將函數綁定到指定元素的 error 事件
focus()      觸發、或將函數綁定到指定元素的 focus 事件
keydown()    觸發、或將函數綁定到指定元素的 key down 事件
keypress()   觸發、或將函數綁定到指定元素的 key press 事件
keyup()      觸發、或將函數綁定到指定元素的 key up 事件
load()       觸發、或將函數綁定到指定元素的 load 事件
mousedown()  觸發、或將函數綁定到指定元素的 mouse down 事件
mouseenter() 觸發、或將函數綁定到指定元素的 mouse enter 事件
mouseleave() 觸發、或將函數綁定到指定元素的 mouse leave 事件
mousemove()  觸發、或將函數綁定到指定元素的 mouse move 事件
mouseout()   觸發、或將函數綁定到指定元素的 mouse out 事件
mouseover()  觸發、或將函數綁定到指定元素的 mouse over 事件
mouseup()    觸發、或將函數綁定到指定元素的 mouse up 事件
ready()      文檔就緒事件（當 HTML 文檔就緒可用時）
resize()     觸發、或將函數綁定到指定元素的 resize 事件
scroll()     觸發、或將函數綁定到指定元素的 scroll 事件
select()     觸發、或將函數綁定到指定元素的 select 事件
submit()     觸發、或將函數綁定到指定元素的 submit 事件
toggle()     綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。
unload()     觸發、或將函數綁定到指定元素的 unload 事件

jQuery事件使用示例：

$(‘div’).click(function(){

});

1.3 on()事件方法

定義和用法

on() 方法在被選元素及子元素上添加一個或多個事件處理程式。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。

註意：使用 on() 方法添加的事件處理程式適用於當前及未來的元素（比如由腳本創建的新元素）。

提示：如需移除事件處理程式，請使用 off() 方法。

提示：如需添加只運行一次的事件然後移除，請使用 one() 方法。

語法：

$(selector).on(event,childSelector,data,function{

});

 添加多個事件處理函數：

$('p').on('click mouseenter mouseleave',function(){
   
});

off()方法移除事件：

$('p').on('click mouseenter mouseleave',function(){
   $(this).off('mouseleave click'); //移除mouseleave和click事件
});

使用map參數添加多個事件處理函數：

$('p').on({
   click:function(){ $(this).css('background','red'); },
   mouseenter:function(){ $(this).css('background','green');},
   mouseleave:function(){ $(this).css('background','blue'); }
});

向未來元素添加事件（通過JS節點方法添加的新元素預設沒有事件，所以要通過以下方法綁定事件，普通事件方法綁定不上）

$('div').on('click','p',function(){
        alert(1);
})

二、jQuery設置和獲取內容方法

3個使用的DOM操作的方法

三、jQuery尺寸

jQuery提供多個處理尺寸的重要方法：

以下方法返回的值都是number類型

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框、外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框、外邊距）。

還可以獲取HTML文檔和瀏覽器視窗的寬高：

$(window).width()      //獲取當前瀏覽器視窗的寬度
$(window).height()     //獲取當前瀏覽器視窗的高度
$(document).width()    //獲取HTML文檔（body）的寬度
$(document).height()   //獲取HTML文檔（body）的高度

四、jQuery節點操作

4.1添加節點

【添加內部子節點方法】：內部節點就是兒子節點

append()    在被選元素內部的結尾插入內容
appendTo()  將指定內容插入到被選標簽內部的結尾
prepend()   在被選元素內部的開頭插入內容
prependTo() 將指定內容插入到被選標簽內部的開頭

//添加在結尾的
$('ul').append('<li>蘋果</li>'); //在ul標簽內部的結尾插入li內容
$('ul').append(function(){return '<li>蘋果-函數的</li>'}); //功能同上
$('<li>蘋果222</li>').appendTo('ul'); //將指定li內容添加到ul標簽內部的結尾

//添加在開頭的
$('ul').prepend('<li>蘋果</li>'); //在ul標簽內部的開頭插入li內容
$('ul').prepend(function(){return '<li>蘋果-函數的</li>'}); //功能同上
$('<li>蘋果222</li>').prependTo('ul'); //將指定li內容添加到ul標簽內部的開頭

【添加同級節點方法】：同級就是兄弟關係

after()            在被選元素同級的後面插入內容
insertAfter()     將指定內容添加到被選標簽同級的後面
before()           在被選元素同級的前面插入內容
insertBefore()    將指定內容添加到被選標簽同級的前面

註意：以上方法作用相同。差異在於語法：內容和選擇器的位置。

添加在同級的後面
$('ul').after('<p>以上水果都好吃</p>'); //在ul標簽同級的後面插入p標簽內容
$('ul').after(function(){return '<p>以上水果都好吃</p>'}); //功能同上
$('<p>以上水果都好吃</p>').insertAfter('ul'); //將指定p標簽內容添加到ul標簽同級的後面

添加在同級的開頭
$('ul').before('<p>以下水果都不好吃</p>'); //在ul標簽同級的開頭插入p標簽內容
$('ul').before(function(){return '<p>以下水果都不好吃</p>'}); //功能同上
$('<p>以下水果都不好吃</p>').insertBefore('ul'); //將指定p標簽內容添加到ul標簽同級的開頭

4.2刪除節點

$('ul li').eq(1).empty();  //刪除li的內容
var $li = $('ul li').eq(2).remove(); //刪除整個li（包括子節點）
$('ul').append($li); //將刪除的li添加在ul內部的後面

4.3克隆節點

參數：可選。布爾值。規定是否複製元素的所有事件處理。預設false。

$('button').click(function(){
   var $p = $('p').clone(true);  //克隆p標簽，true表示把子元素和事件也一起克隆
   $('ul').after($p);  //將克隆的p標簽插入到ul後面
});

4.4替換節點

註意：replaceWith() 能夠使用函數進行替換，replaceAll則不能。

$('p').replaceWith('<p>你好，請問下麵水果你喜歡嗎？</p>');
$('p').replaceWith(function(){return '<p>你好，請問下麵水果你喜歡嗎？</p>'});
$('<p>你好，請問下麵水果你喜歡嗎？</p>').replaceAll('p');

4.5包裹節點

五、jQuery凈位置

六、jQuery拖拽

需要使用jQuery插件，有個jQuery官方插件，叫做jQueryUI，負責實現元素的被拖拽、被拖放、改變尺寸、可圈選、可排序。

所謂的插件，就是增強jQuery功能，給jQuery添加一些必須的功能，先引用jQuery，然後引用插件。

官方：http://jqueryui.com/

• Draggable   拖拽
• Droppable   拖放
• Resizable    改變尺寸
• Selectable    可選擇
• Sortable      可排序

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
     $('img').draggable();
</script>

用JSON來配置拖拽：

$('img').draggable({
   //限制元素的移動區域
   'containment':'.box',
   //限制軸方法
   //'axis':'y',
   //限制咯噔
   'grid':[50,100]
});

如果在拖拽的時候，要使用坐標，此時要添加drag屬性，值是一個函數，這個函數有兩個參數，第一個參數：event沒用，第二個參數是ui參數，有一個屬性ui.position，這個屬性又有兩個值left、top值：

$('img').draggable({
   //限制元素的移動區域
   'containment':'.box',
   //限制軸方法
   //'axis':'y',
   //限制咯噔
   //'grid':[50,100],
   'drag':function(event,ui){
       var x = ui.position.left;
       var y = ui.position.top;
       $('h1').html('當前位置：' + x +'-' + y);
   }
});

七、jQuery滑鼠滾輪事件

jQuery天生不能監聽滾動事件，需要用插件，jQuery.mousewheel.js

下載地址：http://plugins.jquery.com/mousewheel/

下載完畢後，就可以用mousewheel()事件來監聽滾輪了。

$('.news').mousewheel(function(event,direction){
   //direction  滑鼠滾輪下滾 -1
   //direction  滑鼠滾輪上滾 1
   console.log(direction);
});

八、頁面捲動值

jQuery中屏蔽了一切瀏覽器相容性問題，並且把所有屬性和方法都換成了window對象的屬性和方法，不用document和body了。

這個是固定語法，是html和body元素進行動畫，不是window對象，改變的是固定屬性'scrollTop屬性

原生JS中，如果想讓頁面捲動：

document.getElementById('btn').onclick = function(){
   document.documentElement.scrollTop = document.body.scrollTop = 3000;
}

九、jQuery遍歷JSON方法

$.each(city,function(key,value){
   console.log(key,value)
});

$.each(JSON對象,function(key,value){
   console.log(key,value)
});

key就是JSON的屬性名，value是JSON的屬性值