一.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应：
<h1 onclick="this.innerHTML='你点我干啥'">请点击这里</h1>
---------------------------------------------------------

<p onclick="changeText(this)"> 请点击这里</p>
<script type="text/javascript">
function changeText(id){
id.innerHTML='你点我干嘛123456！';
}
</script>
--------------------------------------------------------

2.使用 HTML DOM 来分配事件

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

3.onchange 事件常结合对输入字段的验证来使用。
<input type="text" id="demo" onchange="myFunction()" placeholder="请输入小写英文字母"/>
<p>当鼠标离开输入框时候，输入的字符串会变大写</p>
<script>
function myFunction(){
var text=document.getElementById('demo');
text.value=text.value.toUpperCase();
}
</script>

4.onmouseover 和 onmouseout 事件
<h1 onmousemove="over(this)" onmouseout="out(this)"
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
</h1>
<script>
function over(id) {
id.innerHTML = "谢谢!";
}
function out(id) {
id.innerHTML = "回来";
}
</script>

5.onmousedown 和 onmouseup
当用户按下鼠标按钮时，更换一幅图像。
<script>
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
<p>按住鼠标不放可以点亮这盏灯！</p>

6.onfocus
当输入字段获得焦点时，改变其背景色。
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

二.DOM节点操作：
1.如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
//设置节点属性
para.setAttribute("id", "new");
para.setAttribute("class", "pl");
para.setAttribute("src",'./img/1.jpg');
para.setAttribute("width","200");
para.setAttribute("height","200");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);

</script>
</body>

2.删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

三.JavaScript循环：
使用 For...In 声明来遍历数组内的元素
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}

四.高级JavaScript:
1.检测浏览器及版本
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称："+ browser)
document.write("<br />")
document.write("浏览器版本："+ version)

2.简单的计时：
<input type="button" value="2秒计时" onclick="setTime()"/>
<p>请点击上面按钮，几秒后会发生弹出框</p>
<script type="text/javascript">
function setTime(){
var t=setTimeout("alert('2 秒！')",2000)
}
</script>

3.无线循环计时：
<input type="button" value="开始计时" onclick="setTime()"/>
<input type="text" id="txt"/>
<p>请点击上面按钮，就开始计时了</p>
<script type="text/javascript">
var s=0;
var t;
function setTime(){
document.getElementById('txt').value=s;
s=s+1;
t=setTimeout("setTime()",1000);
}
</script>

4.带有停止的时间计时：
<input type="button" value="开始计时" onclick="setTime()"/>
<input type="text" id="txt"/>
<input type="button" value="停止计时！" onClick="stopCount()">
<p>请点击上面按钮，就开始计时了</p>
<script type="text/javascript">
var s=0;
var t;
function setTime(){
document.getElementById('txt').value=s;
s=s+1;
t=setTimeout("setTime()",1000);
}
function stopCount(){
// c=0;
setTimeout("document.getElementById('txt').value=c",0);
clearTimeout(t);
}
</script>

5.使用计时事件制作的钟表:
<div id="txt"></div>
<script type="text/javascript">
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout("startTime()",50)
}
function checkTime(i){
if (i<10) {
i="0" + i
}
return i
}
</script>

6.显示今天是星期几：
<script type="text/javascript">
var s=new Date();
var week=new Array;
week[0]='周日';
week[1]='周一';
week[2]='周二';
week[3]='周三';
week[4]='周四';
week[5]='周五';
week[6]='周六';
document.write("今天是："+week[s.getDay()]+"<br />");
document.write("今天是："+s.getDay());
</script>

Web简单小结的更多相关文章

  1. 前台vue的使用简单小结

    前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...

  2. springboot微服务的简单小结

    springboot微服务的简单小结 近来公司用springboot微服务,所以小结一下. 基础: 什么是SpingBoot微服务? 如何创建SpringBoot微服务? 如何管理和完善SpringB ...

  3. web测试小结

    今年5月份开始接触web测试,经过大半年的测试及学习,简单总结下 测试过程: 1.需求理解 2.测试策略.方案.用例编写及评审 3.测试环境搭建 4.测试执行 5.bug提单.问题跟踪 6.回归测试 ...

  4. SpringMVC_简单小结

    SpringMVC是一个简单的.优秀的框架.应了那句话简单就是美,而且他强大不失灵活,性能也很优秀. 机制:spring mvc的入口是servlet,而struts2是filter(这里要指出,fi ...

  5. 一. DotNet MVC4.0+EasyUI Web简单框架-前言

    之所以说它简单,是因为仅仅用了大家最熟悉的三层架构,简单明了 1.先新建一个MVC4.0 Web项目 2.添加EasyUI的引用,放到Script底下 http://files.cnblogs.com ...

  6. web magic 小结

    缘起 写了多年的程序,鲜有产出物,于是最近打算做个不可说的东西来祭奠逝去的青春.数据,是一个程序的起点,我们没有数以亿计的用户,无法让活跃用户给我们产生数据,那就只能去别人的站点上借点数据了.这个功能 ...

  7. WEB简单数据操作练习

    主要学习代码: Login.aspx: <!--第一种方式--> <%-- <script type="text/javascript"> funct ...

  8. ASP.NET MVC ViewData/ViewBag 简单小结

    近期在项目中遇到一个问题,就是用ViewBag.Model存储匿名对象传递给View,但是需要根据条件给匿名对象添加属性,这个可真心不易,Google了一下发现很多方案都是动态编译神马的,感觉好高大上 ...

  9. 移动web问题小结

    Meta标签: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab ...

随机推荐

  1. NPM install -save 和 -save-dev 区别

    最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用比较混乱.其实博主在这之前对这两个参数的理解也是模糊的,各种查资料和实践后对它们之间的异同 ...

  2. 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（11.1）- FlexSPI NOR连接方式大全(RT1015/1020/1050)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT1015/1020/1050三款MCU的FlexSPI NOR启动的连接方式. 由于i.MXRT内部没有非易失性存储 ...

  3. js面试相关

    〇,字符串,数值,数组的转化 (0)检测数据类型 参考连接:http://www.cnblogs.com/onepixel/p/5126046.html 1,, typeof 操作符 :  能检测到( ...

  4. 零基础Python应该怎样学习呢？（附视频教程）

    Python应该怎样学习呢? 阶段一:适合自己的学习方式 对于零基础的初学者来说,最迷茫的是不知道怎样开始学习?那这里小编建议可以采用视频+书籍的方式进行学习.看视频学习可以让你迅速掌握编程的基础语法 ...

  5. 零基础学到什么程度可以找一份web前端工作？

    能找到一份前端开发工作,首先你起码得是一个合格的初级前端工程师.那么,什么是初级前端工程师?初级前端工程师都会做些什么?这个问题需要分为以下几个方面来说: 一.对应岗位的工作职责初级前端,主要负责产品 ...

  6. Python模块之Requests

    目录 Requests 模块 常规的get请求 基于ajax的get请求 常规的post请求 基于ajax的post请求 综合项目实战 requests模块高级 requests代理 验证码处理 Re ...

  7. C# 二进制 十进制 十六进制 之间的转换

    ; Console.WriteLine(a.ToString("X")); //10进制转16进制 Console.WriteLine(Convert.ToString(a, )) ...

  8. 吴裕雄--天生自然 R语言数据可视化绘图（4）

    par(ask=TRUE) # Basic scatterplot library(ggplot2) ggplot(data=mtcars, aes(x=wt, y=mpg)) + geom_poin ...

  9. Elasticsearch客户端源码剖析

    注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 注:本文源链接:https://www.cnblogs.com/chloneda/p/es-cli ...

  10. int16、int32、int64的范围

    做了一个 项目本地测了没问题发布到正式环境上,几天之后有个统计页面报错了,看了本地是正常的, 于是就排查,发现 ID 列 在对 字符串转int 时候 由于用了 Convert.TonInt16 长度不 ...