快捷導(dǎo)航

jQuery如何將選中的對象轉(zhuǎn)化為原始的DOM對象

更新時間：2014年06月09日 17:40:36 作者：

在一個頁面上選擇元素返回的集合是jQuery對象而不是原始的DOM對象，那么如何將其轉(zhuǎn)為DOM對象呢？下面有個不錯的方法，大家可以嘗試操作下

在jQuery中,在一個頁面上選擇元素返回的集合是jQuery對象而不是原始的DOM對象. 所以只能運行jQuery方法. 如果要在選擇集上運行DOM方法和屬性,該集合必須轉(zhuǎn)化為DOM對象

比如你不可以這樣使用:

$('div').innerHTML = "hello world";

因為innerHTML是 DOM的屬性而不是jQuery對象的屬性.如果確實想這么做.那么就需要將jQuery對象轉(zhuǎn)化為DOM對象.方法有兩種.

①jQuery提供一種核心方法get(),所以上面的可以寫成$('div').get().innerHTML = "hello world";

當(dāng)然這里對應(yīng)的是頁面中只有一個div的情況.如果有多個div.

那么這種方法不好使,你需要修改一下代碼,通過傳遞給get(index) 這樣的索引值進(jìn)行選擇.

$("div").get(0).innerHTML = "hello world";

當(dāng)然,你可以使用jQuery自帶的$.each循環(huán)進(jìn)行全部的賦值操作.

$div1 = $("div").get();

復(fù)制代碼代碼如下:

 
<span style="font-size:18px;">$.each($div1, function(index, val) { 
val.innerHTML = 'lc '+ index; 
});</span> 

②我們可以使用[ ] 來使用數(shù)組的形式獲取內(nèi)容.

比如 $('div')[0].innerHTML = "hello world";

下面我們來看一個完整的例子吧.

復(fù)制代碼代碼如下:

 
<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<h3>Books</h3> 
<ol> 
<li>Head First jQuery</li> 
<li>Data Structrue and Algorithm with Javascript</li> 
<li>Nodejs up and running</li> 
<li>Node js with PHP expert</li> 
<li>Sharp jQuery</li> 
<li>Professional Javascript</li> 
</ol> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var lis = $('ol li').get().reverse(); 
$ol = $('ol'); 
$ol1 = $ol.clone(false, false); 
$ol1.empty(); 
$.each(lis, function(index, val) { 
$ol1.append('<li>'+val.innerHTML+'</li>'); 
}); 
$ol1.appendTo('body'); 
}); 
</script> 
</body> 
</html> 
</span> 

下面我補充一下將DOM對象轉(zhuǎn)化為jQuery對象的過程.

這里我使用的是這個例子.

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.clicked{ 
width:100px; 
height: 40px; 
border: 1px solid #cba; 
border-radius: 3px; 
} 
</style> 
</head> 
<body> 
<a href="#" id="cli" onclick="click(this)">Click Me</a> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
function click(it){ 
$(it).addClass('clicked'); 
console.log('yes'); 
} 
</script> 
</body> 
</html> 