【基础知识】Dom基础
【学习日记】Dom基础
1、 内容：使用JavaScript操作Dom进行DHTML开发
2、 目标：能共使用JavaScript操作Dom实现常见的DHTML效果
3、 DHTML= CSS + JavaScript +Dom
4、 Dom中的事件
1> 当鼠标点击按钮时弹出“大家好”对话框
<inputtype="button" value="你好"
onclick="alert('大家好');"/>
2> 将弹出对话框的代码写到<head></head>标签中
<scripttype="text/javascript">
function mouseDown() {
alert("大家好");
}
</script>
下面的代码就可以直接调用上面的一段JavaScript代码
<inputtype="button" value="你好"onclick="mouseDown()"/>
3> 可以在代码中动态的设置事件响应函数
方法一：
functionf1() {
alert("我是f1");
}
方法二;
functionf2() {
alert("我是f2");
}
<!--双击之后让其显示事件document.ondblclick-->
<inputtype="button" onclick="document.ondblclick=f1" value="关联事件t1"/>
<inputtype="button" onclick="document.ondblclick=f2" value="关联事件二"/>
5、 window对象（浏览器当前页面的窗口）
1> alert(“a”);其实应该是window.alert(“”);
window可以省略
2> confirm:弹出确定、取消按钮的对话框
//弹Ì¡¥出?是º?否¤?确¨¡¤定¡§的Ì?对?话¡ã框¨°
function confirmDemo() {
if (confirm("是否进入?")) {
alert("已经进入了");
}
else {
alert("您被拒绝了");
}
3> 重新导向到指定的地址
navigate('www.baidu.com')
4> setInterval：每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位：毫秒），返回值为定时器
setInterval("alert('hello')",5000);//每隔5秒弹出一次对话框
5> clearInterval：取消setInterval的定时执行，相当一Timer中的Enabled=False。
因为setInterval可以设定多个定时，所以clearInterval要指定要清除哪个定时器的标识，即setInterval的返回值。
var setinterval = setInterval("alert('hello')",5000);
clearInterval(setinterval);//清除了定时操作
6> setTimeout要是定时执行，但是不像setInterval那样重复的定时执行，而是只执行一次。clearTimeout也是要消除定时。
//定时操作，间隔时间，只执行一次操作
var settimeout = setTimeout("alert('你?好?')", 5000);
//取消只执行一次的定时操作
clearTimeout(settimeout);
6、 实现浏览器标题的跑马灯效果
functionleftScoll() {
vartitle = document.title;//获取浏览器的标题
varfirstch = title.charAt(0);//获取标题的第一个字符
varleststr = title.substring(1, title.length);//获取剩余标题
document.title = leststr + firstch;
varresult = setInterval("leftScoll()",500);//设置标题滚动的时间
}
7、 <body></body>、document对象的事件
1> onload:网页加载完毕时触发
元素的onload事件是元素本身加载完成时触发，把onload放到<body onload=””>里面才是网页全部加载完成时才触发。
2> onunload：网页关闭（或离开）后触发
3> onbeforeunload:在网页准备关闭（或离开）时触发。
在事件中用window.event.returnValue赋值（需要显示的警告消息）
<bodyonload="btn.value='呵呵'"onunload="alert('不要走嘛?，在多呆一会儿啊?')"
onbeforeunload="window.event.returnValue='退出?">
4> 其他事件：（event.）
onclick(单击); ondblclick(双击);onkeydown(按键‘下’);onkeypress(点击按键);onkeyup(按键释放);onmousedown(鼠标按下);onmousemove(鼠标移动);onmouseou(鼠标离开元素范围);onmouseover(鼠标移动到的位置);onmouseup(鼠标按键释放)…
8、 window对象属性1
1>（取得和设置）当前页面的地址：
alert('本页地址：+window.location.href)
重新导向新的地址，和navigate的用法效果一样。 window.location.reload()刷新页面
<inputtype="button" value="获取本页地址"onclick="alert('本页地址：êo'+window.location.href)"/>
<inputtype="button" value="修改本页地址"onclick="window.location.href='Demo1.htm'"/>
<inputtype="button" value="刷新?"onclick="window.location.reload()"/>
2> window.event属于事件对象，用于获得发生事件的信息，事件不局限于window对象，所用的元素都可以通过event属性获得相关的信息。
-->1、altKey属性（bool类型），表示事件发生时alt键是否被按下。类似的属性还有ctrlKey、shiftKey属性。
例子：
<inputtype="button" value="按住shift键¨¹"onclick="if(event.shiftKey){alert('shift事件');}else{alert('普通事件');}"/>
-->2、clientX、clientY发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按钮onclick）的坐标。
-->2、【重点】returnValue属性：默认事件的处理=true
取消默认设置false（设为false可以禁用默认设置）
<ahref="http://www.baidu.com"onclick="alert('禁止访问'+href);window.event.returnValue=false">百度</a>
9、 window对象属性2
1> screen对象，屏幕的信息
<inputtype="button" value="获取当前的屏幕信息"
onclick="alert(screen.width+'*'+screen.height);"/>
//结果是打印出屏幕的分辨率
2> clipboardData对象，对粘贴板的操作。
clearData(“Text”)清空粘贴板
getData(“Text”)读取粘贴板的值，返回为粘贴板的内容
setData(“Text”)设置粘贴板的值
<inputtype="button" value="分享给小伙伴"
onclick="clipboardData.setData('Text','推荐给你的小伙伴一个很黄很暴力的网站，'+location.href); alert('已经复制到粘贴板上了，赶快分享给你的小伙伴吧！"/>
(1)oncopy：oncopy= alert('禁止复制'); return false")//禁止复制
(2)onpaste: onpaste="alert('禁止粘贴'); return false;"//禁止粘贴
(3）网站复制文章时，自动在文章的后面添加小尾巴
<scripttype="text/javascript">
functionmodifyClipboard() {
vartxt = clipboardData.getData("Text");
txt = txt + "本文转载自追梦无悔的个人主页" + location.href;
clipboardData.setData("Text", txt);
}
</script>
<bodyoncopy="setTimeout('modifyClipboard()',100)">//用户复制动作发生一秒后再去更改粘贴板中的内容
（注：不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行，这样就不用oncopy执行调用堆栈了）
3> history操作历史记录
window.history.back();后退
window.history.forward();前进
也可调用window.history.go(-1);后退
window.history.go(1);前进
<inputtype="button" value="后退"onclick="window.history.back()"/>
10、 document属性（window.document）
1> document.write(内容);用于动态向页面写入东西，经常用于广告版块
document.write("<ahref='http://www.baidu.com'>百度</a>")
在onclick等事件中写代码会冲掉页面的内容，只有在页面加载过程中write才会与原来的内容融合在一起。
{有关广告模块：
广告：heim8.com 获取广告脚本
新闻：news.baidu.com/newscode.html
访问流量统计CMZZ（www.cnzz.com）:如鹏网(www.rupeng.com)数据查看密码：123456
百度地图API：http://developer.baidu.com/map/
}
2> getElementById方法【非常常用】
function getText1() {
var text = document.getElementById("textbox1");//获取一个标签的id
alert(text.value);
}
<inputtype="text" id="textbox1" />
<inputtype="button" value="点一下" onclick="getText1()"/>
3> getElementsByName(“”)，根据元素的内容获取对象
由于页面中元素的name可以重复，因此getElementsByName(“”)的返回值是一个数组
//getElementByName("")获得的name值是一个数组 function getRadio() {
varradios = document.getElementsByName("sex");
for(var i = 0; i < radios.length; i++) {
varradio = radios[i];
alert(radio.value);
}
<inputtype="radio" name="sex" value="男"/>男
<inputtype="radio" name="sex" value="女"/>女
<inputtype="radio" name="sex" value="保密¨¹"/>保密¨¹
4> getElementsTagName(“”)根据元素的标签来获得对象
function getTagName() {
var texts =document.getElementsByTagName("input");
for (vari = 0; i < texts.length; i++) {
var text = texts[i];
text.value = "你好，世界";
}
}
<inputtype="text"/>
<inputtype="text"/>
<inputtype="text"/>
<br/>
<inputtype="button" value="点我啊"onclick="getTagName()"/>
5> window.event.srcElement取得引发事件的控件
【基础知识】Dom基础的更多相关文章
- Linux基础知识与基础命令
Linux基础知识与基础命令 系统目录 Linux只有一个根目录,没有盘符的概念,文件目录是一个倒立的树形结构. 常用的目录功能 bin 与程序相关的文件 boot 与系统启动相关 cdrom 与Li ...
- java线程基础知识----线程基础知识
不知道从什么时候开始,学习知识变成了一个短期记忆的过程,总是容易忘记自己当初学懂的知识(fuck!),不知道是自己没有经常使用还是当初理解的不够深入.今天准备再对java的线程进行一下系统的学习,希望 ...
- day63:Linux:nginx基础知识&nginx基础模块
目录 1.nginx基础知识 1.1 什么是nginx 1.2 nginx应用场景 1.3 nginx组成结构 1.4 nginx安装部署 1.5 nginx目录结构 1.6 nginx配置文件 1. ...
- 这些C++基础知识的基础知识你都学会了吗？
一.C++基础知识 新的数据类型 C语言中的数据类型 C++中新的数据类型 思考:新的数据类型有什么好处?请看下面的代码: 可以见得:新的类型使整个程序更加简洁,程序变得易读易懂!这个就是bool ...
- web前端基础知识 Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- Ceph基础知识和基础架构认识
1 Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...
- Ceph 基础知识和基础架构认识
1 Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...
- 算法导论 - 基础知识 - 算法基础（插入排序&归并排序）
在<算法导论>一书中,插入排序作为一个例子是第一个出现在该书中的算法. 插入排序: 对于少量元素的排序,它是一个有效的算法. 插入排序的工作方式像许多人排序一手扑克牌.开始时,我们手中牌为 ...
- JavaScript基础知识----零基础js入门练习题
1,什么是Javascript? 答:Javascipt是一种脚本语言,由web浏览器进行解释和执行. 2,JavaScript是由那几个部分组成? 答:主要分为以下三种: ECMASc ...
- JavaScript学习 - 基础(六) - DOM基础操作
DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...
随机推荐
- 你应该了解的强大CSS表达式 ----- expression
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一 ...
- asp.net 调用post方法并获取返回值
/// <summary> /// http协议 post数据 接受返回结果 /// </summary> /// <param ...
- erp前端项目总结
目录 一.项目目录(vue-cli2) 二.开发实践 (一) 权限 (二) 各组件间传递数据 (四) 路由 (七) 组织部门业务员三级联动 (八) 优化性能,手动绑定下拉框数据 (九) 验证 (十) ...
- 支付宝hr终面,忐忑的等待结果
上周一,内推网投了支付宝上海的 高级java软件开发工程师:阿里效率就是高,不到30分钟电话就过来了!约的上周五14:00面试:上周五技术面了2轮,第一轮是主管面试,貌似给了p6;第二轮部门总监面试, ...
- 使用solrJ管理索引——（十四）
a) 什么是solrJ solrj是访问Solr服务的java客户端,提供索引和搜索的请求方法,SolrJ通常在嵌入在业务系统中,通过SolrJ的API接口操作Solr服务,如下图:
- solr4.10.3部署到tomcat——（十）
0. 准备环境:
- VC++6.0中ClassView中类消失 解决方案[转自网络]
有时候在VC++6.0中编程会出现这样一个问题,由于对C...View类的操作后,在窗口左边ClassView框中的C...View类会消失,这种操作通常是在C...View类中右击点“Add Win ...
- linux下补丁制作及打补丁实例【转】
转自:http://www.latelee.org/using-gnu-linux/diff-and-patch-on-linux.html 搞ARM有一段时日了,期间看了不少开发板的手册,手册的内容 ...
- 安装mysql5.5的时候出现Error Nr.1045
解决办法: 1.删除注册表几个键值:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\MySQL HKEY_L ...
- Codeforces 859E Desk Disorder 并查集找环，乘法原理
题目链接:http://codeforces.com/contest/859/problem/E 题意:有N个人.2N个座位.现在告诉你这N个人它们现在的座位.以及它们想去的座位.每个人可以去它们想去 ...