待整理
offsetWidth, clientWidth, scrollWidth的区别
offsetWidth width+padding+border
clientWidth width+padding
scrollWidth 大小是内容的大小
scrollTo(x,y) 去往页面的x和y坐标的位置
window.scrollTo(x,y)
window.onscroll = fucntion() { fun (); } 窗口滚动事件
window.onresize 改变窗口事件 事件会在窗口或框架被调整大小时触发
获取鼠标的位置
clientX clientY
检测屏幕分辨率宽度
window.screen.width 返回的是硬件分辨率宽度
检测浏览器窗口宽度：
window.innerWidth IE9及以上版本
document.documentElement.clientWidth 标准模式
document.body.clientWidth 怪异模式
封装可视区域大小的函数:
1 function client() { 2 if(window.innerWidth != null) // ie9 + 最新浏览器 3 { 4 return { 5 width: window.innerWidth, 6 height: window.innerHeight 7 } 8 } 9 else if(document.compatMode == "CSS1Compat") // 标准浏览器 10 { 11 return { 12 width: document.documentElement.clientWidth, 13 height: document.documentElement.clientHeight 14 } 15 } 16 return { // 怪异浏览器 17 width: document.body.clientWidth, 18 height: document.body.clientHeight 19 20 } 21 }
scrollTop 被卷去的头部
scrollLeft 封装自己的函数
window.pageXOffset
window.pageYOffset
封装屏幕滚动距离的函数:
1 function scroll() { 2 if(window.pageYOffset != null) // ie9+ 和其他浏览器 3 { 4 return { 5 left: window.pageXOffset, 6 top: window.pageYOffset 7 } 8 } 9 else if(document.compatMode == "CSS1Compat") // 声明的了 DTD 10 // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html> 11 { 12 return { 13 left: document.documentElement.scrollLeft, 14 top: document.documentElement.scrollTop 15 } 16 } 17 return { // 剩下的肯定是怪异模式的 18 left: document.body.scrollLeft, 19 top: document.body.scrollTop 20 } 21 }
阻止冒泡
event.stopPropagation(); 标准浏览器 w3c标准
event.cancelBubble = true IE678
兼容写法:
var event = event || window.event; if(event && event.stopPropagation) { event.stopPropagation(); // w3标准 } else { event.cancelBubble = true; // IE78 }
显示/隐藏滚动条
document.body.style.overFlow = "visible"
document.body.style.overFlow = "hidden"
判断当前对象
event.target.id
event.srcElement.id IE678
兼容写法：
var targetId = event.target ? event.target.id : event.srcElement.id;
获得用户选择的内容
window.getSelection() 标准浏览器
document.selection.createRange().text IE678
var tet; if(window.getSelection) { txt = window.getSelection().toString(); } else { txt = document.selection.createRange().text; // IE的写法 }
常用的数学函数
Math.ceil() 天花板函数，向上取整 1.05取2，-1.3取-1
Math.floor() 地板函数，向下取整 1.05取1，-1.3取-2
Math.round() 四舍五入函数 Math.abs() 绝对值函数 |-5|取5
Math.random() 随机一个0-1的小数
Math.max(x, y) 返回x和y的最高值
Math.min(x, y) 返回x和y的最低值
Math.pow(x, y) 返回x的y次幂
in 运算符
in运算符也是一个二元运算符，但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false
in可以用来判断json里面有没有某个属性
例：json = { name: jack, age: 30, name2: jone, name2: 26};
if ( "name" in json ){
console.log("yes");
}
else {
console.log("no");
}
数组常用方法
push() 向数组的末尾添加一个或多个元素，并返回新长度
unshift() 向数组的开头添加一个或多个元素，并返回新长度
pop() 移除数组的最后一个元素，返回最后一个值(被移除的那个值)，这个方法没有参数
shift() 移除数组的第一个元素，返回第一个值(被移除的那个值)，这个方法没有参数
concat() 连接两个数组，不影响原数组a = [1,2,3] b = [4,5,6] a.cconcat(b) == [1,2,3,4,5,6]
join() 返回一个数组转化的字符串，原数组不会改变 数组名. join(符号)
split() 返回一个由字符串转化的数组，字符串中的分隔符号需要与方法中的符号一致
JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。
var json = {width:300, height:500, left:100};
JSON 遍历
for in 关键字
for ( 变量 in 对象 ){
执行语句;
}
例子：
for ( attr in json ){
console.log(attr); //attr得到的是属性
console.log(json[attr]); //json[attr]得到的是属性的值
}
把最后一个json删除,并把最后一个添加到json第一个位置
json.unshift(json.pop());
JS访问CSS属性的方法及对比
我们访问得到css 属性，比较常用的有两种：
1. 利用点语法
语法：元素.style.属性
例子：box.style.width box.style.top ......
状态：可读可写 读：行内式 写：行内式 类型：string 适用浏览器：所有
语法：元素.currentStyle.属性
例子：box.currentStyle.width box.currentStyle.backgroundColor ......
这一特定于 IE 的属性应用于元素的所有 CSS 属性的级联组。它是 Window.getComputedStyle() 的仅用于 IE 的替代。
状态：可读可写 读：行内式，内嵌式，外联式 类型：String 适用浏览器：IE，opera
2. 利用 [] 访问属性
语法：元素.style[“属性”]
例子：box.style[“width”]
最大的优点：可以给属性传递参数
状态：可读可写 读：行内式 写：行内式 类型：String 适用浏览器：所有
语法：Window.getComputedStyle("元素", "伪类")[“属性”] w3c标准
两个选项是必须的，没有伪类用 null 替代
例子：window.getComputedStyle(box, null)["width"]
Window.getComputedStyle() 的返回值是一个 CSS2Properties 对象，其属性是只读的。
状态：只读 读：行内式，内嵌式，外联式 类型：String 适用浏览器：IE不支持
封装返回style属性的函数(兼容写法)：
1 var demo = document.getElementById("demo"); 2 function getStyle(obj,attr) { 3 if(obj.currentStyle){ // ie 4 return obj.currentStyle[attr]; 5 } 6 else { 7 return window.getComputedStyle(obj,null)[attr]; // w3c浏览器 8 } 9 } 10 console.log(getStyle(demo,"width"));
