Home > Article > Web Front-end > How jquery code is executed

How jquery code is executed

无忌哥哥Original: 2018-06-29 10:57:171727browse

$('#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;)
}

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;)
})

Abbreviation:

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

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>

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!

jquery html 封装 JS function 对象事件 dom li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to Vue webapp project packaging native APP through HBuliderNext article：Introduction to Vue webapp project packaging native APP through HBulider

See more

How jquery code is executed

Related articles