】常见事件：

//onclick     点击时触发事件。

//ondblclick    双击时触发事件。

//onkeydown   按键按下

//onkeypress   点击按键

//onkeyuo     按键释放

//onmousedown鼠标按下

//onmousemove鼠标移动

//onmouseup   鼠标按键释放

//onmouseout  鼠标离开元素范围

//onmouseover 鼠标移动到元素范围

//onmousedown 点击页面时触发调用函数或执行代码。

//onload       网页或元素加载完毕时触发。

//onunload     网页关闭（或者离开刷新）后触发。

//onbeforeunload 在网页准备关闭后触发（关闭之前）。

】事件

点击超链接执行js代码:

<a href=”javascript：alett(‘代码’)”>点击</a>

//调用js执行引擎处理

<a href=”1.htm”onelick=”alett(‘代码’)”>点击</a>

//onclick 事件会在对象被点击时发生。

Function 方法名（）{代码；}

<body Onmousedown=“方法名（）”></body>

//onmousedown 点击页面时触发调用函数或执行代码。

】动态添加事件

Function 方法名1（）{代码；}

Function 方法名2（）{代码；}

<input type=”button” onclick=”document.ondblclick=函数名1”value=“关联事件1”/>

//注意不要为f1加括号。 document.文档的，ondblclick双击时，=函数名1处理函数为1。

<input type=”button” onclick=”document.ondblclick=函数名2”value=“关联事件2”/>

】window对象的方法

Window对象代表当前浏览器窗口，使用该对象的属性、方法的时候可以省略window。

例：window.alert（‘a’）可省略为alert（‘a’）

1）alert方法，弹出消息对话框。

2）Conflrm方法，显示“确定”“取消”对话框，如按“确定”返回true，否则false。

3）重新导航到指定的地址：navigate（“http://www.aaa.com”）

4）Setlnterval每隔一段时间执行指定的代码。

第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。

例：Setlnterval（“alert（‘hello’）”,5000）

5）clearlnterval取消setlnterval的定时执行，相当于time中的enabled=false。

因为setlnter可以设定多个定时，所以clearlnterval要指定清除那个定时器的标志，

即setlnterval的返回值。

Var intervalld = setlnterval(“alert(“hello”)”,5000);  //j接收返回值 标识

Clearlnterval(ntervalld );

6）setTimeout 定时执行，只执行一次。

clearTimeout清除定时。

例：setTimeout(“alert(“hello”)”,2000);

】body、document对象的事件

//onload       网页或元素加载完毕时触发。

//onunload     网页关闭（或者离开刷新）后触发。

//onbeforeunload 在网页准备关闭后触发（关闭之前）。

】window对象的属性

1）重新导向新的地址：window.location.href=’httf://www.dizhi.com’

刷新当前页面：window.location.reload（）

取当前页面的地址：location.href

2)window.event 非常重要，用来获得发生事件时的信息，事件不局限于window对象的事件。

类似于winform中的e（eventary）

altKey属性，bool类型，alt键是否被按下；

ctrKey（ctrl键是否按下）；

shiftKey（shift键是否按下）；

clientX、clientY发生事件时鼠标在客户区的坐标；

screenX、screenY发生事件时鼠标在屏幕上的坐标；

offsetX、offsetY发生事件时鼠标相对于事件源的坐标；

retumValue属性，如将retumValue设置为false，就会取消默认事件的处理。

在超链接onclick中禁止访问href的页面。在表单效验的时候禁止提交到服务器。

srcElement，获得事件源对象。

keyCode，发生事件时的按键值。

Button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。

3）screen对象，屏幕的信息（了解内容）

Screen.width、screen.height分辨率长宽。

4）clipboardData对象，对粘贴板的操作。

clearData（“Text”）清空粘贴板； 在浏览器中只能为text。

getData（“Text”）读取粘贴板的值，返回值为粘贴板中的内容。

setData（“Text，val”）设置粘贴板中的值。

很多元素也有Oncopy、onpaste事件：

禁止复制内容：oncopy=“alert（‘禁止复制！’）；return：false；”

禁止粘贴内容：onpaste=“alert（‘请勿粘贴！’）；return：false；”

自动在复制的内容后添加版权声明：

Function modifyClipboard(){

clipboardData.setData(‘text’,clipboardData.getData(‘text’)+’版权声明’+location.href);

}

Oncopy=”setTimeout(‘modifyClipboard()’,100)”

//用户复制动作后，过0.1秒以后再去改粘贴板中的内容。

5）history操作历史记录:

Window.history.back()后退；

Window.history.forward()前进。

也可以用window.history.go(-1)后退、window.history.go(1)前进。

【】Document属性。 它是window对象的一个属性，代表当前页面的html文档。

Document方法：

（1）write：向文档中写入内容。    经常在广告代码、整合资源代码中被使用。

Writeln：同上，最后添加一个回车。

在onclick等事件中写的代码会冲掉页面中的内容，

只有在页面加载过程中write才会与原有内容融合在一起。

嵌入广告（广告联盟）、嵌入能容（百度新闻）等 cnzz数据统计。

（2）getElementByld方法（非常常用），根据元素的id获得对象，网页中id不能重复。

也可以直接通过元素的id来引用元素，但有有效范围之类的问题，

因此不建议直接通过id操作元素，而是通过getElementByld

Var 名 = documengt.getElementById(“id名”);   //查找文件

Alert（名.value）

（3）getElementByName：根据元素的name获得对象，由于页面中元素的name可以重复，

比如多个RadioButton的name一样，因此其返回值为对象数组。

遍历并不像c#中的foreache，并不会遍历每个数组，而是遍历的key。

故遍历需用普通for循环做。

（4）getElementByTagName：获得指定标签名称的元素数组

比如getElementByTagName（“p”）可以获得所有的<p>标签。

DOM操作系列-01的更多相关文章

  1. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  2. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  3. jQuery-1.9.1源码分析系列（十一） DOM操作

    DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...

  4. jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点

    什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...

  5. DOM系列---DOM操作表格

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是H ...

  6. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  7. js运算符、 流程控制 、函数、内置对象、BOM与DOM操作

    运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...

  8. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  9. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

随机推荐

  1. 网页里如何使用js禁用F12事件

    接上一篇,突然想起来,类似于网页里如何使用js禁用鼠标右击事件,还有禁用F12事件也可以禁用一下,总所周知,对于Web开发人员来说,常常要进行界面的调试.使用F12调试工具能够很方便地进行调试,查看h ...

  2. C++容器（三）：pair类型

    pair类型 在开始介绍关联容器之前,我们有必要了解一种与之相关的标准库类型–pair类型. 操作 含义 pair<T1, T2> p1 创建一个空的pair对象,它的两个元素分别为T1和 ...

  3. 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...

  4. C++根据扩展名获取文件图标、类型

    简述 在Windows系统中,根据扩展名来区分文件类型,比如:.txt(文本文件)..exe(可执行程序).*.zip(压缩文件),下面,我们来根据扩展名来获取对应的文件图标.类型. 简述 源码 源码 ...

  5. [MST] Attach Behavior to mobx-state-tree Models Using Actions

    Models are not just a nifty feature for type checking. They enable you to attach behavior to your ac ...

  6. 2015百度之星初赛2 1005 序列变换（LIS变形）

    LIS(非严格):首先我想到了LIS.然而总认为有点不正确:每一个数先减去它的下标.防止以下的情况发生:(转载) 3 增加序列是1,2,2,2,3,这样求上升子序列是3.也就是要改动2个,可是中间的两 ...

  7. Hibernate是怎么工作的——Hibernate的工作流程

    举个简单的样例说明: 1.Base.java package cn.flymouse.hibernate; import java.util.Date; import org.hibernate.Qu ...

  8. spark 卡在spark context，运行出现spark Exception encountered while connecting to the server : javax.security.sasl.SaslException

    原因: 使用root用户运行spark代码 解决方法:使用非管理员账户运行spark即可 [userone@localhost bin]$ ./add-user.sh What type of use ...

  9. nyoj--311--完全背包（动态规划，完全背包）

    完全背包 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 直接说题意,完全背包定义有N种物品和一个容量为V的背包,每种物品都有无限件可用.第i种物品的体积是c,价值是w. ...

  10. 鼠标滑过，解决ul下 li下a的背景与父级Li不同宽的问题

    我们在写导航或者页面有超链接的地方,有一些是需要超链接的背景和Li的宽度一样的.但是,却没有达到这种效果?为什么? 我们做的效果图:如下 期望的效果:如下 出现这样的原因:由于a是个行内元素,它没有宽 ...