search

Home  >  Q&A  >  body text

javascript - jquery event execution problem

function tableColor() {
    alert(0) //这里执行
    $(".table tr:odd").css("background", "#f8f8f8");
}  

第一种写法:
tableColor();//执行alert(0),弹出“0”,表格颜色**没有变化**。

第二种写法:
$(function() {
    tableColor();请输入代码
})
//弹出“0”,表格颜色变化了。

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

ringa_leeringa_lee2757 days ago1117

reply all(9)I'll reply

  • phpcn_u1582

    phpcn_u15822017-06-26 10:55:33

    $(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

    reply
    0
  • 黄舟

    黄舟2017-06-26 10:55:33

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

    reply
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:55:33

    Generally, the referenced js is placed in <head></head>.
    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.

    reply
    0
  • 三叔

    三叔2017-06-26 10:55:33

    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

    reply
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:55:33

    $(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 <BODY>.

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-06-26 10:55:33

    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....

    reply
    0
  • 代言

    代言2017-06-26 10:55:33

    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

    reply
    0
  • 高洛峰

    高洛峰2017-06-26 10:55:33

    This question ends

    reply
    0
  • 迷茫

    迷茫2017-06-26 10:55:33

    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

    reply
    0
  • Cancelreply