【基础知识】Dom基础
【学习日记】Dom基础
1、 内容:使用JavaScript操作Dom进行DHTML开发
2、 目标:能共使用JavaScript操作Dom实现常见的DHTML效果
3、 DHTML= CSS + JavaScript +Dom
4、 Dom中的事件
1> 当鼠标点击按钮时弹出“大家好”对话框
<inputtype="button" value="你好"
οnclick="alert('大家好');"/>
2> 将弹出对话框的代码写到<head></head>标签中
<scripttype="text/javascript">
function mouseDown() {
alert("大家好");
}
</script>
下面的代码就可以直接调用上面的一段JavaScript代码
<inputtype="button" value="你好"οnclick="mouseDown()"/>
3> 可以在代码中动态的设置事件响应函数
方法一:
functionf1() {
alert("我是f1");
}
方法二;
functionf2() {
alert("我是f2");
}
<!--双击之后让其显示事件document.ondblclick-->
<inputtype="button" οnclick="document.οndblclick=f1" value="关联事件t1"/>
<inputtype="button" οnclick="document.οndblclick=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 οnlοad=””>里面才是网页全部加载完成时才触发。
2> onunload:网页关闭(或离开)后触发
3> onbeforeunload:在网页准备关闭(或离开)时触发。
在事件中用window.event.returnValue赋值(需要显示的警告消息)
<bodyοnlοad="btn.value='呵呵'"οnunlοad="alert('不要走嘛?,在多呆一会儿啊?')"
οnbefοreunlοad="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="获取本页地址"οnclick="alert('本页地址:êo'+window.location.href)"/>
<inputtype="button" value="修改本页地址"οnclick="window.location.href='Demo1.htm'"/>
<inputtype="button" value="刷新?"οnclick="window.location.reload()"/>
2> window.event属于事件对象,用于获得发生事件的信息,事件不局限于window对象,所用的元素都可以通过event属性获得相关的信息。
-->1、altKey属性(bool类型),表示事件发生时alt键是否被按下。类似的属性还有ctrlKey、shiftKey属性。
例子:
<inputtype="button" value="按住shift键¨¹"οnclick="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"οnclick="alert('禁止访问'+href);window.event.returnValue=false">百度</a>
9、 window对象属性2
1> screen对象,屏幕的信息
<inputtype="button" value="获取当前的屏幕信息"
οnclick="alert(screen.width+'*'+screen.height);"/>
//结果是打印出屏幕的分辨率
2> clipboardData对象,对粘贴板的操作。
clearData(“Text”)清空粘贴板
getData(“Text”)读取粘贴板的值,返回为粘贴板的内容
setData(“Text”)设置粘贴板的值
<inputtype="button" value="分享给小伙伴"
οnclick="clipboardData.setData('Text','推荐给你的小伙伴一个很黄很暴力的网站,'+location.href); alert('已经复制到粘贴板上了,赶快分享给你的小伙伴吧!"/>
(1)oncopy:οncοpy= alert('禁止复制'); return false")//禁止复制
(2)onpaste: οnpaste="alert('禁止粘贴'); return false;"//禁止粘贴
(3)网站复制文章时,自动在文章的后面添加小尾巴
<scripttype="text/javascript">
functionmodifyClipboard() {
vartxt = clipboardData.getData("Text");
txt = txt + "本文转载自追梦无悔的个人主页" + location.href;
clipboardData.setData("Text", txt);
}
</script>
<bodyοncοpy="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="后退"οnclick="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="点一下" οnclick="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="点我啊"οnclick="getTagName()"/>
5> window.event.srcElement取得引发事件的控件
转载于:https://www.cnblogs.com/haoxilu/p/3547376.html
【基础知识】Dom基础相关推荐
- JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...
- 计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...
文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识 第一部分 一.单项选择题 1.世界上第一台电子数字计算机取名为( ). A.UNIVAC B.EDSAC C.E ...
- 使用微型计算机的基础知识,计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识.DOC...
计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识 计算机应用基础考试大纲 基本要求 ???????????????????????????????????????????????????? ...
- 公共基础知识计算机,公共基础知识计算机基础知识试题
计算机基础知识是公共基础知识考试的组成成分之一,以下是由学习啦小编整理关于共基础知识计算机基础知识试题的内容,希望大家喜欢! 公共基础知识计算机基础知识试题 1.CPU的主要功能是进行( ). A.算 ...
- 计算机硬件价钱分配,电脑基础知识计算机硬件基础课件.ppt
电脑基础知识计算机硬件基础课件 操作系统的概念 指直接控制和管理计算机的硬件和软件资源以便于有效的使用这些资源的程序. 操作系统分类 :单用户操作系统.批处理操作系统.实时操作系统.分时操作系统.网络 ...
- 15版计算机应用基础知识整理,[电脑基础知识]计算机应用基础.ppt
[电脑基础知识]计算机应用基础 计算机应用基础 统考 主要内容 考试大纲分析 考题类型与所占比例 考试环境 各章节考点讲解 计算机基础知识 Windows操作 Word.Excel.Powerpoin ...
- 世界上第一代电子计算机取名为,计算机应用基础知识计算机应用基础试题及答案...
<计算机应用基础知识计算机应用基础试题及答案>由会员分享,可在线阅读,更多相关<计算机应用基础知识计算机应用基础试题及答案(13页珍藏版)>请在人人文库网上搜索. 1.计算机应 ...
- 计算机二级基础知识ppt,计算机二级公共基础知识软件工程基础ppt培训课件
计算机二级公共基础知识软件工程基础ppt培训课件 (46页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分 根据三原色原理叠加后的单色形成了 ...
- 2014计算机应用基础试题及答案,2014计算机应用基础知识 计算机应用基础试题及答案.doc...
2014计算机应用基础知识 计算机应用基础试题及答案 计算机应用基础知识 计算机应用基础试题及答案 2012-03-26 11:44 [查查吧] ? 计算机应用基础知识1.1填空题1.第一代计算机采用 ...
- 计算机基础知识统考选择题,[电脑基础知识]计算机应用基础统考选择题.doc
[电脑基础知识]计算机应用基础统考选择题 参加12月份统考的同学可以开始行动起来了!以下几点希望大家明确一下: 1.提供约400多道单选题,大家务必多看几遍,甚至可以考虑记下来(若有时间话可看一下我给 ...
最新文章
- c索引超出了数组界限_Lua数组、Lua迭代器
- 一致性哈希算法介绍,及java实现
- SDUT 贪心算法 删数问题
- 用实例讲解Spark Sreaming--转
- JUC原子类-框架(一)
- CS 期刊哪家强?CCF 发布最新期刊分级目录!
- 在windows上搭建一个ftp服务器
- Win7-VirsualBox下学习Ubuntu--初识ubuntu
- 通过字节流来代替链接来下载小文件
- H264编码格式--图文解释
- 计算机英语口语面试自我介绍,面试英文口语自我介绍(精选8篇)
- Aspose.Words 设置背景颜色4种效果(当前段落设置背景颜色,所有段落文字设置背景颜色,当前单元格设置背景颜色,当前段落文字设置背景颜色)
- 谈谈引用和Threadlocal的那些事
- R语言使用lm函数拟合线性回归模型:使用predict函数和训练好的模型进行预测推理、使用ggplot2可视化预测值和实际值的曲线进行对比分析
- Anaconda 安装使用
- tensorflow 1.10下Mask RCNN实现自己数据集
- Microsoft Outlook 2019 for mac(电子邮件和日历工具) v16.45Beta中文激活版
- 用JS做10以内的加法(带按钮)
- DAEMON Tools Ultra 虚拟光驱 5.9.0.1527 所有你需要模擬的映像制作软件\虚拟驱动器
- Android背景色内部渐变
热门文章
- 手机格式化的计算机原理,格式化不了怎么办 手机电脑方法大不同【图解】
- Jetpack:Room配合LiveData/Flow使用优化,Room+Flow使用原理解析。
- 跨境必看:跨境支付问题以及热门跨境支付方式的优劣势分析!
- 访客登记无需排队-智能访客登记系统-从线上预约到室内导航寻车-为企事业单位提高更便利的人员访问服务
- 原笔迹手写实现平滑和笔锋效果之:笔迹的平滑(一)
- R语言基础之R语言入门
- 宏碁服务器u盘装系统,宏基笔记本用u盘装系统操作流程
- Context-Transformer: Tackling Object Confusion for Few-Shot Detection(AAAI20)
- Tackling the Qubit Mapping Problem for NISQ-Era Quantum Devices
- 403forbidden