title: 《鋒利的jQuery》一、認(rèn)識(shí)jQuery
date: 2017-06-13 14:14:24
tags: 鋒利的jQuery
window.onload和$(document).ready()
window.onload：必須等網(wǎng)頁中所有的內(nèi)容加載完畢后(包括圖片)才能執(zhí)行，不能同時(shí)編寫多個(gè)。
$(document.ready())：網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，可能DOM元素關(guān)聯(lián)的東西并沒有加載完，可以同時(shí)編寫多個(gè)，可以簡寫為$(function(){})
jQuery對象和DOM對象的轉(zhuǎn)換
jQuery轉(zhuǎn)為DOM對象有兩種方法，即[index]和get(index)。
var box = $('#box')[0];
var box1 = $('#box1').get(0);
DOM轉(zhuǎn)為jQuery對象,只需要用$()把DOM對象包裝起來,$()就是一個(gè)jQuery對象的制造工廠。
var box = document.getElementById('box');
var $box = $(box);
$快捷方式的更改
$是jQuery的快捷方式，為防止沖突，也可以自定義這個(gè)快捷方式。
交給其他js庫
假如jQuery庫在其他庫之后引入，在其他庫和jQuery庫加載完成后就可以使用jQuery.noConflict()將變量$的控制權(quán)交給其他js庫，如果先引入jQuery就不需要jQuery.noConflict()方法，直接寫$即可。
<body>
<p id="pp">Test-prottype</p>
<p>Test-jQuery</p>
<!--引入prototype-->
<script src="lib/prototype.js"></script>
<!--引入jQuery-->
<script src="../jquery1.9.1.min.js"></script>
<script>
jQuery.noConflict(); // 將變量$的控制權(quán)移交給prototype.js
jQuery(function(){ // 使用jQuery
jQuery('p').click(function(){
alert( jQuery(this).text() )
})
})
$('pp').style.display = 'none'; // 使用prototype隱藏元素
</script>
</body>
防止$沖突
第一種方法：想確保jQuery不會(huì)與其他庫沖突，可以自定義一個(gè)快捷方式。
<body>
<p id="pp">Test-prottype</p>
<p>Test-jQuery</p>
<!--引入prototype-->
<script src="lib/prototype.js"></script>
<!--引入jQuery-->
<script src="../jquery1.9.1.min.js"></script>
<script>
var $j = jQuery.noConflict(); // 自定義一個(gè)快捷方式
$j(function(){ // 利用剛自定義的快捷方式使用jQuery
$j('p').click(function(){
alert($j(this).text());
})
})
$('pp').style.display = 'none'; // 使用prototype隱藏元素
</script>
</body>
第二種方法：如果不想自定義名稱，同時(shí)又想避免沖突可以這樣。
<body>
<p id="pp">Test-prottype</p>
<p>Test-jQuery</p>
<!--引入prototype-->
<script src="lib/prototype.js"></script>
<!--引入jQuery-->
<script src="../jquery1.9.1.min.js"></script>
<script>
jQuery.noConflict(); // 將變量$的控制權(quán)移交給prototype.js
jQuery(function($){ // 將$通過參數(shù)傳入
$('p').click(function(){
alert($(this).text());
})
})
$('pp').style.display = 'none'; // 使用prototype隱藏元素
</script>
</body>
判斷是否獲取到了某元素
在原生javascript中通過這樣來判斷頁面中是否有這個(gè)元素
if(document.getElementById('tt')){
document.getElementById('tt').style.color = 'red';
}
在jQuery中因?yàn)?()獲取的是一個(gè)對象，所以不能直接判斷這個(gè)對象是否存在
if($('#tt')){
// 這里將永遠(yuǎn)判斷為true，因?yàn)閖Query對象一直存在
}
應(yīng)該這樣判斷
if($('#tt').length > 0){
}
或者
if($('#tt')[0]){
}
