为什么$(文件)后,与其中。就绪需要;脚本>标签 [英] Why $(document).ready need after <script> tag

查看:147
本文介绍了为什么$(文件)后,与其中。就绪需要;脚本>标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

为什么 $(文件)。就绪真正追求&LT需要;脚本> 标签时,我们使用的JavaScript。

如果我们不使用还有什么 $(文件)。就绪

解决方案

$(文件)。就绪是JavaScript的code,所以它被写入<脚本> 元素和jQuery加载完毕

如果你不写 $(文件)。就绪,您的code不会等待的 DOM 的完全加载和立即执行JavaScript code。

如果您正在使用&LT脚本; HEAD> 正在使用/操作的DOM一些元素,你需要就绪,否则你会得到 / 未定义。 如果你使用脚本在年底<身体GT; ,那么你会是安全装载的所有元素

报价,因为它是从 jQuery的文档

  

虽然JavaScript提供用于执行code时,呈现页面时加载事件,此事件不会被触发,直至如图像的所有资产已被完全接收。在大多数情况下,脚本可以尽快在DOM层级已经完全构造运行。传递给。就绪处理程序()是保证执行后DOM是准备好了,所以这通常是连接所有其他的事件处理程序和运行其它jQuery的code的最佳场所。当使用依赖于CSS样式属性值的脚本,重要的是要引用外部样式或嵌入样式元素引用脚本之前。

     

在那里code依赖于加载资源的情况下(例如,如果需要的图像的尺寸)时,code应该放在处理加载事件来代替。

示例?当然!

头没有现成

<!DOCTYPE HTML> < HTML LANG =EN> < HEAD>   <元的charset =UTF-8>   <冠军>文件< /标题>   &所述;脚本的src =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js>&所述; /脚本>   <脚本>     警报($('#MYNAME)VAL());   < / SCRIPT> < /头> <身体GT;   <输入类型=文字值=图莎尔ID =MYNAME/> < /身体GT; < / HTML>

在主体的结束

<!DOCTYPE HTML> < HTML LANG =EN> < HEAD>   <元的charset =UTF-8>   <冠军>文件< /标题> < /头> <身体GT;   <输入类型=文字值=图莎尔ID =MYNAME/>   &所述;脚本的src =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js>&所述; /脚本>   <脚本>     警报($('#MYNAME)VAL());   < / SCRIPT> < /身体GT; < / HTML>

在头准备好

<!DOCTYPE HTML> < HTML LANG =EN> < HEAD>   <元的charset =UTF-8>   <冠军>文件< /标题>   &所述;脚本的src =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js>&所述; /脚本>   <脚本>     $(文件)。就绪(函数(){       警报($('#MYNAME)VAL());     });   < / SCRIPT> < /头> <身体GT;   <输入类型=文字值=图莎尔ID =MYNAME/> < /身体GT; < / HTML>

对于<脚本> &LT结束;身体GT; ,则可以省略就绪

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

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

解决方案

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

这篇关于为什么$(文件)后,与其中。就绪需要;脚本&GT;标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆