jsDOM的学习笔记
2023-06-13 09:14:32 时间
今天学习了DOM,做了以下一些基础练习……
DOM是DocumentObjectModel文档对象模型的缩写;使用JavaScript操作DOM进行DHTML开发。
学习目标:能够使用JavaScript操作Dom实现常见的DHTML效果。
参考书:张孝祥《JavaScript网页开发——体验式学习教程》
一、DOM的入门:
1、DOM就是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编
程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。
2、DOM也像WinForm一样,通过事件、属性、方法进行编程。
3、CSS+JavaScript+DOM=DHTML(即动态HTML,是HTML语言的扩展。它可以增加文档与对象的演示文稿效果。)
二、事件:
1、事件:<bodyonmousedown="alert("哈哈")">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多,就放到单独的函
数中:
复制代码代码如下:
DOM是DocumentObjectModel文档对象模型的缩写;使用JavaScript操作DOM进行DHTML开发。
学习目标:能够使用JavaScript操作Dom实现常见的DHTML效果。
参考书:张孝祥《JavaScript网页开发——体验式学习教程》
一、DOM的入门:
1、DOM就是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编
程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。
2、DOM也像WinForm一样,通过事件、属性、方法进行编程。
3、CSS+JavaScript+DOM=DHTML(即动态HTML,是HTML语言的扩展。它可以增加文档与对象的演示文稿效果。)
二、事件:
1、事件:<bodyonmousedown="alert("哈哈")">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多,就放到单独的函
数中:
<scripttype="text/javascript">
functionbodymousedown()
{
alert("网页被点坏了,赔吧!");
alert("逗你玩的!");
}
</script>
<bodyonmousedown="bodymousedown()">
请注意:bodymousedown后的括号不能丢,因为表示调用bodymousedown函数,而不是onmousedown事件的响应函数是bodymousedown。
2、动态设置事件:
可以在代码中动态设置事件响应函数,就像.Net中"btn.Click+="一样。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
functionbodymousedown(){
alert("网页被点坏了,赔吧!");
alert("逗你玩的!");
}
functionf1(){
alert("我是f1");
}
functionf2(){
alert("我是f2");
}
</script>
</head>
<body>
<inputtype="button"onclick="document.ondblclick=f1"value="关联事件1"/>
<inputtype="button"onclick="document.ondblclick=f2"value="关联事件2"/>
</body>
</html>
3、window对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert("a")可以省略成alert("a")
1)alert方法,弹出消息对话框
2)confirm方法,显示“确定”、“取消”对话框,如果按了【确定】按钮,就返回true,否则就false。
if(confirm("是否继续?"))
{
alert("确定");
}
else
{alert("取消");}
3)重新导航到指定的地址:navigate("http://www.microsoft.com/");
4)setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如:setInterval("alert("hello")",5000);
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎光临我的主页</title>
<scripttype="text/javascript">
functionscroll(){
vartitle=document.title;
varfirstch=title.charAt(0);
varleftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}//目的是将网页的标题滚动起来
setInterval("scroll()",500);
</script>
</head>
<body>
</body>
</html>
5)clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。varintervalld=setInterval("alert("hello")",5000);
clearInterval(intervalld);
6)setTimeout也是定时执行,但是不像setInterval那样是定时执行,而是设定时间后只执行一次,clearTimeout也是清除定时。
很好区分:Interval是定时;Timeout是超时之意。如:vartimeoutld=setTimeout("alert("hello")",2000);
案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下。提示:标题为document.title属性。
4、1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,而body里的onload才是全部加载完成。
2)onunload:网页关闭(或者离开)后触发。在事件中为"Window.event.returnValue"赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息。如:<bodyonbeforeunload="Window.event.returnValue="真的要放弃发贴退出吗?"">
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
//showModelDialog("HTMLPageWindow.htm");//被拦截
//btn.value="OK";//报错,因为btn元素还没有被构建
</script>
</head>
<bodyonload="btn.value="OK";"onbeforeunload="window.event.returnValue="真的要放弃发贴退出吗?文章会被丢失!";">
<inputtype="button"id="btn"value="模态对话框"onclick="showModelessDialog("HTMLPageWindow.htm")"/>
<inputtype="text"/>
<textareacols="20"rows="20"></textarea>
</body>
</html>
5、其它事件:
除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
三、window对象的属性
1、window.location.href="http://www.sina.com.cn",重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面。
2、window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
1)altKey属性,boot类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例子<inputtype="button"value="点击"onclick="if(event.altKey)
{alert("Alt点击")}else{alert("普通点击")}"/>;
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<inputtype="button"value="href"onclick="alert(location.href)"/>
<inputtype="button"value="重定向"onclick="location.href="HTMLPage1.htm""/>
<inputtype="button"value="点击"onclick="if(window.event.ctrlKey){alert("按下了Ctrl")}else{alert("普通点击")}"/>
<ahref="http://www.baidu.com"onclick="alert("禁止访问!");window.event.returnValue=false;">百毒</a>
<formaction="jing.aspx">
<inputtype="submit"value="提交"onclick="alert("数据有问题!");window.event.returnValue=false;"/>
</form>
</body>
</html>
2)clientX、clientY发生事件时鼠标在客户区的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
3)returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
4)srcElement:获得事件源对象
5)KeyCode:发生时间时的按键值
6)button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同时按。<bodyonmousedown="if(event.button==2){alert("禁止复制")}">
相关文章
- K8S学习笔记之docker registry使用http非https
- ADRC学习笔记( 一)[通俗易懂]
- Pygame学习笔记 6 —— 3D游戏
- BloomFilter(布隆过滤器)学习笔记
- 学习笔记:使用BurpSuite抓包时抓到火狐的包怎么办?
- BeanUtils.populate 使用笔记
- 分块 学习笔记
- 《零基础学机器学习》笔记-第1课-新手快速上路路径
- 恨啊!网易架构师500页趣谈网络笔记遭助手泄露,GitHub人手一份
- 完美!这份阿里P8基于电商平台讲解微服务架构设计开发运维笔记
- 【学习笔记】黑马程序员Node.js全套入门教程 | 基础篇
- 学习小组Day02笔记--RUI
- Rust 编程学习笔记Day 4-Copy trait
- GDB使用笔记1
- 【安全研究】Jackson 学习笔记
- 微信机器人Wechaty学习笔记,持续记录
- C++面向对象程序设计(谭浩强)第三章第五节学习笔记
- Java基础学习笔记十 Java基础语法之final、static、匿名对象、内部类详解编程语言
- Java基础学习笔记十一 Eclipse开发工具详解编程语言
- Java基础学习笔记十七 集合框架(三)之Map详解编程语言
- Python基础——学习笔记详解编程语言
- Java学习笔记之十一Java中常用的8大排序算法详解总结编程语言
- CSS学习笔记05 display属性详解编程语言
- html 之前学习响应式的笔记详解编程语言
- Kubernetes学习笔记之kube-proxy service实现原理
- Oracle入门谨记这些笔记(oracle入门学习笔记)
- asp.netLinqtoXml学习笔记
- Python笔记(叁)继续学习
- thinkphp学习笔记之多表查询
- NodeJS学习笔记之Connect中间件模块(二)