javascript - jquery event execution problem

Question

{Code...} Why do different writing methods produce different results? Logically speaking, the same function will not only execute half of it.

phpcn_u1582 · Answer

$(function(){
//This is the code that is executed after the page is loaded
})
Your first way of writing is that it is executed before the page is loaded, so the DOM will not change if it is not detected. Colored

黄舟 · Answer

The second one is the abbreviation of .ready(). Please check the documentation for details.

漂亮男人 · Answer

Generally, the referenced js is placed in .
When the first writing method is executed, the page has not been loaded yet, so it cannot be found $(".table tr:odd" )This selector;
The second one is executed after the page is loaded, so it can change the color of the selector.

Either use the second method, or add the js reference at the end of the page.

三叔 · Answer

In the first way of writing, when your code is executed, the table element may not be loaded on the page, so the element may not be found, so there will be no color change.
The second way to write is to wait for the page elements to be loaded before executing your code. This ensures that all elements on the page have been loaded, and the code can find the required elements, so corresponding changes will be made

漂亮男人 · Answer

$(function() {
    // DOM加载完毕
});

The difference between your two times is that the first time you called $(".table tr:odd") when the DOM was not loaded, you may not have gotten the corresponding element. You can print it out to see, but the second time you definitely got it. .

It is recommended to place the JS code or imported JS files at the bottom of the page, before .

phpcn_u1582 · Answer

Similar to the answer on the first floor, the first way of writing, if it is placed before the .table tag and executed before the dom is loaded, the $ selector may not be able to find the dom, and the color cannot be changed.

As for the second one, it is recommended to check the jquery document description. I can’t open the jquery official website here, so I can read it from another place
http://www.css88.com/jqapi-1....

代言 · Answer

1. Your first method of writing is to execute it when the document tag has not been loaded. In other words, if your html has not been loaded, you add a style to .table tr:odd in it. The js script will not know which object it is, so it will be undefined. The element did not finish loading. However, there is no syntax error in the function, so alert 0
2.$(function(){}) will still be executed, that is, it will wait for the html to be loaded before executing the method inside. At this time, the html has been loaded, and the js will be captured. Which element is this object so it can be styled.
Specific reference: http://www.w3school.com.cn/h.asp

高洛峰 · Answer

This question ends

迷茫 · Answer

The first way to write:
tableColor();//Execute alert(0), "0" pops up, but the dom is not selected, and the code is executed line by line

The second way of writing: execute after the document is loaded
$(function() {

tableColor();

})

Conclusion, the introduction of js is placed at the bottom of the document. In addition to custom functions, the internal js in html are written in $(function() {}) to ensure that the js code is executed after the document is executed

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial