window.document.documentElement - 全部文档，整个窗体的顶级对象 最顶端
document.body - 文档的主体
一、注册事件
注意：document.getElementById('btn1').οnclick=F1 此处的F1不要加括号 ,给btn1注册onclick事件
，再点击btn1触发onclick事件调用F1()方法
警告框 、确定 取消 demo 返回true 或false
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
document.getElementById('btn1').οnclick=function(){
if(window.confirm('Are you sure?')){
alert('delete win');
}
else{
alert("delete lose");
}
};
};
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn1"></input>
</body>
</html>二、导航到指定页面和刷新页面
window.location.href('http://www.baidu.com') -----兼容性相对较好
window.location.reload();------刷新页面
三、计时器
<script type="text/javascript">
window.setInterval(function(){
alert('你好');
},1000);
</script><script type="text/javascript">
var setId=setInterval(function(){
alert('你好');
},1000);
clearInterval(setId);//计时器被销毁了
</script>一次性计时器
<script type="text/javascript">
var setid=setTimeout(function(){
alert('hello');
},1000);
clearTimeout(setid);
</script> <script type="text/javascript">
setInterval(function(){
var txt=document.title;
document.title=txt.substr(1)+txt.charAt(0);
},1000);
</script>标题实现跑马灯式的效果
四、加载的几个事件
window.onload -----页面加载
window.onbeforeload----页面被关闭前
window.onunload----页面被关闭后
五、window.event 属性
主要的属性见下图
String(window.screen.width)+'*'+String(window.screen.height) 获取屏幕分辨率
五、事件冒泡
如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发，触发的顺序被‘由内而外’
his和window.event.srcElement的区别-----------------谁触发了事件和谁最先触发事件的区别
//取消事件冒泡
window.event.cancelBubble = true;
六、动态创建元素
<script type="text/javascript">
window.onload = function () {
document.getElementById('btn').onclick = function () {
//创建层
var dvobj = document.createElement('div');
var btnobj = document.createElement('input');
btnobj.type = 'button';
btnobj.value = 'Click me';
dvobj.style.backgroundColor = 'blue';
dvobj.style.width = '300px';
dvobj.style.height = '200px';
dvobj.style.border = '1px solid red';
//添加文字
dvobj.innerText = 'Hello';
dvobj.appendChild(btnobj);
//把层添加到body中
document.body.appendChild(dvobj);
}
}
</script>
移除节点demo
<script type="text/javascript">
window.onload = function () {
document.getElementById('btn').onclick = function () {
var btnobj=document.createElement('input');
btnobj.type = 'button';
btnobj.value = 'create first ';
document.getElementById('dv').appendChild(btnobj);
}
document.getElementById('btndel').onclick = function () {
var dvobj = document.getElementById('dv');
while (dvobj.firstChild) {
dvobj.removeChild(dvobj.firstChild);
}
}
}
</script>innerText和innerHtml的区别
innerText：显示的文本内容
innerHtml：显示的是文本和标签
七、动态创建表格、超链接
<script type="text/javascript">
var dic = {"百度":"http://www.baidu.com","CSDN":"http://www.csdn.net/","谷歌":"http://www.google.com"};
window.onload = function () {
document.getElementById('btn').onclick = function () {
//创建表
var tbobj = document.createElement('table');
tbobj.border = '1px';
for (var key in dic) {
//创建行
var trobj = document.createElement('tr');
var td1obj = document.createElement('td');
td1obj.innerText = key;
var td2obj = document.createElement('td');
td2obj.innerHTML = '<a href="' + dic[key] + '">' + dic[key] + '</a>';
trobj.appendChild(td1obj);
trobj.appendChild(td2obj);
tbobj.appendChild(trobj);
}
document.body.appendChild(tbobj);
}
}
</script>八、css选择器
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title ></title>
<style type="text/css">
.cls {
background-image:url(1.png);
background-repeat:no-repeat;
width:300px;
height:200px;
border:1px solid red;
}
.cls1 {
background-repeat:no-repeat;
background-color:blue;
}
</style>
<script type="text/javascript">
window.onload = function () {
document.getElementById('btn').onclick = function () {
document.getElementById('dv').className = 'cls cls1';
}
}
</script>
</head>
<body>
<input type="button" name="name" value=" light" id="btn" />
<div id="dv"></div>
</body>
</html>批量选择对象赋值给数组，集体注册事件
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title ></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function () {
var inputobjes = document.getElementsByTagName('input');
for (var i = 0; i < inputobjes.length; i++) {
inputobjes[i].onblur = function () {
if (this.value=='') {
this.style.backgroundColor = 'red';
} else {
this.style.backgroundColor = '';//还原为默认颜色
}
}
}
}
</script>
</head>
<body>
<input type="text" name="name" style="width:200px" />
<input type="text" name="name" style="width:200px" />
<input type="text" name="name" style="width:200px" />
<input type="text" name="name" style="width:200px" />
<input type="text" name="name" style="width:200px" />
<input type="text" name="name" style="width:200px" />
</body>
</html>层的显示和隐藏
分清style.display='none'和style.visibility='hidden'的区别
style.display='none'------完全清空
style.visibility='hidden'------仅仅是隐藏
鼠标移动到超链接a，显示一个层,，离开层消失
<script type="text/javascript">
var dvobj;
window.onload = function () {
var aobj = document.getElementById('a');
aobj.onmouseover = function () {
dvobj = document.createElement('div');
dvobj.style.width = '300px';
dvobj.style.height = '200px';
dvobj.style.border = '1px solid red';
dvobj.style.backgroundImage = 'url(1.png)';
dvobj.style.backgroundRepeat = 'no-repeat';
dvobj.style.position = 'absolute';
dvobj.style.left = this.offsetLeft + 'px';
dvobj.style.top = this.offsetTop + this.offsetHeight + 'px';
document.body.appendChild(dvobj);
}
aobj.onmouseleave = function () {
if (dvobj == undefined) {
} else {
dvobj.style.display = 'none';
}
}
}
</script>
密码强弱判断的demo，使用正则表达式
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById('txtpwd').onkeydown = function () {
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = '#808080';
}
var txtvalue = this.value;
if (txtvalue.length >0) {
var i = checkPwd(txtvalue);
if (i <= 1) {
document.getElementsByTagName('td')[0].style.backgroundColor = 'orange';
} else if (i==2) {
document.getElementsByTagName('td')[0].style.backgroundColor = 'yellow';
document.getElementsByTagName('td')[1].style.backgroundColor = 'yellow';
} else if (i==3){
document.getElementsByTagName('td')[0].style.backgroundColor = 'red';
document.getElementsByTagName('td')[1].style.backgroundColor = 'red';
document.getElementsByTagName('td')[2].style.backgroundColor = 'red';
}
}
}
}
function checkPwd(pwdvalue) {
var len = 0;
if (pwdvalue.match(/\d/))
{
len++;
}
if (pwdvalue.match(/[a-zA-Z]/)) {
len++;
}
if (pwdvalue.match(/[^a-zA-Z0-9]/)) {
len++;
}
return len;
}
</script>
</head>
<body>
<input id="txtpwd" type="password" name="name" />
<table border="1" style="width:300px;text-align:center;background-color:#808080">
<tr>
<td>弱</td>
<td>中</td>
<td>强</td>
</tr>
</table>
</body>
</html>省市联动
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var datas = {
"吉林": ["长春", "四平", "松原"],
"山东": ["青岛", "济南", "烟台"],
"山西": ["大同", "太原", "运城"]
};
var defau = '山东';
for (var key in datas) {
var ops1 = document.createElement('option');
ops1.innerText = key;
if (ops1.innerText == defau)
{
ops1.selected = true;
}
document.getElementById('s1').appendChild(ops1);
}
for (var i = 0; i < datas[defau].length; i++) {
var ops2 = document.createElement('option');
ops2.innerText = datas[defau][i];
document.getElementById('s2').appendChild(ops2 );
}
document.getElementById('s1').onchange = function () {
while (document.getElementById('s2').firstChild) {
document.getElementById('s2').removeChild(document.getElementById('s2').firstChild);
}
var defau = document.getElementById('s1').value;
for (var i = 0; i <datas[defau].length; i++) {
var ops2 = document.createElement('option');
ops2.innerText = datas[defau][i];
document.getElementById('s2').appendChild(ops2);
}
}
}
</script>
</head>
<body>
省：
<select id="s1">
</select>
市：
<select id="s2">
</select>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
