jquery對象和javascript對象即DOM對象相互轉換,jquerydom

來源:互聯網
上載者:User

jquery對象和javascript對象即DOM對象相互轉換,jquerydom

jQuery 對象是通過 jQuery 封裝DOM 對象後產生的對象。jQuery 對象是 jQuery 專屬的,其可以使用 jQuery 裡的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 這裡的 $("#img")就是 jQuery 對象。

DOM對象就是Javascript 固有的一些對象操作。DOM 對象能使用Javascript 固有的方法,但是不能使用 jQuery 裡的方法。例如:document.getElementById("img").src = “test.jpg";這裡的document.getElementById("img") 就是DOM 對象。

$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等價的,是正確的,但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg"); 都是錯誤的。

再說一個例子,就是this, 在寫 jQuery 時經常這樣寫: this.attr("src","test.jpg");可是就是出錯,其實this 是DOM對象,而.attr("src","test.jpg") 是 jQuery 方法,所以出錯了。要解決這個問題就要將 DOM對象轉換成 jQuery 對象,例如 $(this).attr("src","test.jpg");

1. DOM 對象轉成 jQuery 對象

對於已經是一個 DOM 對象,只需要用 $() 把DOM對象封裝起來,就可以獲得一個 jQuery 對象了,$(DOM 對象) 註: var是定義變數

如: 

var v = document.getElementById("v"); //DOM對象var $v = $(v); //jQuery 對象

轉換後,就可以任意使用 jQuery 的方法。

2. jQuery 對象轉成 DOM 對象

兩種轉換方式講一個 jQuery 對象轉換成 DOM 對象: [index] 和 .get(index);

(1) jQuery 對象是一個資料對象,可以通過 [index] 的方法,來得到相應的 DOM 對象。

如:

var $v = $("#v"); //jQuery 對象var v = $v[0]; //DOM 對象alert(v.checked); //檢測這個checkbox是否被選中

(2) jQuery 本身提供,通過.get(index) 方法得到相應的 DOM 對象

如:

var $v = $("#v"); //jQuery 對象var v = $v.get(0); //DOM對象 ( $v.get()[0] 也可以 )alert(v.checked); //檢測這個 checkbox 是否被選中

通過以上方法,可以任意的相互轉換 jQuery 對象和 DOM 對象,需要再強調的是: DOM 對象才能使用DOM 中的方法,jQuery 對象是不可以使用DOM中的方法。


jquery對象轉化為dom對象

jQuery擷取元素 不管一個還是多個都是返回一個數組
即將擷取的元素放在一個數組對象中。( 也可以這麼認為數組中存的就是DOM對象)
既然是數組 能寫0還是1還是n 就取決於擷取了多少個DOM對象
所以當cm[0] 取的就是jquery擷取的第一個DOM對象
cm[1] 取的就是第二個 以此類推。

而你上面的寫的 使用# 即ID選取器 擷取的肯定是一個元素 要麼這個元素不存在就是0
所以 var cm = $("clickMe");能擷取到元素即可以cm[0] 不能肯定報錯。。
可以cm.length 檢測
 
DOM對象轉成jQuery對象:

你這樣寫,意味著v是DOM對象,而$v是jquery對象,以後如果要調用,就使用$v。當然,$號不是必需的,你也可以用其他的變數名,如var jq_obj=$(v)
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.