<!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常用屬性及方法總結(溫習下舊知識)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章