一.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. javascript 完全正确的数据库indexedDB

    //indexedDB var dbName = 'whx', version = '1', dbTableName = 'bbg', request, db, conCls, updateKey, ...

  2. 蓝桥杯ALGO-1,区间k大数查询

    #include<stdio.h> int devide(long a[], int low, int high) { long key = a[high]; while (low< ...

  3. C语言：字符串拷贝（截取）、查找

    C语言:字符串拷贝(截取).查找 很惭愧,学了这么久别的语言,一直没有好好学C和C++,所以现在开始认真C/C++的一些特性和比较,这里记录下C语言拷贝和截取的一些方式,由于系统库带的函数不方便,所以 ...

  4. 范式通俗理解：1NF、2NF、3NF和BNCF

    https://blog.csdn.net/wyh7280/article/details/83350722 范式通俗理解:1NF.2NF.3NF和BNCF原创hongiii 最后发布于2018-10 ...

  5. IDEA最新注册码 (亲测有效，可激活至 2089 年~)

    申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除. 分享IDEA最新注册码 (亲测有效,可激活至 2089 年~) 注意 本 ...

  6. C# 数组冒泡排序复习

    using System; namespace runoob { class MyClass { static void Main(string[] args) { MyClass1 myClass ...

  7. P2919 [USACO08NOV]守护农场Guarding the Farm

    链接:P2919 ----------------------------------- 一道非常暴力的搜索题 ----------------------------------- 注意的是,我们要 ...

  8. 8组 上课啦(Class BUddy Pro)使用体验

    下载上课啦app 进入页面显示的是一个第1周的课表,和可以看到本周为第几周,点击周可以调整第几周显示课表 ,课表内容为整周内容,本周内容一目了然.点击右上角可以进入主设置页面,设置页面可以设置静音模式 ...

  9. navicate 连接mysql8.0，个人踩坑问题汇总

    navicate 连接mysql8.0,个人踩坑问题汇总本文目录:1:安装mysql8.0新增全新验证方式,安装如果不修改mysql连接不上2:mysql启动命令问题3:navicate 运程连接My ...

  10. clientHeight offsetTop scrollTop