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 對象，因而，上文中的兩個轉換就能夠看到效果了，如圖：

觀察其屬性，上面是一個典型的 Dom 對象。

再看 $me1：

能夠看到，這是一個典型的 JQuery  對象。

上文中，咱們也說了，JQuery 對象是一個數組對象，而把它轉爲 Dom 對象，只須要使用 $me1[0] 或者 $me1.get(0) 就能夠了，以下：

或者：

 

2.2 自定義事件

以下能夠註冊一個自定義事件：

$("#m").bind(「myclick」, function(){

  

});

出發它，則使用：

$("#m").trigger(「myclick」);

 

結尾說一個以前沒注意的地方：onload 事件不能同時指定兩個事件處理器，可是 ready 事件是能夠的。