DOM操作系列-01
】常见事件:
//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的更多相关文章
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- jQuery-1.9.1源码分析系列(十一) DOM操作
DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...
- jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...
- DOM系列---DOM操作表格
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一.操作表格 <table>标签是H ...
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- js运算符、 流程控制 、函数、内置对象、BOM与DOM操作
运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
随机推荐
- 题解 洛谷 P4047 【[JSOI2010]部落划分】
我觉得几乎就是一道最小生成树模板啊... 题解里许多大佬都说选第n-k+1条边,可我觉得要这么讲比较容易理解 (虚边为能选的边,实边为最小生成树) 令n=5,k=2,(1,3)<(1,2)< ...
- 收集整理的openstack java封装 api的第三方实现的选择
Apache jclouds 地址:http://jclouds.apache.org/guides/openstack/ 一个开源库,java实现,支持cloudstack,openstack以及各 ...
- Win7+VS2010:mysql 源代码编译与调试
win7+vs2010源代码编译mysql 近期因为在实习,工作重点在于一些数据库的开发,为了更好的理解数据库的实现机制.眼下萌生了要研究一下mysql数据库源代码的想法.那么好吧,说干就干.首先我们 ...
- 《Spring技术内幕》笔记-Spring的设计理念和总体架构
1.Spring的主要子项目: -1.Spring Framework(Core):Spring项目的核心.提供IoC,AOP,MVC等核心功能. -2.Spring Web Flow ...
- hdu5371Hotaru's problem manacher算法
//给一个序列.让求其最大子序列 //这个序列由三段组成.第一段和第二段对称,第一段和第三段一样 //manacher算法求得p[i] //枚举第二段的起点和长度,得到结果 #include<c ...
- gcc 源代码下载地址
ftp://mirrors-usa.go-parts.com/gcc/releases/
- Fragment使用的正确姿势
网上关于Fragment的使用建议和分析非常多,可是依旧会有非常多人在使用Fragment的时候出现各种奇葩错误 这篇文章我分享一下各种项目中解决Fragment的各种注意事项(不做原理分析), ...
- 7. 关于IntelliJ IDEA删除项目
转自:https://www.cnblogs.com/zhangqian27/p/7698148.html 刚开始使用IDEA . 自己创建项目玩,结果发现IDEA无法删除,我也是醉了,Eclipse ...
- 数据结构之fhq-treap
本文内容部分转自某大佬博客:https://blog.csdn.net/CABI_ZGX/article/details/79963427 例题:https://www.luogu.org/probl ...
- es6 --- class 类的继承使用
传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...