javascript 组成部分
1.ECMAScript
javascript的核心解释器
2.DOM
Document Object Modle 文档对象模型
DOM操作
获取元素
改变样式
改变内容
3.BOM
浏览器对象模型
浏览器操作
window.navigator.userAgent
window.open()
window.close()
DOM操作
获取元素
document.getElementById()
通过id获取一个元素
document.getElementsByTagName()
通过标签名获取一组元素
document.getElementsByClassName()
通过class获取一组元素
document.querySelector()
获取第0个
document.querySelectorAll()
获取一组
节点===标签===元素
DOM树 页面结构关系
获取子节点
oEle.children
只能获取一层
获取父节点
oEle.parentNode
获取结构父级
oEle.offsetParent
获取定位父级
获取兄弟节点
获取上一个兄弟节点
oEle.previousElementSibling
获取下一个兄弟节点
oEle.nextElementSibling
注意：不兼容低版本IE浏览器
获取首尾子节点
首子节点
aEle[0]
oPrent.firstElementChild
尾子节点
aEle[aEle.length-1]
oPrent.lastElementChild
获取标签名
oEle.tagName
获取元素信息
盒子模型
width/height+padding+border
盒子模型的宽高
盒子模型的宽
oEle.offsetWidth
盒子模型的高
oEle.offsetHeight
获取非行间样式
function getStyle(obj,sName){
return
(obj.currentStyle||getComputedStyle(obj,false))[sName];
}
获取元素的定位
oEle.offsetLeft
oEle.offsetTop
获取定位父级
oEle.offsetParent
创建
document.createElement('标签名');
插入
后面添加
父级.appendChild(要添加的子级)
某一个子级前面插入
父级.insertBefore(要插入的元素,插入谁之前);
删除
父级.removeChild(要删的元素);
事件
事件对象 触发事件时的详细信息
需求:
点击页面，弹出鼠标在页面中的位置
获取鼠标在可视区中的位置
ev.clientX 鼠标X轴可视区中的位置
ev.clientY 鼠标Y轴可视区中的位置
获取鼠标在页面中的位置
ev.pageX 鼠标X轴页面中的位置
ev.pageY 鼠标Y轴页面中的位置
需求:
页面中有一个div，当鼠标移动的时候，div跟着鼠标动。
新的事件
onmousemove 当鼠标移动的时候触发
拖拽 drag
事件
onmousedown 鼠标按下
获取鼠标在div中的位置
var disX = ev.pageX-oDiv.offsetLeft
var disY = ev.pageY-oDiv.offsetTop
onmousemove 鼠标移动
改变div的left和top
oDiv.style.left = ev.pageX-disX+'px';
oDiv.style.top = ev.pageY-disY+'px';
onmouseup 鼠标抬起
把onmousemove干掉
把onmouseup干掉
问题一：
鼠标没点就懂了
解决：
把onmousemove放在onmousedown里面
问题二:
鼠标移动过快，就移出div了
解决:
1.把div放大 不靠谱，设计和产品会找你拼命
以下方法靠谱
把onmousemove事件加给document
问题三:
鼠标抬起依然能动
解决:
正在onmouseup中把onmousemove干掉
问题四:
鼠标拖拽的时候，会选中页面内容
解决:
在onmousedown中把默认事件阻止
return false; 注意一定要放在最后
扩展:
限制范围拖拽
得到l和t
var l = ev.pageX-disX;
var t = ev.pageY-disY;
限制l和t的范围
if(l<0){
l = 0;
}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l = document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0){
t = 0;
}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
l = document.documentElement.clientHeight-oDiv.offsetHeight;
}
浏览器默认行为,浏览器默认事件
return false;
鼠标右键
oncontextmenu
document.documentElement html
document.body body
获取可视区宽高
可视区宽度
document.documentElement.clientWidth
可视区高度
document.documentElement.clientHeight
事件冒泡
取消冒泡
ev.cancelBubble = true;
平时没事的情况下不要取消。如果出现问题了才取消
事件绑定(事件监听)
给同一个元素加同一个事件可以加多次。
解决事件冲突
不兼容低版本浏览器
oEle.addEventListener('click', function(){
}, false);
低版本浏览器
oEle.attachEvent('onclick',function(){});
切记:
addEventListener中 return false失效了
ev.preventDefault();
不兼容低版本浏览器
事件解绑
oEle.removeEventListener('click',function(){},false);
切记：不能使用匿名函数
事件流 事件在程序中的走向
DOM事件流 高级浏览器的事件流
事件冒泡 事件捕获
(冒泡阶段) (捕获阶段)
addEventListener第三个参数决定是什么?
false 冒泡
true 捕获
捕获阶段只有addEventListener第三个参数是true才触发
IE事件流 低版本IE的事件流
事件冒泡
(冒泡阶段)
事件流有几种？
DOM事件流
IE事件流
事件流的区别？
DOM事件流有冒泡阶段和捕获阶段
IE事件流有冒泡阶段
if的简写
if(条件){
语句
}
简写
条件&&语句;
true&&alert(1);
false&&alert(1);
&&并且，两边的条件都是真的才算是真的
true&&alert(1);
true||alert(1); 不能弹
false||alert(1); 能弹
(obj.currentStyle||getComputedStyle(obj,false))[sName]
onmouseover和onmouseout的bug
onmouseover 移入
onmouseout 移出
换事件
onmouseenter 移入
onmouseleave 移出
事件委托(事件委派、事件派生)
1.动态创建的元素加事件 解决
2.循环加事件太麻烦 解决
核心：
1. 给父级加事件
2. 获取事件源
var oSrc = ev.srcElement||ev.target;
window.onload
当所有资源都加载完成之后触发
DOMReady 推荐
当html，css，js加载完毕执行
给document添加事件
DOMContentLoaded事件 不兼容低版本浏览器
DOM事件
特点以DOM开头
必须用事件绑定
事件
DOM2事件
onclick
onmouseover
DOM3事件 必须用事件绑定
DOMContentLoaded
DOMReady另一种玩法
document.onreadystatechange = function(){
document.readyState
interactive 准备
complete 完成
需要判断readyState是否是complete
if(document.readyState=='complete'){
//执行我们的代码
}
};
总结:
javascript的组成部分：
ECMAScript 核心解释器
DOM 文档对象模型
BOM 浏览器对象模型
DOM操作
DOM树
document
html
head
title
made
style
link
script
body
div
p
a
a
ul
div
div
section
获取子节点
父级.children 获取第一层子节点 √
父级.childNodes 不推荐用 ×
获取父节点
获取结构父级
子级.parentNode
获取定位父级
子级.offsetParent
获取兄弟节点
上一个
obj.previousElementSibling
下一个
obj.nextElementSibling
获取首尾子节点
首
父级.firstElementChild
父级.children[0];
尾
父级.lastElementChild
父级.children[父级.children.length-1]
获取信息
盒子模型的宽高
obj.offsetWidth 盒子模型宽度
obj.offsetHeight 盒子模型高度
获取相对位置
obj.offsetLeft
obj.offsetTop
获取可视区宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
--------------------------------------------------------------
事件
事件对象
包含了事件的详细信息
切记：只能获取鼠标和键盘的
获取鼠标在可视区中的位置
ev.clientX/clientY
获取鼠标在页面中的位置
ev.pageX/ev.pageY
事件绑定(事件监听)
防止事件冲突
obj.addEventListener('sEv',fn,false);
事件解绑
obj.removeEventListener('sEv',fn,false);
阻止默认事件
return false;
但是遇到addEventListener不好使.
用: ev.preventDefault&&ev.preventDefault();
事件流:
DOM事件流
冒泡阶段 捕获阶段
IE事件流
冒泡阶段
onmosueover和onmouseout的bug
解决：
onmouseenter
onmouseleave
事件委托(事件派生，事件委派)
给动态元素加事件
1.给父级加事件
2.获取事件源
var oSrc = ev.srcElement||ev.target;
DOMReady
比window.onload快
第一种 推荐
document.addEventListener('DOMContentLoaded',function(){
//你的代码
},false);
第二种
document.onreadystatechange = function(){
if(document.readyState=='complete'){
//你的代码
}
};
