在jQuery中,在一個頁面上選擇元素返回的集合是jQuery物件而不是原始的DOM物件. 所以只能運行jQuery方法. 如果要在選擇集上運行DOM方法和屬性,該集合必須轉換為DOM物件
例如你不可以這樣使用:
$('div').innerHTML = "hello world";
因為innerHTML是DOM的屬性而不是jQuery物件的屬性.如果確實想這麼做.那麼就需要將jQuery物件轉換為DOM物件.方法有兩種.
①jQuery提供一種核心方法get(),所以上面的可以寫成$('div') .get().innerHTML = "hello world";
當然這裡對應的是頁面中只有一個div的情況.如果有多個div.
那麼這種方法不好使,你需要修改一下程式碼,透過傳遞給get(index) 這樣的索引值進行選擇.
$("div").get(0).innerHTML = "hello world";
當然,你可以使用jQuery自帶的$.each循環進行全部的賦值操作.
$div1 = $("div").get();
$.each($div1, function (index, val) {
val.innerHTML = 'lc ' index;
});
②我們可以使用[ ] 來使用陣列的形式來取得內容.
如$('div')[0].innerHTML = "hello world";
下面我們來看一個完整的例子吧.
Books
- Head First jQuery
- Data Structrue and Algorithm with Javascript
- Nodejs up and running
- Node js with PHP expert
- Sharp jQuery
- Professional Javascript
下面我補充一下將DOM物件轉換為jQuery物件的過程.
這裡我使用的是這個範例.
複製程式碼
複製程式碼
複製程式碼
複製程式碼
程式碼如下:
border-radius: 3px;
}
>
Click Me 這裡就是用到了我們的DOM物件轉換為jQuery物件的過程. 注意看: 其實it指的是我們的a這個連結物件.是普通的DOM物件,我們在onclick 事件中this傳入. 然後我們用$()對DOM物件進行了封裝,然後才可以使用addClass函數.