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

1、監聽事件大全

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); })

---

 

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

3個使用的DOM操做的方法

text()   設置或返回所選的文本內容  html()   設置或返回所選的標籤內容（包括HTML標籤）  val()    設置返回表單的value值

 

---

3、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）的高度

---

4、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標籤包裹內容  });

---

 

5、jQuery淨位置

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

---

6、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); } });

---

7、jQuery鼠標滾輪事件

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

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

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

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

---

8、頁面捲動值

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

$(window).scrollTop(); //獲取頁面捲動的值  $(window).scroll(function(){});  //頁面捲動事件

$(window).scroll(function(){     //滾動條滾動執行的事件     console.log($(window).scrollTop()); //頁面滾動了多少  });

 

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

$('button').click(function(){     $('html,body').animate({'scrollTop':3000},1000,function(){         console.log($(window).scrollTop()); //獲取頁面滾動了多少     });  });

 

 

原生JS中，若是想讓頁面捲動：

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

---

9、jQuery遍歷JSON方法

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

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

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