jQuery語法與事件
阿新 • • 發佈:2018-12-25
jQuery 網站上提供了兩種方式的釋出檔案。一種是內容經過壓縮的檔案;另一種是原始檔案。前者檔案中不包含程式碼註釋以及程式碼執行過程中不需要的空白字元,它適合於生產環境(正式使用的環境)中使用,可以減少檔案載入所需時間。後者檔案中包含詳細的程式碼註釋,適合於開發和測試環境中使用。
jQuery語法:
基礎語法:$(selector).action()
美元符號定義jQuery
選擇符(selector)“查詢”和“查詢”HTML元素
jQuery的action()執行對元素的操作
例如:
$(this).hide()隱藏當前元素
$("p").hide()隱藏所有段落
$ :美元符是 jQuery 核心函式 jQuery 的一個別名,在 JavaScript 中“$”是一個合法的函式名。
jQurey事件
1、jQurey事件:
常用事件方法:
繫結事件
解除繫結事件
bind 方法的語法是:
event :要處理的事件的名稱。該名稱不需要加字首 on。
handler :事件監聽器,即對瀏覽器事件進行處理的函式。這通常是一個匿名函式。在 event 引數所表示的事件被觸發後,jQuery 會呼叫這個函式(即回撥),並向該函式傳入一個 jQuery 自定義的事件物件。該事件物件是 jQuery 根據原始的瀏覽器事件物件建立的。jQuery 這麼做是通過一個”中立”的事件物件來規避不同的瀏覽器所提供的同一個事件的事件物件的屬性不同的問題。這使得我們可以用同樣的程式碼處理事件,而不必關心不同瀏覽器所提供的原始事件物件的差異。
data :表示需要在事件觸發後傳遞給事件監聽器的額外資料。它是作為 jQuery 事件物件的 data 屬性傳遞給事件監聽器的。
$(document).ready(function () {
// $("#clickMeBtn").click(function () {
// alert("hello")
// });
$("#clickMeBtn").bind("click",clickHandler1);
$("#clickMeBtn").bind("click",clickHandler2);
$("#clickMeBtn").unbind("click" ,clickHandler1);
});
function clickHandler1(e) {
console.log("clickHandler1")
}
function clickHandler2(e) {
console.log("clickHandler2")
}
事件的目標
事件的冒泡
$(document).ready(function () {
$("body").bind("click",bodyHandler);
$("div").bind("click",divHandler1);
$("div").bind("click",divHandler2);
});
function bodyHandler(event) {
conlog(event)
}
function divHandler1(event) {
conlog(event)
event.stopPropagation();
// event.stopImmediatePropagation();
}
function divHandler2(event) {
conlog(event)
}
//有些瀏覽器不支援console,可用這種方法來實現呼叫
function conlog(event) {
console.log(event);
}
自定義事件
$(document).ready(function () {
$("#ClickMeBtn") .click(function () {
var e = jQuery.Event("MyEvent");
$("#ClickMeBtn").trigger(e);
});
$("#ClickMeBtn").bind("MyEvent",function (event) {
console.log(event)
})
});