JQuery的使用非常簡單。首先引入我們的Jquery庫,代碼如下所示:
<script src="../js/jquery-1.12.4.js"></script>接下來我們就可以直接使用JQuery庫了。代碼如下所示:
<script src="../js/jquery-1.12.4.js"></script>這裡我們有必要學習一下window.onload和jQuery ready方法方法的區別,以上兩種方式都是在 HTML 文檔完畢後再執行 DOM 操作,但它們還是有一定的區別,如下圖:

區別一:執行時機不同
1. 原生JS會等到DOM元素載入完畢,並且圖片也載入完畢才會執行
2. jQuery會等到DOM元素載入完畢,但不會等到圖片也載入完畢就會執行
<script>
// 原生JS的寫法
window.onload = function() {
alert("HelloWorld JS!!!");
}
// JQuery 寫法一
jQuery(document).ready(function() {
alert("Hello JQuery01!!!");
});
</script>區別二:執行次數不同
1. 原生的JS如果編寫了多個入口函數,後面編寫的會覆蓋前面編寫的
2. jQuery中編寫多個入口函數,後面的不會覆蓋前面的
// 區別二: 執行次數不同
window.onload = function() {
alert("Hello Xyr1");
}
window.onload = function() {
alert("Hello Xyr2");
}
jQuery(document).ready(function() {
alert("Hello Xyr1");
})
jQuery(document).ready(function() {
alert("Hello Xyr2");
})區別三: 原生的JS是沒有簡寫的,JQuery可以通過$符號簡化代碼:
// JQuery 寫法一
jQuery(document).ready(function() {
alert("Hello JQuery01!!!");
});
// JQuery 寫法二
$(document).ready(function() {
alert("Hello JQuery02!!!");
});
// JQuery寫法三
jQuery(function() {
alert("Hello JQuery03!!!");
});
// JQuery寫法四
$(function() {
alert("Hello JQuery04!!!");
});
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/251255.html
微信掃一掃
支付寶掃一掃