发表新帖
发表新帖

Why is $(document).ready needed after the [removed] tag?

前端 未结
关注
3 641
攒了一身酷
攒了一身酷 2020-12-06 12:51

Why is $(document).ready needed after the

相关标签:
3条回答
  • 北海茫月
    2020-12-06 13:27

    Why is $(document).ready really need after <script> tag when we use javascript.

    It isn't.

    What else if we don't use $(document).ready

    First, understand why people use ready: It's used to delay the code within the function you pass into it until jQuery calls that function, which jQuery does when it thinks the document is fully loaded.

    JavaScript code within script tags runs immediately. If the script tag is above an element it refers to, the element won't exist when the script runs:

    <script>
$("#foo").show();
</script>
<div id="foo" style="display: none">...</div>

    That div will not be shown, because it doesn't exist when the code runs. So people use ready to delay their code.

    There's a better way if you control where your script tags go: Just put your script tag at the end of the document, just before the closing </body> tag:

    <div id="foo" style="display: none">...</div>
<!-- ... -->
<script>
$("#foo").show();
</script>
</body>

    All of the elements defined above the script tag will exist when the code runs. No need for ready.

    0 讨论(0)
  • 花落未央
    2020-12-06 13:30

    The ready event occurs when the DOM (document object model) has been loaded.

    Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. 

    //Use ready() to make a function available after the document is loaded:
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
    });
});

    Like in the example above. The ready() method specifies what happens when a ready event occurs.

    Direct quote from Learn jQuery

    A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

    0 讨论(0)
  • 南笙
    2020-12-06 13:52

    $(document).ready is javascript code, so it has to be written in <script> element and after jQuery is loaded.

    If you don't write $(document).ready, your code will not wait for DOM to load completely and execute the javascript code immediately.

    If you're using script in <head> that is using/manipulating some elements from DOM, you'll need ready, otherwise you'll get null/undefined. If you're using script at the end of <body>, then you'll be safe as all the elements are loaded.

    Quoting as it is from jQuery Docs

    While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

    In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

    Example? Sure!

    In Head no ready

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script>
    alert($('#myname').val());
  </script>
</head>

<body>
  <input type="text" value="Tushar" id="myname" />
</body>

</html>

    At the end of body

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <input type="text" value="Tushar" id="myname" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script>
    alert($('#myname').val());
  </script>
</body>

</html>

    In head with ready

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      alert($('#myname').val());
    });
  </script>
</head>

<body>
  <input type="text" value="Tushar" id="myname" />

</body>

</html>

    For the <script> at the end of <body>, you can omit ready.

    0 讨论(0)
 看不清?
提交回复
热议问题