一、单引號和双引號的使用方法的问题
在JavaScript中能够使用单引號、双引號。二者也能够混合使用。
可是,身为菜鸟的我,却碰到了一些引號的使用问题。
<body> <div style="border:1px solid red; height:150px;150px;" onclick="alert("test");" id="test">This is a test. </div> </body>
理论上,点击这个div会有弹框,可是不管你怎么点击,弹框都不出现。不信?点击查看演示。左思右想,代码都没有问题。可是改动了一个小地方,弹框就出来了
<body> <div style="border:1px solid red; height:150px;150px;" onclick="alert('test');" id="test">This is a test. </div> </body>
点击查看演示,我认为非常奇怪,于是又改了一个小地方,弹框又没了
<body> <div style="border:1px solid red; height:150px;150px;" onclick='alert('test')' id="test">This is a test. </div> </body>
点击查看演示,我有点晕头转向。为了更明确一点。一个小地方的改动,弹框有出现了
<body> <div style="border:1px solid red; height:150px;150px;" onclick='alert("test")' id="test">This is a test. </div> </body>
点击查看演示。
PS:能够把代码放到编辑器中,查看改动的小地方的字体颜色变化!。!
二、在<head>引入外部js的问题
在一般的项目中,js、css和HTML都是分开的,通常是通过在<head>中通过相应元素的src属性引入。我在<head>中引入外部的test.js文件。
HTML:
<pre name="code" class="javascript"><body> <div style="border:1px solid blue; height:150px;150px;" onclick="test();" id="test">This is a test. </div> </body>
test.js
window.onload=function() { <pre name="code" class="javascript">function test() { alert("test"); } }
点击div没有弹窗,效果演示
改动后test.js文件
function test() { alert("test"); }
弹窗出现,效果演示,也能够去掉div的onclick属性,在js中加入,改动例如以下:
HTML:
<body> <div style="border:1px solid blue; height:150px;150px;" id="test">This is a test. </div> </body>
改动的test.js
window.onload=function() { var test = document.getElementById("test"); test.onclick = function() { alert("test"); } }
效果演示