html引入的js文件,和直接在页面下写的js代码运行的顺序

html引入的js文件,和直接在页面下写的js代码运行的顺序,第1张

HTML中js的执行顺序就是按照从上至下引入的顺序来的。

比如代码

<script type="text/javascript" src="xxx.js"></script>

<script>zzzzzzzzzz.....</script>

必然是先执行xxx.js中的代码,后执行zzzzzzzzzz....。

如果发现不执行的情况,请多检查看是否代码有错误。

Javascript是执行顺序是至上而下的,除非特别说明, Javascript代码不会等到页面加载完毕后才执行。

例如:

一个网页里含有以下HTML代码

<div id="ele">welcome to www.jb51.net</div>

如果在这行HTML代码前,加入如下Javascript代码:

<script type="text/javascript">

  document.getElementById('ele').innerHTML= 'welcome to my blog'

</script>

运行该页面,会得到这样的错误信息:“document.getElementById(‘ele') is null。”原因是,当上面的javascript运行时,页面上还没有ID为‘ele'的DOM元素。

解决办法有两种:

1. 把javascript代码放在HTML代码之后:

 <div id="ele">welcome to www.jb51.net</div>

<script type="text/javascript">

  document.getElementById('ele').innerHTML='welcome to my blog'

</script>

2. 等到在网页加载完毕后,运行该javascript代码。可以使用传统的解决办法(load):首先加HTML的body加入“<body load="load()”>,”然后在load()函数里调用上述javascript代码。这里要着重介绍的是用jQuery来实现:

<script>

$(document).ready(function(){

   document.getElementById('ele').innerHTML= 'welcome to my blog'

})

</script>

//当然,既然用到了jQuery,更简单的写法是:

<script>

$(document).ready(function(){

   $('#ele').html('welcome to my blog') //这里也可用.text()方法

})

</script>

可以把上述jQuery代码放在页面的任何位置,它总是等到页面加载完毕后才执行。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6162121.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存