How jquery code is executed-JS Tutorial-php.cn

How jquery code is executed

无忌哥哥

Release： 2018-06-29 10:57:17

Original

1809 people have browsed it

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

If you put it here, it will be invalid if you write it like this. Why?

Because of this When the code is executed to the js script, the page in the body has not been rendered, and $('#list>li') cannot obtain the element

at all, so it must be executed after the page rendering is completed, and the DOM tree is generated. will be effective

So how can it be executed in the head? There are two methods:

1. Use the onload event of the window object: After the page element is loaded, call it again This js script (delayed call)

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

Copy after login

So is there a method with the same function in jquery? Of course there is, not only there is, but it is more efficient: ready()

$(document).ready(function () {
$(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
})

Copy after login

Abbreviation:

$(function(){
//jq代码
$(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
})

Copy after login

Of course, if you write the jquery code at the bottom of the html document, it will not be so troublesome, but it is still recommended to encapsulate the code with $(function(){})

Why is the $(document).ready() method more efficient than the window.onload event?

HTML page generation is divided into two steps:

1. Generate DOM tree: tell How many elements are there in the browser html file and the relationship between them

2. Load external resources: such as images, external files, etc.

The window.onload event must be When the dom tree is generated, the

$().ready() event can be triggered only after all external resources have been loaded: it can be triggered as long as the DOM is created, without waiting for all elements to be loaded, especially for larger pictures or file, the effect is very obvious

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery代码的执行方式</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代码
    $(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
    })
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></li>
<li>箱包</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>数码产品
<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">
// $(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
// $(document).ready(function(){
// //这里放jQuery代码:将列表水平摆放
// $(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
// })
</script>
</body>
</html>

Copy after login

The above is the detailed content of How jquery code is executed. For more information, please follow other related articles on the PHP Chinese website!