jquery對象和javascript的dom對象轉(zhuǎn)換
Jquery框架為jquery對象定義了獨立使用的方法和屬性,它無法直接調(diào)用dom對象的方法,dom對象也無法直接調(diào)用jquery對象的方法和屬性。
Jquery對象和dom對象是可以相互轉(zhuǎn)換的,因為他們所操作的對象都是dom元素,只不過jquery對象包含了多個dom元素,而dom對象本身就是一個dom元素,簡單地說,jquery對象是dom元素的數(shù)組,稱為類數(shù)組,而dom對象就是單個的dom元素。
1.把jquery對象轉(zhuǎn)換成dom對象
(1)借助數(shù)組下標來讀取jquery對象集合中的某個dom元素對象。
Var $li = $(‘li’);//jquery對象
Var li = $li[0];//dom對象
(2)借助jquery對象的get()方法
Var $li = $(‘li’);//jquery對象
Var li = $li.get(0);//dom對象
2.dom對象轉(zhuǎn)換為jquery對象
Var li = document.getElementsByTagName(‘div’);
Var $li = $(li[o]);//把第一個div元素封裝為jquery對象
Var li = document.getElementsByTagName(‘div’);
Var $li = $(li);//把所以的div元素封裝為jquery對象
Load事件必須等到網(wǎng)頁中所以內(nèi)容全部加載完畢后才執(zhí)行。
當網(wǎng)頁中內(nèi)容很多時,load事件就會延遲
Jquery的ready事件是在dom結(jié)構(gòu)繪制完畢后就執(zhí)行,也就是說它在外部文件加載之前就執(zhí)行了,ready事件先于load事件。
Load事件只能被編寫一次,但是ready事件可以在同一個文檔中多次定義。
<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/>