<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box" qwe="张展亮" style="background:#000">
asdfsdf
</div>
</body>
<script type="text/javascript">
//获取指定对象的样式属性getStyle （只读）
var getStyle = function( obj , attr ){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};
//用正则写getClass（只读）
var getClass = function(cName,obj){
obj = obj||document;
if (obj.getElementsByClassName)
{
return obj.getElementsByClassName(cName);
}
else
{
var arr = [];
var tagName = obj.getElementsByTagName('*');
var reg = new RegExp("\\b"+cName+"\\b");
for (var i = 0; i < tagName.length; i++) {
if (reg.test(tagName[i].class))
{
arr.push(tagName[i]);
}
}
return arr;
}
}
//node.nodeType 判断节点类型
//childNodes 获取元素的所有子节点 有兼容问题
//children 获取元素所有的孩子元素节点 没有兼容问题
//firstChild 获取元素的第一个节点 有兼容问题
//firstElementChild 获取元素的第一个元素节点 没有兼容问题
//lastChild 获取元素的第一个节点 有兼容问题
//lastElementChild 获取元素的最后一个元素节点 有兼容问题
//nextSibing 获取元素的下一个兄弟节点 有兼容问题
//nextElementSibing 获取元素的下一个元素节点 有兼容问题
//previousSibing 获取元素的上一个节点 有兼容问题
//previousElementSibing 获取元素的上一个元素节点
//parentNode 获取元素的父节点 不存在兼容问题
//offsetParent 获取元素的最近定位父级 不存在兼容问题
//offsetLeft 获取元素离他最近定位父级的left值 不存在兼容问题(只可读)
//offsetTop 获取元素离他最近定位父级的top值 不存在兼容问题(只可读)
//offsetWidth 获取元素的绝对宽度(边框+内边距+宽度) 不同浏览器有1px误差 推荐使用
//offsetHeight 获取元素的绝对高度(边框+内边距+高度) 不同浏览器有1px误差
//clientWidth 获取元素的绝对宽度(内边距+宽度) 没有误差
//clientHeight 获取元素的绝对高度(内边距+高度) 没有误差
//scrollWidth 获取元素的绝对宽度(内边距+宽度) 没有误差,但如果有溢出则不同浏览器会有20px误差 不推荐使用
//scrollHeight 获取元素的绝对高度(内边距+高度) 没有误差,但如果有溢出则不同浏览器会有20px误差 不推荐使用
//getAttribute("属性") 获取元素的任意属性(这个方法比较强硬)
//setAttribute("属性","值") 向元素添加任意属性(这个方法比较强硬)
//removeAttribute("属性") 移除元素中的某个属性
//obj.currentStyle["属性"] 获取元素最终的style 只可读 只支持ie
//getComputedStyle(obj).["属性"] 获取元素最终的style 只可读 支持非ie
/*
var getStyle = function(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputed(obj)[attr];
}
*/
//表单部分单选和多选按钮，选中是true，不选中是false
//document.body.scrollTop 获取当前滚动高度(只兼容谷歌)
//document.documentElement.scrollTop 获取当前滚动高度(只兼容非谷歌)
/*
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
注意:如果要设置滚动高度两个都要设置
*/
//pageX/Y 获取触点距离body左上角的距离 会随着页面滚动而变化 除ie8-不兼容外,其他都兼容
var oBox = document.getElementsByClassName("box")[0];
oBox.removeAttribute("class");
console.log(oBox.getAttribute("qwe"));
console.log(oBox.setAttribute("style","width:500px;height:500px;background:red"));
//下面是Bom(浏览器对象模型)
//Bom给我们提供一些方法操作我们的浏览器
//window.open()打开一个页面(一般浏览器会把他当做垃圾,并拦截他) 参数1:打开的路径 第二个参数:打开的位置(target)
//window.close()关闭当前页面(一般浏览器都会阻止这个功能，也用不到)
/*
window.location用它可以获取当前窗口的地址(他的类型是对象)
他的属性有:
window.location.href:用它可以获取当前窗口的地址(加上这个属性,他的类型就变成了字符串)
window.location.search:在当前域名后面加上一个新的地址(一般用于把网页指向一个后台)
window.location.hash="#miaodian"形同与锚链接
href属性举例用法
window.location.href= "http://www.baidu.com";(跳转到一个新的页面)
*/
/*
window.console.time("test");
要测试的代码(code)
window.console.timeEnd("test");
两者一样接收一个字符串作为参数,字符串相当于计时的id。浏览器会将拥有相同参数(id)的console.time()与console.timeEnd()进行匹配,记录两者之间的时间差。因此,可以通过使用不同的id来对JavaScript程序中不同的地方进行计时
*/
//window.onscroll(当浏览器滚动时触发该事件)
//window.onresize(当浏览器窗口改变大小的时候,会触发这个事件)
//字符串操作
//new String(obj) 把对象的值转换为字符串(效果并不理想,不建议用)
//charAt() 获取指定字符串索引处索引值
//charCodeAt() 获取指定字符串索引处Unicode值
//length 属性,直接返回字符串长度
//toUpperCase() 将字符串全部转换为大写
//toLowerCase() 将字符串全部转换为小写
//fromCharCode(numX,numX,...,numX) 将一系列Unicode值转换为字符串
//indexOf() 返回字符串中特定字符第一次出现的位置
//lastIndexOf() 返回字符串中特定字符最后一次出现的位置
/*
subString() 返回字符串中介于两个指定下标之间的字符(两个参数,都不能为负,且第二个参数要比第一个大)
方法返回的子串包括 start 处的字符，但不包括 stop 处的字符
*/
//slice() 返回字符串的某个部分，并以新的字符串返回被提取的部分。
//match() 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
/*
search() 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
只检索一次,如果是正则就算有g标识也没用(忽略大小写请加i)
*/
//concat() 用于将多个字符串拼加成一个字符串(可以有多个参数，按顺序拼加)
//split() 将某个字符串分隔成多个字符串，可以指定分隔符
//replace() 将字符串中的某个子串以特定字符串替代
//arr.push(att) 向数组后面添加,返回数组长度
//arr.unshifu(att) 向数组前面添加,返回数组长度
//arr.pop() 删除数组最后一个,返回删除的哪个
//arr.shift() 删除数组第一个,返回删除的哪个
/*
arr.splice() 第一个参数为要添加/删除的起始位置
第二个参数为要删除的数量(0个代表不删除)
第三个参数为要添加的新内容
(0,1)从第0位开始删除1个，返回删除的哪个
(0,1,"a")把第0位开始的第一位替换为"a"
(0,0,"a")在第0位后面添加"a"
*/
/*arr.sort() 按照字符编码来排序
可传函数参数
倒序可以用reverse
*/
//arr.jion() 以参数为间隔符把数组转换为字符串,返回字符串
/*
setInterval 定时器
clearInterval 清楚定时器
setTimeout 延时定时器
clearTimeout 清除延时定时器
*/
</script>
</html> js常用属性及方法总结(温习下旧知识)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章