jquery代碼的執(zhí)行方式

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 19:34:58

jquery代碼的執(zhí)行方式

jquery代碼的執(zhí)行方式:$('#list > li').addClass('horiz') 放在這里,這樣寫就會無效,為什么呢因為此時代碼執(zhí)行到js腳本的時候,body中的頁面還沒有渲染,$('#list>li')根本無法獲取到元素所以要放在頁面渲染結(jié)束,DOM樹生成再執(zhí)行才會有

推薦度：

點擊下載本文 文檔為doc格式

導讀jquery代碼的執(zhí)行方式:$('#list > li').addClass('horiz') 放在這里,這樣寫就會無效,為什么呢因為此時代碼執(zhí)行到js腳本的時候,body中的頁面還沒有渲染,$('#list>li')根本無法獲取到元素所以要放在頁面渲染結(jié)束,DOM樹生成再執(zhí)行才會有

$('#list > li').addClass('horiz')

放在這里,這樣寫就會無效,為什么呢?

因為此時代碼執(zhí)行到js腳本的時候,body中的頁面還沒有渲染,$('#list>li')根本無法獲取到元素

所以要放在頁面渲染結(jié)束,DOM樹生成再執(zhí)行才會有效

那么如何才能做到在head中也可以執(zhí)行呢?有二種方法:

1. 使用window對象的onload事件:在頁面元素加載完成,再調(diào)用這個js腳本(延遲調(diào)用)

window.onload = function () {
$('#list > li').addClass('horiz')
}

那么在jquery中有沒有同樣功能的方法呢?當然有,不僅有,而且效率更高:ready()

$(document).ready(function () {
$('#list > li').addClass('horiz')
})

簡寫:

$(function(){
//jq代碼
$('#list > li').addClass('horiz')
})

當然,如果將jquery代碼寫在html文檔的底部,就不這樣麻煩了,但還是推薦將代碼用$(function(){})封裝

為什么說:$(document).ready()方法比window.onload事件更高效呢?

html頁面生成分為二步:

1. 生成DOM樹: 告訴瀏覽器html文件中有多少元素以及他們之間的關系

2. 加載外部資源: 例如圖像,外部文件等

window.onload事件必須要在dom樹生成,外部資源全部加載完畢才可以觸發(fā)

$().ready()事件:只要DOM創(chuàng)建完成就可以觸發(fā),不必等到元素全部加載完成,特別是有較大圖片或文件時,效果非常明顯

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery代碼的執(zhí)行方式</title>
<style type="text/css">
.horiz {
float:left;
list-style: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
 $(function(){
 //jq代碼
 $('#list > li').addClass('horiz')
 })
</script>
</head>
<body>
<h2>購物清單</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘寶</a></li>
<li>箱包</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>數(shù)碼產(chǎn)品
<ul>
<li><a href="">京東</a></li>
<li>筆記本電腦</li>
<li>顯示器</li>
</ul>
</li>
<li>食品保健
<ul>
<li><a href="">拼多多</a></li>
<li>奶粉</li>
<a href="">玩具</a>
</ul>
</li>
</ul>
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
// $('#list > li').addClass('horiz')
// $(document).ready(function(){
// //這里放jQuery代碼:將列表水平擺放
// $('#list > li').addClass('horiz')
// })
</script>
</body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquery代碼的執(zhí)行方式

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法的方法代碼

熱門焦點

jquery代碼的執(zhí)行方式

jquery代碼的執(zhí)行方式

jquery代碼的執(zhí)行方式

最新推薦

猜你喜歡

熱門推薦