<!--最近需要用到js相关的知识 就把在W3cSchool 下学到的东西做个笔记，方便以后再看 -->
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

</head>

<body>

    <h4 id="haha">gai bian zhe li </h4>

    <button type="button" onclick="btnClick()">Block button</button>

    <p>-----------------------------------------------------------------------------------------------</p>

    <h4>js 改变图片</h4>

    <img id="Image" onclick="changeImage()" src="img/eg_bulboff.gif" />

    <p>点击灯泡，点亮或熄灭灯</p>

    <p>--------------------------------------------------------------------------------------</p>

    <h4>验证输入</h4>

    <input id="input" type="text" />

    <h5 id="show" style="color: #ff0000;">jian ce</h5>

    <button type="button" onclick="inputDetection()">输入验证</button>

    <p>------------------------------------------------------------------</p>

    <h4>js对象</h4>

    <div id="lis"> 显示对象属性值 </div>

    <button type="button" onclick="list()">显示对象属性值</button>

    <p>------------------------------------------------------------------</p>

    <h4>访问对象的方法</h4>

    <input id="UPC" type="text" />

    <p id="upcs">展示</p>

    <button type="button" onclick="upc()">转换成大写</button>

    <p>------------------------------------------------------------------</p>

    <h4>调用带参数的函数</h4>

    <button type="button" onclick="daican('大雷' ,'16')">传递参数</button>

</body>

<script>

    //调用带参数的函数

    function daican(name , age){

        alert("name = "+ name  +", age = " + age);

    }

    //以访问String对象的toUpperCase 方法  将文本转换成大写

    function upc(){

        upcs = document.getElementById("upcs");

        var up = document.getElementById("UPC").value;

        up = up.toUpperCase();

        upcs.innerHTML=up;

    }

    //js对象

    function list(){

        li = document.getElementById("lis");

        var list = {    //list对象拥有4个属性 a1-a4

            a1 : "name1",

            a2 : "name2",

            a3 : "name3",

            a4 : "name4",

        }

        li.innerHTML=list.a1;//对象属性有两种寻址方式

        li.innerHTML=list["a4"];//第二种

    }

    //改变文字内容

    function btnClick(){

        btn = document.getElementById("haha");

        btn.innerHTML="shen me gui";

    }

    //改变图片地址

    function changeImage(){

        imgbg = document.getElementById("Image");

        if(imgbg.src.match("bulbon")){

            imgbg.src="img/eg_bulboff.gif";

        }else{

            imgbg.src="img/eg_bulbon.gif";

        }

    }

    //检测输入

    function inputDetection(){

        show = document.getElementById("show");

        var input = document.getElementById("input").value;

        if(input==""||isNaN(input)){//检测是否 不是数字 is not a number 如果是数字返回true

            show.innerHTML="输入内容不是数字";

        }else{

            show.innerText="";//两个inner 方法功能在这里似乎是一样的，区别在哪里呢？

        }

    }

</script>

</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. java23种设计模式

    http://www.cnblogs.com/beijiguangyong/archive/2010/11/15/2302807.html#_Toc281750445 http://www.runoo ...

  2. 浏览器默认样式(user agent stylesheet)+cssreset

    每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...

  3. 150922-写写博客监督下不自觉的自己-PPT,Linux,HTML

    开始学PHP的日子里,总是懒散的有一天没一天的.无意间听闻写博客来展示代码(现在还远远做不到哇),来监督个人每天的学习进度,鉴于自己还是爱写一点文字,但愿可以坚持下去. 凡是都喜欢有个计划,骨子里的理 ...

  4. 我是如何来做网站优化(Seo)的？（一）

    谈及网站优化(Seo)及搜索引擎优化,很多站长朋友都觉得发发外联就可以了,至少有一部分人是这样认为的. 这里唐建鹏博客将系统的从零开始学习网站优化(Seo),来解析如何从头包装我们的网络门户. 什么是 ...

  5. Vim插件管理——Vundle

    Vim插件管理--Vundle 都说Vim时程序员写给自己的编辑器,其中的情结可想而知.身为一只程序狗CodingDoge,今天就让我带各位学习Vim的使用. vim因为其庞大而强劲的插件受到无比的推 ...

  6. jquery实现输入框聚焦，键盘上下键选择城市

    在最近有个项目中 需要实现当文本框聚焦的时候,可以键盘上下键选择内容,按enter键的时候,把内容传到输入框中,如图所示: 实现代码如下: /** *输入框聚焦,键盘上下键选择城市 */ ;(func ...

  7. 线程同步以及yield()、wait()、Notify()、Notifyall()

    一.线程同步 1.线程同步的目的是为了保护多个线程访问一个资源时对资源的破坏. 2.线程同步方法是通过锁来实现,每个对象都有切仅有一个锁,这个锁与一个特定的对象关联,线程一旦获取了对象锁,其他访问该对 ...

  8. wamp5设置外网访问方法

    1.安装完Wamp5之后,从外网访问网页时存在无法访问问题. 2.phpmyadmin外网没法访问 1.解决办法: 打开wamp的托盘图标(右下角),找到"Config files" ...

  9. Zygote浅谈

    Zygote是什么 操作系统中,进程实际上是文件到地址空间的映射像.进程将要运行时,由操作系统将其映射到地址空间,完成这项工作的事物本质也应是一个进程,我们称这个进程为孵化进程,那么这个进程怎么收到消 ...

  10. ubuntu下解析udt数据包

    udt是通过udp进行端到端可靠传输的一个协议,有其默认拥塞控制算法. 之前ubuntu下wireshark的版本是1.10,不能直接解析udt数据包[1],升级到最新的2.0.0即可过滤udt数据包 ...