我知道的方法有3种:
第一种:外部引用远程JavaScript文件。如<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>(相对路劲)或者是<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>(绝对路劲);
另外一种:直接用写在页面上,如:
=
"
http://common.cnblogs.com/script/jquery.js
"
;
document.getElementsByTagName(
"head"
)[0].appendChild(script);
</script>
<script
type=
"text/javascript"
src=
"
http://common.cnblogs.com/script/jquery.js
"
></script>
<script>
window.onload
=
function
(){
var
script
= document.createElement(
"script"
);
script.setAttribute(
"type"
,
"text/javascript"
);
script.src
=
"
http://common.cnblogs.com/script/index.js
"
;
document.getElementsByTagName(
"head"
)[0].appendChild(script);
</script>
</head>
<script
type=
"text/javascript"
src=
"
http://common.cnblogs.com/script/jquery.js
"
></script>
<p>这里是一段文本!</p>
<script>
window.onload
=
function
(){
var
script
= document.createElement(
"script"
);
script.setAttribute(
"type"
,
"text/javascript"
);
script.src
=
"
http://common.cnblogs.com/script/jquery.js
"
;
document.getElementsByTagName(
"head"
)[0].appendChild(script);
</script>
</body>
第一段js运行会出错,由于html代码运行是至上而下载入的,第一段JavaScript代码先运行,才运行以下的html代码,所以根本就找不到该DOM节点,就会报错,假设html先运行,在运行JavaScript代码,就像第二段,就能够运行成功!当然,我不是说一定要先运行html代码。在运行JavaScript代码。这个要依情况而定。
再举一个栗子:
上面的fancybox插件假设像上面这种载入顺序去载入的话。一定是不能运行的。由于代码运行所依赖的js库是后面运行的,这里要讲的内容主要是想说明,假设是在使用一个插件。依赖某个js文件。一定要在前面先运行。无论是放在head头部,还是body中。
上面的样例说明一点。不同的js运行顺序,运行的内容是不一样的。所以改变js文件的位置。就能够改变js的载入顺序(注:这里指的是单独的JavaScript文件或片段。不包括函数的顺序)。
2015.11.05补充:感谢@
橘色大耳朵猫
同学的提醒,这里的js的载入顺序指的是js文件在页面上的载入顺序,不是js程序的载入顺序,先理解这一点。假设说行内js事件代码也算是一个独立的js文件的话(也能够这么理解。毕竟能够独立执行),那这里的载入顺序也是自上而下的,和其它的文件的载入顺序是一样的,可是有一个很特殊的事件例外。那就是“onload”事件,onload
事件会在页面或图像载入完毕后马上发生(w3school上的解释),好难理解。通俗的讲就是,这个事件是在页面上的所以内容载入完毕了。我才来运行这个函数。无论我这个时间定义在哪里都一样。没有顺序而言(本来嘛,我反正都是最后一个运行的,位置对于我来说已经没有意义了);除了onload,其它的事件都是依照顺序运行的。
可能有人会问了,唉,不正确啊,假设我是onclick事件,我点击之后。可能下一行执行的函数在我事件的前面呢,这不是改变了js执行的顺序吗?这怎么解释呢?
假设你还是有这个疑惑,那请注意我在上一句描写叙述上说的是“改变了js的运行顺序”,是运行顺序,不是载入顺序。运行顺序是程序内,载入顺序是文件之间的,比方说点击事件,你点击了。那js就已经经历了载入,然后运行了,假设你还是不理解,我就给你举一个现实生活中的样例:
我手上有4个盒子。盒子里面有不同的东西,每一个盒子都有编号(1,2,3,4),如今我把这4个盒子依次在桌子上,编号顺序随机,然后从左到右依次看一遍,盒子是开的,我就把东西拿出来(这里表示js自己主动运行)。假设是关着的,就看下一个(这里表示是须要事件来出发的。如打开盒子这个动作),直到最后一个盒子看完,整个就完了。那盒子的顺序就是查看盒子的顺序,跟编号没关系(这里说的是文件的名字),onclick这种事件就是盒子我已经过了一遍,如今有没有打开的盒子。我如今打开了。就是运行了这个事件。然而前面我们说了,盒子已经过了一遍,所以这个动作就不涉及整个过场顺序问题了。那onload是怎么回事呢,就是我有一个盒子放在一边,等其它盒子都看了,再看这个盒子(就是最后运行这个事件,onload是自己主动触发运行的),理解了吗?自己摆一摆。要是还不理解,那就去面壁思考吧!
4.type属性都有哪些经常使用的值?代表什么意思?
打开Dreamweaver(我比較喜欢用这个编辑器,习惯了他给的提示。别说我low哦),在<script>上打一个type,会有非常多type属性,我们把他写下来。看看都有哪些:
application/ecmascript application/javascript application/x-ecmascript application/x-javascript text/ecmascript text/javascript text/jscript text/livescript text/tcl text/x-ecmascript text/x-javascript
oh。mygod!
这么多!吓死宝宝了!
在<link>上面打一下:
text/css text/javascript
还好仅仅有2个!
type属性在js上表示脚本的类型,即MIME类型,在link上表示叠层样式表的MIME类型,经常使用的就是2种(其它的不经常使用,也不知道是什么意思。用在什么情况。哪位大神帮忙科普一下):
text/css (css文本。告诉浏览器是载入css样式)
text/javascript (JavaScript文本。告诉浏览器载入js代码)
貌似解释的有点牵强,呵呵!
5.除了type属性还有其它的什么属性?
再次打开Dreamweaver,给的提示有这几个:async,defer,language,runat。src
async:定义脚本是否异步运行。值为:async;
defer:指示脚本不会生成不论什么文档内容。浏览器可继续解析并绘制页面。意思就是等文档载入完成了再运行此js,要是想深入了解这个属性,能够參考
这里
。假设你英文比較好,能够看
这里
。
language:规定脚本的语言。如今使用type来替代了;
runat:其值为server。表示是在服务器上执行此代码。client不执行,不经常使用;
src:指外部脚本文件的引用路径
6.js中经常使用的输出方式?
js的输出方式大概有以下几种: