js回顾2
1:事件流:一个事件发生时按一个方向传播 eg:a标签->html
冒泡:从里到外(一般的选择)-----IE只有冒泡
捕获:从外到里-----网景只有捕获(已经不存在了)
2、事件处理的两种种方式:
(1)DOM0(传统事件):
优点:兼容所有浏览器
缺点:不能够添加多个方法,后面的方法会覆盖前面的方法
(2)DOM2:
优点:可以添加多个方法
缺点:不能兼容所有浏览器:
现代浏览器: p.addEventListener("click",function(){ }),true);//第三个true可以不写
IE浏览器: p.attchEvent("onclick",function(){ })
3、clientX和clientY鼠标的位置
4、阻止冒泡:e.stopPropagation()----现代浏览器
e.cancelBubble=true;----IE浏览器
5、阻止默认事件的发生:
e.preventDefault();---- 现代浏览器
e.returnValue=false;-----IE浏览器
6、DOM实现增、删、改、查(是w3c制定的规范,从DOM1开始):文档对象模型
获取节点:var body=documet.body;
var d1=document.getElementById("d1");
var ps=document.getElementsTagName("p");
7、访问属性:var attr=ps.attributes;
attr["id"].nodeType;//属性节点
ps.id;//访问属性
ps.getAttribute("id");//访问属性
ps[0].firstChild.nodeType;//文本节点
body.nodeType.//元素节点 nodeType为数字
d1.firstChild.nextSibling.previousSibling;
8.增加节点:方法一:
a、获取父节点id: var div=document.getElementById("div");
b、创建节点:var p1=createElement("p");
c、创建文本:var text=createTextNode("段落");
d、节点加进去:p1.appendChild(text);
1)div.appenChild(p1);//后面增加
2)var d1=document.getElementById("d1");
div.insertBefore(p,div)//前面增加
方法二; var div=document.getElementById("div");
div.innerHTML+="<p>啦啦啦啦</p>"
<table id=table></table>//ie不支持添加表格
var table=document.getElementById("table");
table.
9.删除节点:removeChild()
10.替换节点:replaceChild()
11.表单的提交:
<form id="regForm"></form>
var fm = document.getElementById("regForm");
方法一:fm.submit();
方法二:regForm.onsubmit = function(e){
// e = window.event || e;
// alert("表单提交");
// if(e.preventDefault){
// e.preventDefault();
// }else{
// e.returnValue = false;
// }
js回顾2的更多相关文章
- js回顾
回顾 js 组成部分 ECMAScript BOM DOM 变量声明~~ var 变量名 = 初始化值: ...
- 前端学习(十四)js回顾和定时器(笔记)
回顾知识点: 作用域: 1.全局变量:在任何位置都可以使用的变量 2.局部变量:只能在函数内部使用的变量 3.闭包:子函数可以使用父函数的局部变量 -- ...
- js回顾(DOM中标签的CRUD,表格等)
01-DOM中的创建和添加标签 02-删除替换克隆标签 03-全选全不选反选 04-新闻字体 05-表格增删 06-动态生成表格 07-表格隔行变色 08-左到右右到左(将左边的标签移动到右边) 09 ...
- js 回顾知识总结一
1.js数据类型? 基本数据类型:String(字符串).boolean(布尔值).Number(数字).undefined(未定义).null(空) 引用数据类型:Object(对象).Array( ...
- js回顾1
1.正则:/^[0-9a-zZ-Z_]*&/ //匹配0到多个,+是1到多个,?0或多个,.任意值/^[0-9a-zZ-Z_]{6,}&/ //精确到至少6位\w查找单词字符检测:te ...
- js+dom开发第十六天
一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) text-align(针对字符自动左右居中) margin(外边距) ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- Css、javascript、dom(二)
一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...
- 一文入门HTML5
1.HTML5 上节回顾:一文读懂ES6(附PY3对比) | 一文入门NodeJS 演示demo:https://github.com/lotapp/BaseCode/tree/master/java ...
随机推荐
- CentOS6.5安装Nginx
1.安装prce(重定向支持)和openssl(https支持,如果不需要https可以不安装.) yum -y install pcre* yum -y install openssl* 2.下载n ...
- c++第一天
今天完成的事情: [主线] 1.熟悉cpp文件的编译运行 2.初步认识输入输出 值得关注的地方是: 流的概念.endl除了结束当前行外,还有刷新缓冲区的功能.以及对 输入输出运算符(<< ...
- Java集合框架
集合框架体系如图所示 Java 集合框架提供了一套性能优良,使用方便的接口和类,java集合框架位于java.util包中, 所以当使用集合框架的时候需要进行导包. Map接口的常用方法 Map接口提 ...
- IT关键词,发现与更新,点成线,线成面,面成体
时序图 1.什么是时序图 2.如何看懂时序图 3.时序图的作用 4.如何绘制时序图 分布式 一个业务分拆多个子业务,部署在不同的服务器上. 分布式是指将不同的业务分布在不同的地方. 而集群指的是将几台 ...
- 转:OSGI 实战 Equinox
http://download.csdn.net/detail/ifmliuzhen/3231590
- 【java基础】 合并两个类型相同的list
将两个类型相同的list合并,可以用 addAll(Collection<? extends E> c) import java.util.ArrayList; import java.u ...
- Solr Cloud - SolrCloud
关于 Solr Cloud Zookeeper 入门,介绍 原理 原封不动转自 http://wiki.apache.org/solr/SolrCloud/ ,文章的内存有些过时,但是了解原理. Th ...
- linux centos yum安装LAMP环境
centos 6.5 1.yum安装和源代码编译在使用的时候没啥区别,但是安装的过程就大相径庭了,yum只需要3个命令就可以完成,源代码需要13个包,还得加压编译,步骤很麻烦,而且当做有时候会出错,源 ...
- checkbox点击后出现div
HTML: <div class="msg_editUrl_function"> <label class="labelChecked" fo ...
- Process Explorer使用图文教程
这是一款由Sysinternals开发的Windows系统和应用程序监视工具,目前Sysinternals已经被微软收购,此款不仅结合了文件监视和注册表监视两个工具的功能,还增加了多项重要的增强功能, ...