關於js的函數
阿新 • • 發佈:2017-05-23
last 非ie isp 指定元素 默認值 判斷 lap 意義 函數
1、獲取內容的兼容函數
/* * 一: 獲取內容的兼容函數 * setText(obj, str) * 思路: * 1、首先判斷瀏覽器; * 2、如果是IE瀏覽器,就用innerText; * 3、如果是非IE瀏覽器,就用textContent; * 參數說明: * 1、如果是一個參數,這個函數將會用來獲取內容 * 2、如果是兩個參數,這個函數將會用來設置內容 * */ function getText(obj, str) { // 判斷是否是IE瀏覽器,如果obj.innerText == ture,則是IE瀏覽器,否則是非IE瀏覽器 if(obj.innerText) {// 判斷是否傳入str,如果傳入,就將傳入的參數賦值給對象;如果沒有傳入,就直接返回對象的內容, if(str) { obj.innerText = str; } else { return obj.innerText; } } else { if(str) { obj.textContent = str; } else { return obj.textContent; } } }
2、獲取樣式的兼容函數;
/************************************************************************************************************* * 二:獲取樣式的兼容函數 * getStyle(obj, attr); * 思路: * 1,首先判斷瀏覽器, * 2,如果是IE瀏覽器,就用obj.currentStyle[attr]; * 3,如果是非IE瀏覽器,就用document.defaultView.getComputedStyle(obj, null)[attr]; * 參數說明: * 參數1:是要獲得樣式的對象; * 參數2:要從對象裏面獲取的樣式,要以字符串的形式傳入; **/ function getStyle(obj, attr) { // 判斷是不是IE瀏覽器,如果obj.currentStyle == true,說明是IE瀏覽器,否則是非IE瀏覽器 if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView.getComputedStyle(obj, null)[attr]; } };
3、獲取指定元素的子元素的集合和有意義的文本,默認情況為獲取元素的節點;
/************************************************************************************************************* * 三:獲取指定元素的子元素的集合和有意義的文本,默認情況為獲取元素的節點; * getChild(obj, type); * 思路: * 獲取obj的所有的子元素 * 挑選:obj.nodeType == 1說明就是元素集合,否則就是文本元素的集合 * 參數說明: * 參數1:指定的元素; * 參數2:指定獲取元素的類型; * true:只獲取元素的節點; * false:獲取元素的節點和有意義的文本節點; * */ function getChild(obj, type) { var type = type == undefined ? true : false, arr = []; var child = obj.childNodes; if(type) { //type==true||undefined的時候執行; for(var i = 0; i < child.length; i++) { if(child[i].nodeType == 1) { arr.push(child[i]); }; }; return arr; } else { for(var i = 0; i < child.length; i++) { //replace.();把空白替換掉:str="a b c"-------str=["a","b","c"] if(child[i].nodeType == 1 || (child[i].nodeType == 3 && child[i].nodeValue.replace(/^\s+|\s+$/g, "") != "")) { arr.push(child[i]); }; }; return arr; }; };
4、獲取第一個子元素
/************************************************************************************************************ * 四:獲取第一個子元素; * */ function getFirstChild(obj) { return getChild(obj)[0]; };
5、獲取最後一個子元素
/*********************************************************************************************************** * 五:獲取最後一個子元素; * */ function getLastChild(obj) { var length = getChild(obj).length; return getChild(obj)[length - 1]; }
6、獲取任意的子元素
/********************************************************************************************************************** * 六:獲取任意的子元素; * */ function getRandomChild(obj, num){ return getChild(obj)[num-1]; }
7、獲得目標對象的下一個兄弟節點,如果有下一個兄弟節點的話,如果沒有,返回false;
/*************************************************************************************************************** * 七:獲得目標對象的下一個兄弟節點,如果有下一個兄弟節點的話 * getNext(obj, type); * 思路: * 1、判斷是否有下一個兄弟節點,如果沒有的話,返回false,如果有的話,繼續往下進行; * 2、判讀next是否是一個有意思的文本節點或者元素節點; * 3、更新next,即給next賦值。繼續往下尋找下一個兄弟節點; * 4、判斷next是否是一個空值,如果為空,返回false,如果不為空,繼續進行第二步; * 參數說明: * 1、obj:指定的對象; * 2、type為true時:忽略文本,也是默認值;type為false時,不能忽略文本; * */ function getNext(obj, type) { var type = type == undefined ? true : type; var next = obj.nextSibling; checkNext(next); if(type) { // 忽略文本 // 當next是一個註釋節點或者文本節點時,繼續往下循環; while(next.nodeType == 3 || next.nodeType == 8) { next = next.nextSibling; checkNext(next); } return next; } else { // 不能忽略文本 // 當next的類型是一個註釋或是文本時,繼續往下循環; while(next.nodeType == 8 || (next.nodeType == 3 && next.nodeValue.replace(/^\s+|\s+$/g, ‘‘) != ‘‘)) { next = next.nextSibling; checkNext(next); } } // 返回false封裝成方法 function checkNext(nextObj) { if(nextObj == null) { return false; } } }View Code
7、給最前面的元素插入一條元素
/***************************************************************************************************************** * 七:給最前面的元素插入一條元素 * beforeChild(obj, ele) * 思路: * 1、獲取第一個子元素firstChild * 2、父元素.insertBefore(要插入的元素,firstChild); * 參數說明: * 1、obj:父元素; * 2、ele:要插入的元素 * */ function beforeChild(obj, ele) { var first = getFirstChild(obj); obj.insertBefore(ele, first); };
8、給某個元素後面插入一條子元素
關於js的函數