jQuery之尺寸設置與事件及DOM操作

1. 尺寸設置

				$('.div_01').width();//獲取/設置元素的尺寸
				$('.div_01').height();
				
				$('.div_01').innerWidth();//獲取/設置元素的尺寸（包含padding的寬高）
				$('.div_01').innerHeight();
				
				$('.div_01').outerWidth();//獲取/設置元素的尺寸（包括padding和border的寬高）
				$('.div_01').outerHeight();
				
				$('.div_01').outerWidth(true);//獲取/設置元素的尺寸（包括padding、border和margin的寬高）
				$('.div_01').outerHeight(true);
				
				$('.div_01').offset().top;//獲取相對元素的位置
				$('.div_01').offset().left;
				
				$('.div_01').position().top;//獲取相對父元素的位置
				$('.div_01').position().left;
				
				$(window).height();//獲取可視區的寬高
				$(window).width();
				
				$(document).width();//獲取頁面的寬高
				$(document).height();
				
				$(document).scrollTop();//獲取頁面滾動距離
				$(document).scrollLeft();




頁面滾動事件（滑輪事件）


$(window).scroll(function(){  
})

---

2. 事件

• 事件函數

blur()      		元素失去焦點
focus() 			元素獲得焦點
change() 			表單元素的值發生變化
click() 			鼠標單擊
dblclick()   		鼠標雙擊
mouseover()  		鼠標進入（進入子元素也觸發）
mouseout()  		鼠標離開（離開子元素也觸發）
mouseenter() 		鼠標進入（進入子元素不觸發）
mouseleave() 		鼠標離開（離開子元素不觸發）
hover() 			同時爲mouseenter和mouseleave事件指定處理函數
mouseup() 			鬆開鼠標
mousedown() 		按下鼠標
mousemove() 		鼠標在元素內部移動
keydown() 			按下鍵盤
keypress() 			按下鍵盤
keyup() 			鬆開鍵盤
load() 				元素加載完畢
ready() 			DOM加載完成
resize() 			瀏覽器窗口的大小發生改變
scroll() 			滾動條的位置發生變化
select() 			用戶選中文本框中的內容
submit() 			用戶遞交表單
toggle() 			根據鼠標點擊的次數，依次運行多個函數
unload() 			用戶離開頁面

• 事件綁定

方法1：
$('document').on('事件','元素名',function(){})
方法2：
$('父元素').bind('事件1','事件2',function(){})

• 取消綁定

$('元素'),unbind('事件');

• 事件的主動觸發和自定義

可使用jquery對象上的trigger方法來觸發對象上綁定的事件

自定義事件 ：

$('.div_01').bind('事件名稱',function(){
				}).trigger('事件名稱');

• 事件冒泡

  在一個對象上觸發某類事件，如果此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播

  事件冒泡允許多個操作被集中處理，但有時並不需要事件冒泡，就需要阻止事件冒泡

event.stopPropagation();	//阻止事件冒泡
event.preventDefault();		//阻止默認行爲

• 事件委託

  事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

事件委託
				$('body').delegate('.div_01','click',function(){
						})

取消委託事件
				$('#btn').click(function(){
					$('body').undelegate();
						})

---

3. DOM操作

創建元素
方法1：
var $div = $('<div>');

方法2：
var $div2 = $('<div>這是一個div</div>');


插入節點的方式
append()		//向每個匹配的元素內部追加內容

appendTo()		//將所有匹配的元素追加到指定的元素

prepend()		//向每個匹配的元素內部前置內容

prependTo()		//將所有匹配的元素前置到指定的元素中

after()			//在每個匹配的元素之後插入內容

insertAfter()	//將所有匹配的元素插入到指定元素的後面

before()		//在每個匹配的元素之前插入內容

remove() 		//刪除節點