前端筆記之jQuery（下）事件&節點操作&淨位置&拖拽&頁面捲動值&遍歷JSON

mufengsm發表於2019-04-02

一、監聽事件大全

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操作的方法

text() 設定或返回所選的文字內容

html() 設定或返回所選的標籤內容（包括HTML標籤）

val() 設定返回表單的value值

三、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刪除節點

remove() 刪除被選元素（及其子元素）

empty() 從被選元素中刪除子元素

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

4.3克隆節點

clone(true) 方法生成被選元素的副本，包含子節點、文字和屬性。

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

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

4.4替換節點

replaceWith() 將指定的內容替換被選元素

replaceAll()

$(selector).replaceWith(content)

$(content).replaceAll(selector)

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

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

4.5包裹節點

wrap() 把匹配的元素用指定的內容或元素包裹起來。

wrapAll() 把所有匹配的元素用指定的內容或元素包裹起來。

wrapinner() 將每一個匹配的元素的子內容用指定的內容或元素包裹起來。

$('button').click(function(){

$('span').wrap('<div></div>'); //用div標籤分別包裹每個span標籤

$('span').wrapAll('<div></div>'); //用div標籤一起包裹所有span標籤

$('span').wrapInner('<b></b>'); //在span標籤內部用b標籤包裹內容

});

五、jQuery淨位置

$('.xiaoming').offset().top

六、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了。

$(window).scrollTop(); //獲取頁面捲動的值

$(window).scroll(function(){}); //頁面捲動事件

$(window).scroll(function(){

//滾動條滾動執行的事件

console.log($(window).scrollTop()); //頁面滾動了多少

});

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