jquery對(duì)象和javascript的dom對(duì)象轉(zhuǎn)換
Jquery框架為jquery對(duì)象定義了獨(dú)立使用的方法和屬性,它無(wú)法直接調(diào)用dom對(duì)象的方法,dom對(duì)象也無(wú)法直接調(diào)用jquery對(duì)象的方法和屬性。
Jquery對(duì)象和dom對(duì)象是可以相互轉(zhuǎn)換的,因?yàn)樗麄兯僮鞯膶?duì)象都是dom元素,只不過(guò)jquery對(duì)象包含了多個(gè)dom元素,而dom對(duì)象本身就是一個(gè)dom元素,簡(jiǎn)單地說(shuō),jquery對(duì)象是dom元素的數(shù)組,稱(chēng)為類(lèi)數(shù)組,而dom對(duì)象就是單個(gè)的dom元素。
1.把jquery對(duì)象轉(zhuǎn)換成dom對(duì)象
(1)借助數(shù)組下標(biāo)來(lái)讀取jquery對(duì)象集合中的某個(gè)dom元素對(duì)象。
Var $li = $(‘li’);//jquery對(duì)象
Var li = $li[0];//dom對(duì)象
(2)借助jquery對(duì)象的get()方法
Var $li = $(‘li’);//jquery對(duì)象
Var li = $li.get(0);//dom對(duì)象
2.dom對(duì)象轉(zhuǎn)換為jquery對(duì)象
Var li = document.getElementsByTagName(‘div’);
Var $li = $(li[o]);//把第一個(gè)div元素封裝為jquery對(duì)象
Var li = document.getElementsByTagName(‘div’);
Var $li = $(li);//把所以的div元素封裝為jquery對(duì)象
Load事件必須等到網(wǎng)頁(yè)中所以?xún)?nèi)容全部加載完畢后才執(zhí)行。
當(dāng)網(wǎng)頁(yè)中內(nèi)容很多時(shí),load事件就會(huì)延遲
Jquery的ready事件是在dom結(jié)構(gòu)繪制完畢后就執(zhí)行,也就是說(shuō)它在外部文件加載之前就執(zhí)行了,ready事件先于load事件。
Load事件只能被編寫(xiě)一次,但是ready事件可以在同一個(gè)文檔中多次定義。
<html>
<head>
</head>
<body>
<div class="panel"/>wlecome</div>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));
$('input[type="button"]')
.eq(0).click(function(){
$(this).val("紅色").addClass('red'); }).end().eq(1).click(function(){
alert(1);
}).end().eq(2).click(function(){
alert(2);
}).end().eq(3).toggle(function(){
$('.panel').hide('slow');
},function(){
$('.panel').show('slow');
}
);
});
</script>
</body>
<html/>
posted on 2013-06-19 15:49 楊軍威 閱讀(396) 評(píng)論(0) 編輯 收藏