文档章节

js 基础(一)

我辈年轻1
 我辈年轻1
发布于 2016/11/03 19:22
字数 503
阅读 0
收藏 0
<!--最近需要用到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目录下,这部分很基础,也有些注释在里面我就啥都不说了。至于目录结构,一般有点基础的都会,我就不多说了。

本文转载自:http://www.cnblogs.com/wobeinianqing/p/5352496.html

下一篇: android 颜色对照
我辈年轻1
粉丝 1
博文 85
码字总数 0
作品 0
南京
程序员
私信 提问
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung
2014/09/23
0
0
当javaScript从入门到提高前需要注意的细节:变量部分

到了HTML5的时代,对javaScript的要求不是降低了,而是更提高了。javaScript语言的入门非常简单,如果你有java、C#等C风格的结构化语言的基础,那javaScript你最多半天就可以写点什么了。但是...

彭博
2012/03/09
54
0
JavaScript基础专题之异步(十三)

什么是异步? 简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。 我们以 中 发送请求为例。 上面代码中 需要传入两个参数进去,和,其中...

Chris_Ping
07/22
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
如何轻松快速学习JavaScript 呢?

JS给人那种感觉的原因多半是因为它如下的特点: 1:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。 2:本身内容很多,如函数库,对象库就一大堆。 3:混合多种编程思想。 4:辛苦学习...

课工场CC老师
2017/11/04
36
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部