【学习日记】Dom基础

1、内容：使用JavaScript操作Dom进行DHTML开发

2、目标：能共使用JavaScript操作Dom实现常见的DHTML效果

3、 DHTML= CSS + JavaScript +Dom

4、 Dom中的事件

1> 当鼠标点击按钮时弹出“大家好”对话框

<input type="button" value="你好"

onclick="alert('大家好');" />

2> 将弹出对话框的代码写到<head></head>标签中

function mouseDown() {

alert("大家好");

}

</script>

下面的代码就可以直接调用上面的一段JavaScript代码

3> 可以在代码中动态的设置事件响应函数

方法一：

functionf1() {

alert("我是f1");

}

方法二;

functionf2() {

alert("我是f2");

}

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 onload="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()刷新页面

2> window.event属于事件对象，用于获得发生事件的信息，事件不局限于window对象，所用的元素都可以通过event属性获得相关的信息。

-->1、altKey属性（bool类型），表示事件发生时alt键是否被按下。类似的属性还有ctrlKey、shiftKey属性。

例子：

-->2、clientX、clientY发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按钮onclick）的坐标。

-->2、【重点】returnValue属性：默认事件的处理=true

取消默认设置false（设为false可以禁用默认设置）

9、 window对象属性2

1> screen对象，屏幕的信息

<input type="button" value="获取当前的屏幕信息"

onclick="alert(screen.width+'*'+screen.height);"/>

//结果是打印出屏幕的分辨率

2> clipboardData对象，对粘贴板的操作。

clearData(“Text”)清空粘贴板

getData(“Text”)读取粘贴板的值，返回为粘贴板的内容

setData(“Text”)设置粘贴板的值

<input type="button" value="分享给小伙伴"

onclick="clipboardData.setData('Text','推荐给你的小伙伴一个很黄很暴力的网站，'+location.href); alert('已经复制到粘贴板上了，赶快分享给你的小伙伴吧！"/>

(1)oncopy：oncopy= alert('禁止复制'); return false")//禁止复制

(2)onpaste: οnpaste="alert('禁止粘贴'); return false;"//禁止粘贴

(3）网站复制文章时，自动在文章的后面添加小尾巴

functionmodifyClipboard() {

vartxt = clipboardData.getData("Text");

txt = txt + "本文转载自追梦无悔的个人主页" + location.href;

clipboardData.setData("Text", txt);

}

</script>

<body oncopy="setTimeout('modifyClipboard()',100)">//用户复制动作发生一秒后再去更改粘贴板中的内容

（注：不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行，这样就不用oncopy执行调用堆栈了）

3> history操作历史记录

window.history.back();后退

window.history.forward();前进

也可调用window.history.go(-1);后退

window.history.go(1);前进

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);

}

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);

}

<input type="radio" name="sex" value="男"/>男

<input type="radio" name="sex" value="女"/>女

<input type="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 = "你好，世界";

}

<br />

5> window.event.srcElement取得引发事件的控件

【学习日记】Dom基础相关推荐

Java学习日记1——基础认知
Java学习日记1--基础认知学习Java阶段,如果发现不正确的描述,还请指正! 首先附上Java相关下载链接和配置教程链接 Java相关软件工具下载地址:官方下载 Java环境配置(win10配置 ...
Python学习日记-day1基础篇字符输出注释
Python学习日记-day1基础篇字符输出注释 by北栀一刺 # -*- coding: utf-8 -*- """ Spyder EditorThis is a ...
python学习日记（基础数据类型及其方法02）
python的变量 python中的变量不需要声明,变量载使用前必须被赋值,变量被赋值以后才会被创建. 在python中变量就是变量,没有数据类型.我们所说的类型是变量所指向内存中的对象的类型. py ...
JS学习日记--正则基础语法
一.正则表达式正则表达式是由普通字符及特殊字符组成的对字符串进行过滤的逻辑公式创建方式字符量的方式: var reg = /abc/: 构造函数 var reg = new RegExp(&qu ...
Python学习日记-函数基础
目标:定义一个函数,求n~m之间整数平方的和第一步,自定义一个求平方的函数square() def suqare(i):j = i * ireturn j (为了练习,假装库里没有) 第二步,调用s ...
MySql DDL日志_mysql学习日记——数据库基础与基本DDL、DML语句
# # # 数据库的基本概念数据库: DataBase (DB).用于存储和管理数据的仓库. 数据库的特点: 1. 持久化存储数据的.其实数据库就是一个文件系统 2. 方便存储和管理数据 3. 使用 ...
210学习日记(18)_ARM基础知识
210学习日记(18) --ARM基础知识注意: 以下大部分类容都来自网上现成的(直接拷贝过来的,然后经整理)!!!! 问1:ARM处理器工作模式有几种?各种工作模式下分别有什么特点? 答1:ARM ...
10.16 my学习日记 (XPath的基础语法，lxml库的应用）
10.16 my学习日记(XPath的基础语法,lxml库的应用) XPath的基础语法 XPath查找标签 XPath谓语 lxml库在爬虫中的应用 etree库etree_Element对象使用 ...
托攻击检测基础知识-----WZW托攻击学习日记（一）
( 注:开始写这个学习日记的目的,有三个:一,检测自己学习的质量:二,与人交流,如果学习中出现什么错误欢迎指正:三,提供即将或以后想要学习相关知识的同志一丢丢帮助,也给自己的复习提供资料. 再注:本人 ...
深度学习日记 2 - 概率论与信息论基础
深度学习日记 2 - 概率论与信息论基础: 1.随机变量(random variable):是可以随机地取不同值的变量.我们通常用打印机体的小写字母来表示随机变量本身,而用脚本字体中的小写字母来表示 ...

【学习日记】Dom基础

【学习日记】Dom基础相关推荐

最新文章

热门文章