zoukankan      html  css  js  c++  java
  • 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");
    }
    }

    效果演示

  • 相关阅读:
    P2082 区间覆盖(加强版)
    Java基础
    @import
    POST方式"Content-type"是"application/x-www-form-urlencoded 的请求遇到的问题
    VBox 安装 macOS 10.12
    对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)
    window.location 属性
    post get 区别
    vue 生命周期
    记事本
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6767000.html
Copyright © 2011-2022 走看看