幾個簡單的函數
function $(){ return document.getElementById(arguments[0])};
/**
* 獲得上一個元素
* @param {Object} elem
*/
function prev(elem){
do{
elem = elem.previousSibling;
} while(elem && elem.nodeType != 1);
return elem;
}
/**
* 獲得下一個元素
* @param {Object} elem
*/
function next(elem){
do{
elem = elem.nextSibling;
} while(elem && elem.nodeType != 1);
return elem;
}
/**
* 獲得第一個元素
* @param {Object} elem
*/
function first(elem){
elem = elem.firstChild;
return elem && elem.nodeType != 1 ? next(elem) : elem;
}
/**
* 獲得最後一個元素
* @param {Object} elem
*/
function last(elem){
elem = elem.lastChild;
return elem && elem.nodeType != 1 ? prev(elem) : elem;
}
/**
* 獲得父元素
* @param {Object} elem
* @param {Number} num 須要尋找的父級級別
*/
function parent(elem, num){
num = num || 1;
for(var i=0; i<num; i++){
if(elem != null) elem = elem.parentNode; //原書中這塊有錯
}
return elem;
}
/**
* 獲得相關name元素
* @param {String} name
* @param {Object} elem
*/
function tag(name, elem){
return (elem || document).getElementsByTagName(name)
}
/**
* 根據tag尋找
* @param {String} name
* @param {String} type
*/
function hasClass(name, type){
var r = [];
var re = new RegExp('(^|\\s)'+name+'(\\s|$)');
var e = document.getElementsByTagName(type || '*');
for(var i=0; i<e.length; i++){
if(re.test(e[i].className)){
r.push(e[i]);
}
}
return r;
}
/**
* 獲取元素文本
* @param {Object} e
*/
function text(e){
var t = '';
e = e.childNodes || e;
for(var i=0; i<e.length; i++){
//若是不是元素，則追加其文本值
t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
}
return t;
}
/**
*
* @param {String} elem
* @param {String} name
* @param {String} value
*/
function attr(elem, name, value){
if(!name || name.constructor != String){
return '';
}
//檢查name的屬性是否在怪異命名情形中
name = {'for': 'htmlFor', 'class': 'className'}[name] || name;
if(typeof value != 'undefined'){
elem[name] = value;
if(elem.setAttribute){
elem.setAttribute(name, value);
}
}
return elem[name] || elem.getAttribute(name) || '';
}
/**
* 在另外一個元素以前插件元素
* @param {Object} parent
* @param {Object} before
* @param {String} elem
*/
function before(parent, before, elem){
if(elem == null){
elem = before;
before = parent;
parent = before.parentNode;
}
//獲取元素的新數組
var elems = checkElem(elem);
//向後遍歷
for(var i=elems.length; i>=0; i--){
parent.insertBefore(elems[i], before);
}
}
/**
* 建立元素
* @param {Object} elem
*/
function create(elem){
//測試是否用命名空間來建立新的元素
return document.createElementNS ? document.createElementNS('http://www.w3.org/1999/xhtml', elem) : document.createElement(elem);
}
/**
* before 輔助函數
* @param {Object} elem
*/
function checkElem(a){
var r = [];
if(a.constructor != Array){ a = [a]};
for(var i=0; i<a.length; i++){
//若是是字符串
if(a[i].constructor == String){
//用一個臨時元素來存放HTML
var div = document.createElement('div');
div.innerHTML = a[i];
//提取DOM結構到臨時的div中
for(var j=0; j<div.childNodes.length; j++){
r[r.length] = div.childNodes[j];
}
} else if(a[i].length){ //若是它是數組
//假定DOM節點數組
for(var j=0; j<a[i].length; j++){
r[r.length] = a[i][j];
}
} else { //不然假定是DOM節點
r[r.length] = a[i];
}
}
return r;
}
/**
* 添加元素 (若是隻有一個參數(無elem)，則直接添加到document.body上)
* @param {Object} elem
* @param {Object} parent
*/
function append(parent, elem){
if(elem == null){
elem = parent;
parent = null;
}
//獲取元素數組
var elems = checkElem(elem);
for(var i=0; i< elems.length; i++){
(parent || document.body).appendChild(elems[i]);
}
}
/**
* 刪除獨立的DOM
* @param {Object} elem
*/
function remove(elem){
if(elem){ elem.parentNode.removeChild(elem) };
}
/**
* 刪除一個節點的全部子節點
* @param {Object} elem
*/
function empty(elem){
while(elem.firstChild){
remove(elem.firstChild);
}
}
/**
* 阻止事件冒泡
* @param {Object} e
*/
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
function stopDefault(e){
if(e && e.preventDefault){
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
}
/**
* 獲得外鏈樣式
* @param {Object} elem
* @param {String} name
*/
function getStyle(elem, name){
if(elem.style[name]){
return elem.style[name];
} else if(elem.currentStyle){ //若是ie
return elem.currentStyle[name];
} else if(document.defaultView && document.defaultView.getComputedStyle){ //若是是否是w3c方法
name = name.replace(/([A-Z])/g, '-$1');
name = name.toLowerCase();
//獲取樣式
var s = document.defaultView.getComputedStyle(elem, '');
return s && s.getPropertyValue(name);
} else {
return null;
}
}
/**
* 獲取元素的x位置
* @param {String} elem
*/
function pageX(elem){
return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
/**
* 獲取元素的Y位置
* @param {String} elem
*/
function pageY(elem){
return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}
/**
* 獲取元素相對於父級的x位置
* @param {String} elem
*/
function parentX(elem){
return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
}
/**
* 獲取元素相對於父級的Y位置
* @param {String} elem
*/
function parentY(elem){
return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
}
/**
* 查找元素的左端位置
* @param {Object} elem
*/
function posX(elem){
return parseInt(getStyle(elem, 'left'));
}
/**
* 查找元素的頂端位置
* @param {Object} elem
*/
function posY(elem){
return parseInt(getStyle(elem, 'top'));
}
/**
* 設置元素水平位置
* @param {Object} elem
* @param {Object} pos
*/
function setX(elem, pos){
elem.style.left = pos + 'px';
}
/**
* 設置垂直水平位置
* @param {Object} elem
* @param {Object} pos
*/
function setY(elem, pos){
elem.style.top = pos + 'px';
}
/**
* 獲取高度
* @param {Object} elem
*/
function getHeight(elem){
return parseInt(getStyle(elem, 'height'));
}
/**
* 獲取寬度
* @param {Object} elem
*/
function getWidth(elem){
return parseInt(getStyle(elem, 'width'));
}
/**
* 獲得完整的高度，就算對象已隱藏
* @param {Object} elem
*/
function fullHeight(elem){
//若是元素顯示
if(getStyle(elem, 'display') != 'none'){
return elem.offsetHeight || getHeight(elem);
}
//若是不顯示，則復原css
var old = resetCss(ele, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var h = elem.clientHeight || getHeight(elem);
restoreCss(elem, old);
return h;
}
/**
* 恢復原有設置
* @param {String} elem
* @param {Object} prop
*/
function resetCss(elem, prop){
var old = {};
for(var i in prop){
old[i] = prop[i];
elem.style[i] = prop[i];
}
return old;
}
/**
*
* @param {String} elem
* @param {Object} old
*/
function restoreCss(elem, old){
for(var i in old){
elem.style[i] = old[i];
}
}
/**
* 隱藏元素
* @param {String} elem
*/
function hide(elem){
var curDisplay = getStyle(elem, 'display');
if(curDisplay != 'none'){
elem.oldDisplay = curDisplay;
}
elem.style.display = 'none';
}
/**
* 顯示元素
* @param {String} elem
*/
function show(elem){
elem.style.display = elem.oldDisply || 'block';
}
/**
* 設置透明度
* @param {Object} elem
* @param {Object} level (0-100)
*/
function setOpacity(elem, level){
if(elem.filters){ //若是是IE
elem.style.filter = 'alpha(opacity=' + level + ')';
//必須設置zoom,要否則透明度在IE下不生效 From:http://blog.csdn.net/dxx1988/article/details/6581430
elem.style.zoom = 1;
} else { //不然是W3C
elem.style.opacity = level / 100;
}
}
/**
* 滑動
* @param {Object} elem
*/
function slideDown(elem){
//elem.style.height = '0px';
show(elem);
var h = fullHeight(elem);
for(var i=0; i<=100; i+=5){
(function(){
var pos = i;
setTimeout(function(){
elem.style.height = (pos/100) * h + 'px';
}, (pos + 1) * 5);
})();
}
}
//slideDown($('pText'));
//alert(fullHeight($('pText')));
/**
* 透明度漸顯 From: http://mrthink.net/js-fadein-fadeout-fadeto/
* @param {Object} elem
* @param {Number} speed 淡入速度,正整數(可選)
* @param {Number} opacity 淡入到指定的透明度,0~100(可選)
*/
function fadeInThink(elem, speed, opacity){
speed = speed || 20;
opacity = opacity || 100;
show(elem);
setOpacity(elem, 0);
//初始化透明度變化值爲0
var val = 0;
//循環將透明值以5遞增,即淡入效果
(function(){
setOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
/**
* 透明度漸顯
* @param {Object} elem
*/
function fadeIn(elem){
//setOpacity(emel, 0);
show(elem);
for(var i=0; i<=100; i+=10){
(function(){
var pos = i;
setTimeout(function(){
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
/**
* 透明度漸隱 From: http://mrthink.net/js-fadein-fadeout-fadeto/
* @param {Object} elem
*/
function fadeOut(elem){
var val = 100;
(function(){
setOpacity(elem, val);
val -= 5;
if(val >= 0){
setTimeout(arguments.callee, 50);
} else if(val < 0){
hide(elem);
}
})();
}
//fadeInThink($('pText'));
/**
* 光標的水平位置
* @param {Object} e
*/
function getX(e){
e = e || window.event;
return e.pageX || e.clientX + document.body.scrollLeft;
}
/**
* 光標的垂直位置
* @param {Object} e
*/
function getY(e){
e = e || window.event;
return e.pageY || e.clientY + document.body.scrollTop;
}
/**
* 得到鼠標相對於當前元素的X位置
* @param {Object} e
*/
function getElementX(e){
return (e && e.layerX) || window.event.offsetX;
}
/**
* 得到鼠標相對於當前元素的Y位置
* @param {Object} e
*/
function getElementY(e){
return (e && e.layerY) || window.event.offsetY;
}
/**
* 當前頁面的高度
*/
function pageHeight(){
return document.body.scrollHeight;
}
/**
* 當前頁面的寬度
*/
function pageWidth(){
return document.body.scrollWidth;
}
//alert(pageHeight());
/**
* 視口的高度
*/
function windowHeight(){
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
/**
* 視口的高度
*/
function windowWidth(){
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
}
/**
* 瀏覽器水平滾動位置
*/
function scrollX(){
var de = document.documentElement;
return self.pageOffsetset || (de && de.scrollLeft) || document.body.scrollLeft;
}
/**
* 瀏覽器垂直滾動位置
*/
function scrollY(){
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
將HTML DOM中幾個容易經常使用的屬性作下記錄：css
nodeName、nodeValue 以及 nodeType 包含有關於節點的信息。
nodeName 屬性含有某個節點的名稱。html
元素節點的 nodeName 是標籤名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
註釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的node
nodeValue
對於文本節點，nodeValue 屬性包含文本。數組
對於屬性節點，nodeValue 屬性包含屬性值。瀏覽器
nodeValue 屬性對於文檔節點和元素節點是不可用的。app
nodeType
nodeType 屬性可返回節點的類型。ide
最重要的節點類型是：函數
元素類型 ==》節點類型
元素element ==》1
屬性attr ==》2
文本text ==》3
註釋comments ==》8
文檔document ==》 9測試
在IE中會自動過濾掉空白文本節點 elem.previousSibling
在FireFox，Chrome等瀏覽器中可能會包含空白文本節點 elem.previousSibling --- [object text]spa
相關文章
- 1. Datomic 的幾個簡單處理函數
- 2. 幾個簡單又實用的PHP函數
- 3. 來學習幾個簡單的Hive函數吧！
- 4. 幾個簡單的system(const char* _Command)函數命令
- 5. 幾個函數
- 6. 幾個簡單的定律
- 7. 幾個簡單的writeup
- 8. 第七篇：一個簡單的函數
- 9. mysql 經常使用幾個函數簡單實例演示
- 10. MATLAB從一道題引出幾個重要簡單函數
- 更多相關文章...
- • Thymeleaf簡單格式化輸出 - Thymeleaf 教程
- • jQuery Mobile 表單 - jQuery Mobile 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Datomic 的幾個簡單處理函數
- 2. 幾個簡單又實用的PHP函數
- 3. 來學習幾個簡單的Hive函數吧！
- 4. 幾個簡單的system(const char* _Command)函數命令
- 5. 幾個函數
- 6. 幾個簡單的定律
- 7. 幾個簡單的writeup
- 8. 第七篇：一個簡單的函數
- 9. mysql 經常使用幾個函數簡單實例演示
- 10. MATLAB從一道題引出幾個重要簡單函數