zoukankan      html  css  js  c++  java
  • js的引入方式

    1)直接在HTML页面中使用<script></script>标签引入,可以写在head中,也可以写在body末尾,可以实现

    <code class="language-html"><!doctype html>  
    <html lang="en">   
    <head>    
        <meta charset="UTF-8">    
         
        <meta name="Generator" content="EditPlus®">    
        <meta name="Author" content="">    
        <meta name="Keywords" content="">    
        <meta name="Description" content="">    
        <title>js引入方式实验</title>   
    </head>   
    <body>                   
    <button id="button">实验</button>          
    <script>
        button.onclick = function () {
        alert("引入方法一:直接嵌入script标签");
        }
    </script>
         
    </body>  
    </html></code>  

    2).在html中使用script的src属性引入外部js文件,可实现。

    新建一个index1.html和index1.js文件,代码如下:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>js引入方式实验</title>
     </head>
     <body>
            js的引入方式实验
            <button id="button">实验</button>
            <script src="index1.js">   
            </script>
     </body>
    </html>

    3).事件定义,直接在组件后面的事件中写javascript:js代码,可实现

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>js引入方式实验</title>
     </head>
     <body>
            js的引入方式实验
            <button id="button" onclick="javascript:alert('js引入的方式3:事件定义')">实验</button>
     </body>
    </html>

    4).在一个js文件中调用另外一个js 文件,可实现。但不能直接在第一个js文件中写<script src=xx.js></script>,这样写会导致引入js文件失败

    HTML文件中引入index1-1.js

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>js引入方式实验</title>
     </head>
     <body>
            js的引入方式实验
            <button id="button">实验</button>
            <script src="index1-1.js">
            </script>
     </body>
    </html>
  • 相关阅读:
    Intellij IDEA13 创建多模块Maven项目
    oracle锁
    oracle rac负载均衡
    awk命令
    政务外网、政务专网、政务内网和互联网
    图片切换实现选中-未选中效果
    生成带logo 的二维码
    控制input为number时样式
    移动端适配的解决方法?
    input-checkbox选中及非选中样式设置
  • 原文地址:https://www.cnblogs.com/journey-mk5/p/9707449.html
Copyright © 2011-2022 走看看