首页 > 代码库 > dom学习笔记1
dom学习笔记1
js-dom
1、input type="button" value="http://www.mamicode.com/单击" onclick="document.onchick=f1"
function f1(){
aleat("f1");
}
“document.oncick=f1”中"f1"未加“()”，加了“()”表示立即执行。
2、window 当前浏览器窗体
window.aleat() //弹出“确定”按钮对话框。
3、confirm //弹出“确定”、“取消”对话框
function confirmDemo()｛
if(confirm("确定删除？"))｛
alert（"ok"）;
｝
else{
alert("cancel")
}
｝
<input type="button" value="http://www.mamicode.com/删除" onclick="confirmDemo()"
4、navigate //跳转
function transfer() {
window.navigate("2-事件.htm");
<input type="button" value="http://www.mamicode.com/导航" onclick="transfer()" />
5、setInterval //每隔一段时间执行
var id = window.setInterval("alert(‘hello‘)",500) //每隔500毫秒显示一次hello
<input type="button" value="http://www.mamicode.com/停止" onclick="clearInterval(id)" /> //停止显示hello
6、标题滚动
function scroll() {
var title = window.document.title;
var first = title.charAt(0);
var last = title.substring(1, title.length); //substring(start,end)中start从0开始，end从1开始。
document.title = last + first;
}
setInterval("scroll()", 100);
7、window对象
窗口：模式窗口与非模式窗口
function showDialog() {
window.showModalDialog("1-.htm")
}
function show() {
window.showModelessDialog("1-.htm");
}
<input type="button" value="http://www.mamicode.com/模式窗口" onclick="showDialog()" /> //只能执行当前页面的操作
<input type="button" value="http://www.mamicode.com/非模式窗口" onclick="show()" />
关闭当前窗口 window不能省略。
8、属性
window.location.href 当前窗口的地址、
window.location.reload() 刷新页面
window.event.
altKey 按下alt键（bool类型）
ctrlKey
shiftKey
client X、client Y 鼠标在窗口区的坐标
screen X、screen Y 鼠标在屏幕上的坐标
offset X、offset Y 鼠标相对于事件源的坐标
returnValue 取消后续内容的执行
srcElement 引发事件的事件源
keyCode 引发事件时的键值
button 引发事件时的鼠标键1为左键，2为右键，3为左右键同时
screen 分辨率
width
height
clipboardData 粘贴板
getData("Text")
setData("Text",val)
clearData("Text")
history
back() go(-1)
forward() go(1)
document.（方法）
write() //输出
writeln() //可以换行
getElementById() //给文本框赋值：根据ID获取元素（1个元素）
var txt = document.getElementById("t2");
txt.value = "http://www.mamicode.com/abc";
getElementsByName() //根据name获取多个元素
getElementsByTagName()
createElement() //创建一个对象
appendChild() //增加一个节点
9、onload 页面加载时触发
onunload 页面关闭或离开的时候触发
onbeforeunload ="window.event.returnValue=http://www.mamicode.com/‘确定关闭？‘" 页面关闭触发提示。
<body onl oad ="alert(‘欢迎您！‘);" onunload="alert(‘欢迎下次光临！‘);"onbeforeunload="window.event.returnValue=http://www.mamicode.com/‘确定关闭？‘"> </body>
onchilk（单击），ondblchilk（双击）
onkeydown（键盘按下），onkeypress（点击键盘），onkeyup（按键释放）
onm ousedown（鼠标按下），onmousemove（鼠标移动），onmouseover（鼠标移动到元素范围）
10、clipboardData 对粘贴板的操作
getData("Text") 读取粘贴板的值，返回值为粘贴板中的内容
clearDara("Text") 清空粘贴板
setData("Text",val) 设置粘贴板的值
oncopy 禁止复制 onpaste 禁止粘贴
11、历史操作history
<input type="button" value="http://www.mamicode.com/后退" onclick="window.history.back()" />
12、获取元素内容
value
innerText
innerHTML
13、动态修改元素样式
this.style.backgroundColor
this.style.fontSize
this.style.marginTop
this.style.display = "none"隐藏 ""显示
this.style.width = "18px"
14、form对象
事件
onsubmit
方法
submit()
15、 <form>用于为用户输入创建 HTML 表单
<form id="form1">
<input id="t2" type="text" value="" />
</form>
16、全选
function btnClick() {
var chks = document.getElementsByName("hobby");
for (var i = 0; i < chks.length; i++) {
//alert(chks[i].value);
chks[i].checked = "checked";
}
17、disabled =false //启用 false为禁止
示例：
计算器+美女时钟
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function add() {
var txt1 = parseInt(document.getElementById("txtNum1").value);
var txt2 = parseInt(document.getElementById("txtNum2").value);
var sum = txt1 + txt2;
document.getElementById("txtSum").value = http://www.mamicode.com/sum;
}
//var now = new Date();
//alert(now.toLocaleDateString());
//alert(now.getHours());
//alert(now.getSeconds());
function getZero(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
}
function setImage() {
var now = new Date();
//var filePath = "mm/00_01.jpg";
var filePath = "mm/" + getZero(now.getHours()) + "_" + getZero(now.getSeconds()) + ".jpg";
//alert(filePath);
var img = document.getElementById("i1");
img.src = http://www.mamicode.com/filePath;
}
setInterval("setImage()", 1000);
//setImage();
function setTime() {
var now = new Date();
var time = getZero(now.getHours()) + ":" + getZero(now.getMinutes()) + ":" + getZero(now.getSeconds());
var txt = document.getElementById("txtTime");
txt.value = http://www.mamicode.com/time;
}
setInterval("setTime()", 1000);
</script>
</head>
<body onl oad="setImage(); setTime()">
<input id="txtTime" type="text" value="" /><br />
<input id="txtNum1" type="text" />
<input type="button" value="http://www.mamicode.com/+" />
<input id="txtNum2" type="text" /><br />
<input type="button" valuehttp://www.mamicode.com/="=" onclick="add()" /><br />
<input id="txtSum" type="text" readonly="readonly" /><br />
<img id="i1" src="" /><br />
<input type="button" value="http://www.mamicode.com/图片" onclick="setImage()" />
</body>
</html>
dom学习笔记1