1. <!--最近需要用到js相关的知识 就把在W3cSchool 下学到的东西做个笔记，方便以后再看 -->
    <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title></title>
  7.     <script src="js/mui.min.js"></script>
  8.     <link href="css/mui.min.css" rel="stylesheet"/>
  9. </head>
  10. <body>
  11.  
  12.     <h4 id="haha">gai bian zhe li </h4>
  13.     <button type="button" onclick="btnClick()">Block button</button>
  14.  
  15.     <p>-----------------------------------------------------------------------------------------------</p>
  16.     <h4>js 改变图片</h4>
  17.     <img id="Image" onclick="changeImage()" src="img/eg_bulboff.gif" />
  18.     <p>点击灯泡，点亮或熄灭灯</p>
  19.  
  20.     <p>--------------------------------------------------------------------------------------</p>
  21.     <h4>验证输入</h4>
  22.     <input id="input" type="text" />
  23.     <h5 id="show" style="color: #ff0000;">jian ce</h5>
  24.     <button type="button" onclick="inputDetection()">输入验证</button>
  25.  
  26.     <p>------------------------------------------------------------------</p>
  27.     <h4>js对象</h4>
  28.     <div id="lis"> 显示对象属性值 </div>
  29.     <button type="button" onclick="list()">显示对象属性值</button>
  30.  
  31.     <p>------------------------------------------------------------------</p>
  32.     <h4>访问对象的方法</h4>
  33.     <input id="UPC" type="text" />
  34.     <p id="upcs">展示</p>
  35.     <button type="button" onclick="upc()">转换成大写</button>
  36.  
  37.     <p>------------------------------------------------------------------</p>
  38.     <h4>调用带参数的函数</h4>
  39.     <button type="button" onclick="daican('大雷' ,'16')">传递参数</button>
  40. </body>
  41. <script>
  42.     //调用带参数的函数
  43.     function daican(name , age){
  44.         alert("name = "+ name  +", age = " + age);
  45.     }
  46.     //以访问String对象的toUpperCase 方法  将文本转换成大写
  47.     function upc(){
  48.         upcs = document.getElementById("upcs");
  49.         var up = document.getElementById("UPC").value;
  50.         up = up.toUpperCase();
  51.         upcs.innerHTML=up;
  52.     }
  53.     //js对象
  54.     function list(){
  55.         li = document.getElementById("lis");
  56.         var list = {    //list对象拥有4个属性 a1-a4
  57.             a1 : "name1",
  58.             a2 : "name2",
  59.             a3 : "name3",
  60.             a4 : "name4",
  61.         }
  62.         li.innerHTML=list.a1;//对象属性有两种寻址方式
  63.         li.innerHTML=list["a4"];//第二种
  64.     }
  65.     //改变文字内容
  66.     function btnClick(){
  67.         btn = document.getElementById("haha");
  68.         btn.innerHTML="shen me gui";
  69.     }
  70.     //改变图片地址
  71.     function changeImage(){
  72.         imgbg = document.getElementById("Image");
  73.         if(imgbg.src.match("bulbon")){
  74.             imgbg.src="img/eg_bulboff.gif";
  75.         }else{
  76.             imgbg.src="img/eg_bulbon.gif";
  77.         }
  78.     }
  79.     //检测输入
  80.     function inputDetection(){
  81.         show = document.getElementById("show");
  82.         var input = document.getElementById("input").value;
  83.         if(input==""||isNaN(input)){//检测是否 不是数字 is not a number 如果是数字返回true
  84.             show.innerHTML="输入内容不是数字";
  85.         }else{
  86.             show.innerText="";//两个inner 方法功能在这里似乎是一样的，区别在哪里呢？
  87.         }
  88.     }
  89. </script>
  90. </html>

这是上面用到的图片，在img目录下，这部分很基础，也有些注释在里面我就啥都不说了。至于目录结构，一般有点基础的都会，我就不多说了。

js 基础（一）的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  3. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  4. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  5. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  6. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  10. js基础知识总结（2016.11.1）

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

随机推荐

  1. 错误 未能找到类型或命名空间名称 (是否缺少 using 指令或程序集引用?)

    有时发现,明明引用了,结果却提示未引用, 这时就有可能是两个程序集的目标框架类型不一致导致的(在程序集属性面板里改下即可).

  2. 理解 Linux 网络栈（1）：Linux 网络协议栈简单总结

    本系列文章总结 Linux 网络栈,包括: (1)Linux 网络协议栈总结 (2)非虚拟化Linux环境中的网络分段卸载技术 GSO/TSO/UFO/LRO/GRO (3)QEMU/KVM + Vx ...

  3. 学习OpenStack之 (0)：基础知识

    vi 方向键出现字母问题解决方法 执行命令 sudo apt-get remove vim-common 执行命令 sudo apt-get install vim 鼠标被virtualbox捕获无法 ...

  4. nodejs入门

    一.Nodejs介绍 简单的说 Node.js 就是运行在服务端的 JavaScript的代码解析器. 首先要清楚Node不是一个Web服务器,这十分重要.它本身并不能做任何事情.它无法像Apache ...

  5. Windows系统Stunnel客户端的配置

    Stunnel官方就有Windows版本,到下面的地址下载: https://www.stunnel.org/downloads.html 选择”stunnel-X.XX-installer.exe“ ...

  6. [No00002C]人的寿命应该能达到100至175岁-北大齐教授健康讲座笔录

      人的寿命应该能达到100 至175 岁,为什么都没有达到呢?最主要一个原因就是我们不重视保健,不懂得保健的知识.很多人死于无知,这很冤枉啊! 大家知道怎么保健吗?国际上有个维多利亚宣言,宣言里有三 ...

  7. luogu1097统计数字[noip2007提高组Day1T1]

    题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出 ...

  8. UIScrollView解决无法触发手势

    //创建一个分类 //.h #import <UIKit/UIKit.h> @interface UIScrollView (Touch) - (void)touchesBegan:(NS ...

  9. document.readyState等属性

    document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载. ...

  10. bytes和bytearray

    bytes bytes是Python 3中特有的,Python 2 里不区分bytes和str. Python 2中 >>> type(b'xxxxx') <type 'str ...