您的位置：首页 > Web前端 > JavaScript

JS中单引號/双引號以及外部js引入的一些问题

2017-04-26 09:29 489 查看

一、单引號和双引號的使用方法的问题

在JavaScript中能够使用单引號、双引號。二者也能够混合使用。

可是，身为菜鸟的我，却碰到了一些引號的使用问题。

<body>
<div style="border:1px solid red; height:150px;width:150px;" onclick="alert("test");"  id="test">This is a test.
</div>
</body>

理论上，点击这个div会有弹框，可是不管你怎么点击，弹框都不出现。不信？点击查看演示。左思右想，代码都没有问题。可是改动了一个小地方，弹框就出来了

<body>
<div style="border:1px solid red; height:150px;width:150px;" onclick="alert('test');"  id="test">This is a test.
</div>
</body>

点击查看演示，我认为非常奇怪，于是又改了一个小地方，弹框又没了

<body>
<div style="border:1px solid red; height:150px;width:150px;" onclick='alert('test')'  id="test">This is a test.
</div>
</body>

点击查看演示，我有点晕头转向。为了更明确一点。一个小地方的改动，弹框有出现了

<body>
<div style="border:1px solid red; height:150px;width: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;width: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;width:150px;"   id="test">This is a test.
</div>
</body>

改动的test.js

window.onload=function()
{
var test = document.getElementById("test");
test.onclick = function()
{
alert("test");
}
}

效果演示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航