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'){
//你的代码
}
};