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


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

            在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");
    }
    }

    效果演示

  • 相关阅读:
    Flink 读取 Kafka 数据 (极简版)
    自动化测试模型
    C语言字符串处理库函数大全(转)
    c语言笔记
    c语言的自动类型转换(转)
    itest(爱测试)开源接口测试&敏捷测试管理平台8.1.0发布
    itest(爱测试)开源接口测试&敏捷测试&极简项目管理 8.0.0 发布,测试重大升级
    工控机折腾小记
    linux
    华为交换机服务端策略路由配置
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6767000.html
Copyright © 2020-2023  润新知