几个简单的函数

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中几个容易常用的属性做下记录:

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue
对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType
nodeType 属性可返回节点的类型。

最重要的节点类型是:

元素类型 ==》节点类型
元素element ==》1
属性attr ==》2
文本text ==》3
注释comments ==》8
文档document ==》 9

在IE中会自动过滤掉空白文本节点   elem.previousSibling   
在FireFox,Chrome等浏览器中可能会包含空白文本节点  elem.previousSibling  --- [object text]

时间: 2024-11-08 09:35:54

几个简单的函数的相关文章

《精通javascript》几个简单的函数

精通JavaScript(图灵计算机科学丛书) ,让你大开眼界的 JavaScript 力作,跟随 jQuery 之父到达前所未有的深度,Amazon 五星盛誉图书. 本书是目前最深入的JavaScript图书,讲述了现代JavaScript的所有知识,展现了这门技术将能给网站建设带来如何丰富的体验.本书言简意赅,扩展了读者视野,并关注于基础且重要的主题–现代JavaScript是什么和不是什么,浏览器支持的当前状态,以及需要注意的陷阱等. 书中所有概念都来自于现实案例的分析.前端UI分享 书没

&lt;精通JavaScript&gt;---阅读笔记01

下面是阅读精通JavaScript书做的相关笔记. JS中的函数重载 函数重载必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力,在js中每个函数都带有一个仅在这个函数范围内作用的变量,称之为参数argument,它是一个包含所有传给函数参数的伪数组,所以并不是正的数组,但是我们不可以去修改它.其实这个就相当于一个池,将参数全部都保存在里面,之后在用的时候去取,只是这个池我们看不见.是语言自己去找. JS中2种常见的类型检查 :typeof()操作符 typeof n==”stri

JavaScript入门:006—JS函数的定义

JS函数的声明.声明函数的格式如下: function 函数名(参数列表){ //函数语句: return 返回值; } 来看具体的函数声明.1.普通函数 <script type="text/javascript"> function ShowHint() { alert("普通函数"); } </script> 2.带参数的函数 <script type="text/javascript"> functio

【javaScript基础】立即调用函数表达式

在javaScript中,每个函数被调用时,都会创建一个新的执行上下文.因为在一个函数里面定义的变量和函数只能在里面访问,在外面是不行的,上下文提供了一种很容易的方法来创建私有性. //makeCounter函数返回另外一个匿名函数,这个匿名函数能够访问到"私有"变量i, 好像有一点"特权"性. function makeCounter() { // i只能在makeCounter的里面被访问到 var i = 0; return function() { cons

JavaScript的柯里化函数

柯里化,或者说部分应用,是一种函数式编程的技术,对于熟悉以传统方式编写 JavaScript 代码的人来说可能会很费解.但如果使用得当,它可以使你的 JavaScript 函数更具可读性. 更具可读性和灵活性 函数式 JavaScript 被吹捧的优点之一就是拥有短小紧凑的代码风格,可以用最少行数.更少重复的代码得到正确的结果.有时这会以牺牲可读性为代价:如果你还不熟悉函数式编程的方法,这种方法写的代码会很难阅读和理解. 如果之前你遇到过柯里化这个术语,但是不知道它是什么意思,把它当做奇怪的.难

【javascript基础】2、函数

原文:[javascript基础]2.函数 前言 我在上一篇[javascript基础]基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道大家可能就是点开一下而已,但是还是给我一些继续写下去的信心.那今天写一些关于javascript函数的一些知识,帮助大家熟悉或者复习一些函数的基本知识. PS:最近jQuery源码交流群( 239147101)加了不少热新人,希望大家还是以学习为主,尽量少

javascript中的this与函数讲解

前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码,都存放在Window函数内(这是个假设),也就是说javascript中只有函数作用域(前面假设做前提下). 作用域是什么 作用域是一个盒子,盒子内部的变量只能在当前盒子中使用,作用域盒子是可以嵌套的,内部盒子的变量对父级盒子是不可见的,因为盒子封闭了他们并且盒子不透明,但是盒子可以看到父级盒子内部

《精通JavaScript》读后感

<精通JavaScript>这本书是jQuery的作者John Resig写的,很遗憾,这么晚了才拜读这么一本好书. 现在的jQuery在开发中已经不常使用了,出现了后起之秀,各种MV*框架,到现在我也没有开始学习,所以我不能对比.昨天在微信公众号上面看到一篇关于<jQuery是否还有未来和应用场景>之中的文章,几位国外的大佬就此讨论了一下.想法大概是jQuery太重了,直接操作DOM也会显得有些笨拙和无法完成目前的分离式操作.估计是没有太多的应用场景了,我的想法大概是,在未来,我

javascript的constructor简单介绍

javascript的constructor简单介绍:constructor可以返回对象对创建它的构造函数的引用,例如: var arr=[1,2,3]; console.log(arr.constructor===Array); 以上代码中的输出值是true,这说明数组对象arr的constructor属性指向它的构造函数Array.可能上面的代码过于简单了,下面再来一点稍稍复杂的代码分析一下: Object.prototype.webName="蚂蚁部落"; function sh

《JavaScript语言精粹》之函数化

写在前面 看到好多书评和读书笔记都说<JavaScript语言精粹>字字珠玑,名不虚传..当然,要看得懂才行 其实个人认为函数化部分不是很好,举的例子不是十分恰当,之前看不懂是因为被成功误导了,就像<Head First>设计模式第一章<策略模式>一样,作者有些偏离章节主题,读者容易被误导 声明:姑且把函数化部分给出的用来创建对象的函数称为“创造函数”吧,为了与“构造函数”区分开..不是很好听,将就着用吧 一.源码中需要注意的点 很容易就能拿到源码,和中文版书上的代码一