JQuery中的對象和事件

本文轉載自查看原文 2014-03-31 18:42 19359 JavaScript & JQuery

一：JQuery 對象和 Dom 對象

在使用 JQuery 過程中，我們一般（也是絕大多數情況下，除非我們使用了第二個框架）只有兩類對象，即：JQuery 對象和 Dom 對象。Dom 對象指的是普通的 JavaScript 對象，而 JQuery 對象則是包裝 Dom 對象后產生的對象。在聲明變量的時候，出於規范，我們一般在變量名字前加一個 $ 號以標記它是一個 JQuery 對象，如下：

var $var = … // JQuery 對象

var var = … // dom 對象

但是，后者也可以用來聲明 JQuery 對象。

特點：

1：只有 JQuery 對象才能使用 JQuery 方法；

2：Dom 對象則使用原生的 JavaScirpt 方法；

如何判斷一個對象是 JQuery 對象？如下：

1：JQuery 對象是一個數組對象；

2：它具備 JQuery 對象的屬性和方法；

1.1 JQuery 對象轉換成 Dom 對象

上面我們說到：JQuery 對象是一個數組對象。那么，實際，得到 [index] 或者使用 get(index) 方法，就能得到其 Dom 對象。如：

var $me= …;

var me1=$me[0];

var me2=$me.get(0); // me1 == me2

1.2 Dom 對象轉換成 JQuery 對象

簡單了，只要使用 JQuery() 方法就能轉換，即：

var domTemp=…;

var $me1 = JQuery(domTemp);

var $me2 = $(domTemp); // $me1 == $me2

二：JQuery 中的事件

在 JQuery 中，可以使用 bind 方法來為元素綁定事件，該方法的聲明如下：

bind( type [, data], fn)

第一個參數：事件類型，如 click，blue；

第二個參數：成為 event.data 屬性值，在事件處理器方法中，作為參數傳遞進來；

第三個參數：事件處理器方法；

<div id="m">abc</div>
<script src="scripts/jquery.min.js"></script>
<script language="javascript">
    $("#m").bind("click", "theValue", function(e){
        alert(e.data);
    });
</script>

上面的代碼，是一個完整的例子，在這個例子中，我們可以看到 e.data 的值就是 theValue。

2.1 事件對象

在上文中，我們看到 bind 方法的第三個參數事件處理器的參數 e，它俗稱事件對象，即 event.data 中的 event。雖然聽上去很高端，但其實跟普通的方法參數沒有任何區別。事件對象有一些重要的屬性，這里主要強調下其 target 屬性就是引發當前事件的 Dom 對象，即 e.target 就是 this（見下文 this 的函數），如下：

2.2 JQuery 和 Dom 對象的互轉實例

在上面的這個例子中，我們再拓展一下，來看看 JQuery 對象和 Dom 對象之間的互轉：

$("#m").bind("click", "theValue", function(e){
    var me = this;
    var $me1 = $(this);        // 也可以使用 var $me2 = $(me);
    var domMe1 = $me1[0];    // 也可以使用 var domMe2 = $me1.get(0);
    alert(e.data);
});

首先，this 是什么，它永遠指的攜帶當前事件的那個 Dom 對象，於是，上文中的兩個轉換就可以看到效果了，如圖：