本教程時候有一定前端基礎的人員學習.

常用方法:

parent():返回元素的直接父元素

parents():返回元素的所有父元素

children():返回所選元素的所有直接子元素.

siblings():返回所選元素的所有兄弟元素.

next():返回下一個兄弟元素

nextAll():返回後面的所有兄弟元素.

prev():返回上一個兄弟元素.

prevAll():返回前面的所有兄弟元素.

eq():從多個選定元素中選擇指定索引號的元素.

remove():刪除所選元素及其子元素.

empty():刪除所選元素的子元素.

常見事件:

滑鼠事件:

click:單擊事件

dbclick:雙擊事件

mouseenter:滑鼠進入事件

mouseleave:滑鼠離開事件

mouseover:滑鼠懸停事件

鍵盤事件:

keydown:按鍵按下事件

keyup:按鍵鬆開事件

表單事件:

submit:表單提交事件

change:表單域改變事件

focus:表單元素獲得焦點事件

blur:表單元素失去焦點事件

文檔事件:

ready:DOM載入完成事件

resize:瀏覽器窗口大小改變事件

scroll:滾動條觸發事件

代碼演示:

$(function(){					//文檔載入完之後執行jQuery代碼
  	$('#p1').click(function(){						//id='p1'的元素的點擊事件
				var p2=$('<p></p>').text(new Date().toLocaleString());		//創建一個內容為本地格式日期的段落
				$('#p1').after(p2);				//新段落放在id='p1'的元素後面
			});
		})

執行後的效果:

點擊 查看日期 在後面顯示本地日期

on()方法綁定事件

$('p').on('click',function(){
  	alert('on方法將段落p綁定了點擊事件');
})       

on()方法用於將相同的處理函數綁定到多個事件中時很有用.多個事件之間用空格隔開.

$('p').on('click dbclick',function(){
  	alert('段落p綁定了點擊和雙擊事件,多個事件之間用空格隔開');
})

off()方法解除事件綁定

$('p').off('click')			//刪除點擊事件

jQuery的事件對象

每個事件處理函數都可以接收一個事件對象,其中包括與該事件相關的屬性和方法:

pageX,pageY:事件發生時,相對於頁面左上角的滑鼠位置(x和y坐標)

type:事件類型

which:哪個按鈕或鍵被按下

data:綁定事件時,傳入的任何數據

target:事件發生的對象

preventDefault():阻止事件的默認動作

stopPropagation():停止冒泡到其他元素的事件

事件對象

$('a').click(function(event){    		//事件對象event作為參數傳遞給事件處理函數

				alert(event.pageX);      //彈出事件發生時,滑鼠的x坐標
				event.preventDefault(); 			//阻止打開href屬性中的鏈接
			})

trigger()方法以編程方式觸發事件.

trigger()方法不能用來模仿本機瀏覽器事件,比如點擊一個文件文本框.只能處理jQuery事件系統中的事件.

例如:編程方式觸發點擊事件,而不需要用戶實際點擊一個元素.

$('a').click(function(event){

				alert(event.pageX);
				// event.preventDefault();

			})
			setTimeout(function(){			//定時器,3s後執行
        $('a').trigger('click')							//編程觸發a元素的點擊事件
      },3000)