jquery常用事件介紹及使用

2022-09-06 08:06:11 字數 1819 閱讀 8760

一:jq中事件

1.頁面載入事件

ready()方法

格式:$(document).ready(function(){});

$(function(){});

2.繫結事件

click(),dblclick(),focus(),blur(),mouseover(),mouseout(),change(),select()

keydown(),keyup()

js事件模型:

第一種:在html標籤上增加事件屬性,讓屬性值等於處理該事件的函式名或程式**

第二種:在js**中設定元素的事件屬性,讓屬性值等於處理該事件的函式名或程式**

jq事件一種統一的事件模型:

在頁面載入完畢後,為每個選取元素的事件繫結響應函式

$(function()); //統一的事件模型

$("#btn").bind(type,function()); //type表示事件型別

//為所選物件繫結多個事件處理函式

$("#btn").bind(,type:function()});

});

3.切換事件

hover():使元素在滑鼠移入與移出的事件中進行切換

hover(over,out); //over:移入時處理的函式,out:移出時處理的函式

toggle():依次呼叫n個指定的函式,直到最後乙個,然後重複對函式進行呼叫

toggle(

function(){},

function(){},

function(){},...

);

4.其它事件

one():為所選的元素繫結乙個僅觸發一次的處理函式

one(type,function(){}); //type表示事件型別

trigger():在所選的元素上觸發指定型別的事件

trigger(type); //type表示觸發事件的型別

二:事件機制

事件在觸發後分為兩個階段:乙個是捕獲(capture),另乙個是冒泡(bubbling).

往往事件觸發後,直接執行冒泡過程,冒泡實質就是事件執行中的順序.(大部分瀏覽器不支援捕獲,jq也不支援)

(單擊按鈕,按鈕的父標籤div的單擊事件也被觸發,同時div的父標籤body的單擊事件也隨之觸發)

冒泡過程:整個事件波及的過程就行水泡一樣向外冒,故稱為冒泡過程

停止事件的冒泡過程:可以通過return false;語句實現.(單擊按鈕就執行單擊事件,不觸發其它父元素的單擊事件)

三:開關

toggleclass():樣式新增/刪除開關

hover():滑鼠移入/移出開關

toggle():顯示/隱藏開關(沒引數時)

四:獲取元素的寬高

$("body").css("width");		//獲取頁面內容css樣式中的寬度屬性值

$("body").height(); //獲取頁面內容的高度

$(window).width(); //獲取瀏覽器視窗的寬度

$(window).css("height"); //獲取瀏覽器視窗css樣式中的高度屬性值

css("width/height"):值得形式是包含了單位"px"的字串 -- "160px"

height()/width():值是數字型的,更方便進行數**算 -- 160

JQuery常用事件

1.click 2.blur 失去焦點 3.focus 得到焦點 4.change 值發生改變 5.ready 頁面載入完成 onload document ready function 完整寫法 document 簡寫 在事件中獲取事件源的方式 1.如果元素動態繫結事件,this為事件源 2.非動...

常用事件與jQuery事件方法

滑鼠事件 鍵盤事件 表單 元素 事件 focus 元素獲得焦點觸發 blur 元素失去焦點觸發 文件 視窗事件one event name handle func 繫結事件處理程式 只會觸發一次 off event name handle func 移除事件 trigger event name a...

JQuery中常用 事件 清單總結

所有事件都是方法 所有事件都是方法 blur fn 當失去焦點時觸發 change fn 當狀態改變時觸發 click fn 當單擊時觸發 dblclick fn 當雙擊時觸發 focus fn 當獲得焦點時觸發 keydown fn 當鍵盤按下時觸發 keyup fn 當鍵盤彈起時觸發 keypr...