文章目录
  1. 1. 一步步走Js
    1. 1.1. 针对IE的条件注释

一步步走Js

一个小概念:
文档(document):呈现静态信息的页面.
document是window的其中一个对象
跳转新的界面:
window.location = "http://www.google.com";
设置延迟:

1
setTimeout(function(){alert(123);},1000)    //1s后启动函数

查询元素,插入内容

1
2
3
4
if(timestamp.firstChild == null)    
timestamp.appendChild(document.createTextNode(new Date().toString()));
var timestamp=document.getElementById("timestamp")
//timestamp具有style和className属性

添加点击事件:

1
2
3
timestamp.onclick = function () {
this.innerHTML = new Date().toString();
}

内容显示隐藏的简单实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.reveal * {display:none;}
.reveal *.handle{display:block;}
/*只有"handle"的元素显示*/
</style>

<script type="text/javascript">
window.onload = function () {
var elements = document.getElementsByClassName("reveal");
for(var i = 0;i < elements.length;i++){
var elt = elements[i]; //elt为reveal元素节点
var title = elt.getElementsByClassName("handle")[0];//第一个handle类的元素
addRevealHandler(title,elt);
}
function addRevealHandler(title,elt) {
title.onclick = function () {
if (elt.className == "reveal")
elt.className = "revealed";
else if (elt.className == "revealed")
elt.className = "reveal";
}
}
}
</script>

</head>
<body>
<div class="reveal">
<h1 class="handle">CLick here to Reveal Hidden Text</h1>
<p>This paragraph is hidden.</p>
</div>
</body>
</html>
  • Js可以放在Url中实现,使用javascript:协议
    for example:(所有浏览器均支持)
    <a href="javascript:alert('123');">WTF?</a>

针对IE的条件注释

1
2
3
4
<!--[if IE6]>
...
...
<![endif]-->

文章目录
  1. 1. 一步步走Js
    1. 1.1. 针对IE的条件注释