在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();
. 代碼如下:
<span style="font-size:18px;">$.each($div1, function(index, val) {
val.innerHTML = 'lc '+ index;
});</span>
②我們可以使用[ ] 來使用數組的形式獲取內容.
比如 $('div')[0].innerHTML = "hello world";
下面我們來看一個完整的例子吧.
. 代碼如下:
<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對象轉化為jQuery對象的過程.
這裡我使用的是這個例子.
. 代碼如下:
<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>
這裡就是用到了我們的DOM對象轉化為jQuery對象的過程.
注意看: 其實it指的是我們的a這個鏈接對象.是普通的DOM對象,我們在onclick 事件中this傳入.
然後我們用$()對DOM對象進行了封裝,然後才可以使用addClass函數.