【輕知識】phper回顧下jquery

weixin_34107955發表於2018-06-29

1.操作元素的選中的checked的時候,用attr不合適,推薦使用prop
2.delegate 父級元素呼叫方法,為子級元素繫結事件(父級元素代替子級元素繫結事件)。

$("#dv").delegate("p", "click", function() {
alert("被點選了---");
});

3.jQuery包裝集指的是通過$()方法返回的一個元素集,這跟一般的javascript陣列有所區別, 包裝集在後者的基礎上還有一些初始化的函式和屬性。

4.關於繫結事件
$("p").click(.....)
click 先建立,後繫結的事件是可以用的
$("p").bind("click",funciton(){.....}) 這種方式同上。

下面兩種,可以為存在的元素繫結事件。後新增的也可以。
父級元素呼叫方法,代理子級元素繫結事件。
$("#dv").delegate("p","click", function(){....})這種方式,後新增也是有繫結的事件的。
$("#dv").on("click", "p", function () {...}) 和delegate是一樣的,都是在為子元素繫結事件。只是引數順序不一樣。

因為delegate方法中是呼叫on的方法。所以,以後直接用on就可以了。

5.解綁事件unbind

$("#dv").unbind();解綁所有事件
$("#dv").unbind("mouseenter mouseleave");解綁多個事件

6.delegate解綁事件
$("#dv").delegate("p","click", function() {.....})
$("#dv").undelegate(); p的事件解綁。
$("#dv").undelegate("p", "click");移除單個事件
$("#dv").undelegate("p", "click mouseenter");移除多個事件

7.off解綁事件

父級元素和子級元素的所有的事件全部解綁

$("#dv").off();

把父級元素與子級元素的點選時間解綁。
$("#dv").off("click");

移除父級元素和子級元素多個事件

$("#dv").off("click mouseenter")

解綁 p標籤的點選事件
$("#dv").off("click", "p")

解綁p所有的事件

$("#dv").off("", ''p");

解綁div中所有的子元素的點選事件

$("#dv").off("click", "**");

8.阻止事件冒泡

點選事件函式內 return false

9.觸發事件的三種方法

$("#txt").focus();
$("#txt").trigger("focus");
$("#txt").triggerHandler("focus");// 這種方式,可以觸發該事件,但是,不能觸發瀏覽器的預設行為

10.each 方法用來遍歷jquery物件的,但是,裡面的每個物件最開始都是dom物件,如果想使用jquery方法,需要把dom物件轉jquery物件。

11.多庫共存的問題

var xy = $.noConflict();// 把$ 的權利給xy,$就可以作為其他的用法出現在程式碼中

12.包裝集

包裝集:把很多的DOM的物件進行包裝或者是封裝--->jquery物件

jquery物件-->DOM物件--->jquery物件[0]-->獲取到這個物件

length屬性

jquery中判斷這個元素是否存在,就是通過包裝集的length屬性來測試

13.外掛開發

$.fn.外掛名 = function() {....}

14.事件引數物件 的幾個屬性
e.target 這個屬性得到的是觸發該時間的目標物件,此時是一個DOM物件
e.currentTarget 這個屬性得到的是觸發該事件的當前的物件。
$("#dv").click(function(e){
console.log($(e.target).attr("id"))
console.log(e.currentTarget)
})

ps.參考資料來自,傳智播客視訊中

相關文章