`

Jquery作者John Resig自己封装的javascript 常用函数

阅读更多
//获取元素的样式值。
function getStyle(elem,name){
     if(elem.style[name]){
         return elem.style[name];
     }else if(elem.currentStyle){
         return elem.currentStyle[name];
     }else if(document.defaultView&&document.defaultView.getComputedStyle){
         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和y坐标。   
function pageX(elem){
     return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
     return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
//获取元素相对于父元素的x和y坐标。       
function parentX(elem){
     return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
     return elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}
//获取使用css定位的元素的x和y坐标。
function posX(elem){
     return parseInt(getStyle(elem,"left"));
}   
function posY(elem){
     return parseInt(getStyle(elem,"top"));
}
//设置元素位置。   
function setX(elem,pos){
     elem.style.left=pos+"px";
}   
function setY(elem,pos){
     elem.style.top=pos+"px";
}
//增加元素X和y坐标。   
function addX(elem,pos){
     set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
     set(elem,(posY(elem)+pos));
}
//获取元素使用css控制大小的高度和宽度   
function getHeight(elem){
     return parseInt(getStyle(elem,"height"));
}
function getWidth(elem){
     return parseInt(getStyle(elem,"width"));
}
//获取元素可能,完整的高度和宽度
function getFullHeight(elem){
     if(getStyle(elem,"display")!="none"){
         return getHeight(elem)||elem.offsetHeight;
     }else{
         var old=resetCss(elem,{display:"block",visibility:"hidden",position:"absolute"});
         var h=elem.clientHeight||getHeight(elem);
         restoreCss(elem,old);
         return h;
     }
}
function getFullWidth(elem){
     if(getStyle(elem,"display")!="none"){
         return getWidth(elem)||elem.offsetWidth;
     }else{
         var old=resetCss(elem,{display:"block",visibility:"hidden",position:"absolute"});
         var w=elem.clientWidth||getWidth(elem);
         restoreCss(elem,old);
         return w;
     }
}
//设置css,并保存旧的css
function resetCss(elem,prop){
     var old={};
     for(var i in prop){
         old[i]=elem.style[i];
         elem.style[i]=prop[i];
     }
     return old;
}
function restoreCss(elem,prop){
     for(var i in prop){
         elem.style[i]=prop[i];
     }
}
//显示和隐藏
function show(elem){
  elem.style.display=elem.$oldDisplay||"";
}
function hide(elem){
  var curDisplay=getStyle(elem,"display");
  if(curDisplay!="none"){
    elem.$oldDisplay=curDisplay;
    elem.style.display="none";
  }
}
//设置透明度 setOpacity(elem,40)
function setOpacity(elem,num){
  if(elem.filters){
    elem.style.filter="alpha(opacity="+num+")";
  }else{
    elem.style.opacity=num/100;
  }
}
//滑动
function slideDown(elem){
     var h=getFullHeight(elem);
     elem.style.height="0px";
     show(elem);
     for(var i=0;i<=100;i+=5){
         new function(){
             var pos=i;
             setTimeout(function(){elem.style.height=(pos/100*h)+"px";},(pos*10));
         }
     }
}
//渐变
function fadeIn(elem){   
         show(elem);
         setOpacity(elem,0);
     for(var i=0;i<=100;i+=5){
         new function(){
                   var pos=i;
                   setTimeout(function(){setOpacity(elem,pos);},(pos+1)*10);
                   }
         }
     }
//获取鼠标光标相对于整个页面的位置。   
function getX(e){
     e=e||window.event;
     return e.pageX||e.clientX+document.body.scrollLeft;
     }
function getY(e){
     e=e||window.event;
     return e.pageY||e.clientY+document.body.scrollTop;
     }
//获取鼠标光标相对于当前元素的位置。
function getElementX(e){
     return (e&&e.layerX)||window.event.offsetX;
     }
function getElementY(e){
     return (e&&e.layerY)||window.event.offsetY;
     }
//获取页面的高度和宽度
function getPageHeight(){
     var de=document.documentElement;
     return document.body.scrollHeight||(de&&de.scrollHeight);
     }
function getPageWidth(){
     var de=document.documentElement;
     return document.body.scrollWidth||(de&&de.scrollWidth);
     }
//获取滚动条的位置。
function scrollX(){
     var de=document.documentElement;
     return self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
     }
function scrollY(){
     var de=document.documentElement;
     return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
     }
//获取视口的高度和宽度。
function windowHeight() {
     var de = document.documentElement;
     return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
     var de = document.documentElement;
     return self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth;
}

 [转自 :http://www.jb51.net/article/20809.htm ]

分享到:
评论

相关推荐

    精通JavaScript(源代码) jQuery之父John Resig所写

    《精通JavaScript(源代码)》是由jQuery之父John Resig撰写的高级JavaScript技术书籍,它不仅深入探讨了JavaScript的核心概念,而且重点解析了jQuery库的内部工作机制,为读者揭示了JavaScript编程的深层次奥秘。...

    精通JavaScript(John Resig)

    《精通JavaScript》是John Resig所著的一部经典JavaScript教程,尤其因其作者是jQuery的创建者而备受关注。这本书深入浅出地介绍了JavaScript这门语言的各个方面,旨在帮助读者不仅理解JavaScript的基础,还能掌握其...

    用JavaScript代码封装而成的函数库.zip

    综上所述,这个名为"用JavaScript代码封装而成的函数库.zip"的压缩包,很可能是一个包含JavaScript函数的集合,这些函数可能用于增强网页开发中的各种功能,尤其是与jQuery库的结合使用。通过解压并分析这些.js文件...

    jQuery的实时搜索插件_JavaScript

    jQuery由John Resig于2006年创建,它的核心功能包括选择器(用于选取HTML元素)、遍历(遍历DOM树)和操作(修改DOM元素)。jQuery语法简洁,使得JavaScript代码更易读、易写。 **实时搜索原理** 实时搜索的实现...

    jquery javascript

    jQuery由John Resig在2006年创建,它的目标是“使JavaScript编程变得简单”。jQuery的主要特性有: 1. **选择器**:jQuery提供了一套强大的CSS选择器,使得选取DOM元素变得更加简单。 2. **DOM操作**:jQuery封装了...

    jquery-javascript特效

    jQuery由John Resig于2006年创建,它简化了JavaScript的DOM操作,提供了丰富的选择器、链式调用、动画效果等功能,让开发者能够快速实现复杂的特效。 1. jQuery选择器:jQuery提供了一系列CSS选择器,如`$("#id")`...

    2022Jquery总结(1).pdf

    jQuery 是一个 JavaScript 库,由 John Resig 于 2006 年创建,是目前最流行的 JavaScript 库。它的设计宗旨是“write less , Do More”,即倡导写更少的代码,做更多的事情。jQuery 封装了 JavaScript 常用的功能...

    5天驾驭jQuery教程 带书签版

    在jQuery中,类库的含义更为具体,它汇集了一系列优化过的JavaScript函数,让开发者能够以极短的代码实现复杂的网页动态效果。例如,选择元素、修改样式、绑定事件等操作,在jQuery中只需几行代码即可完成,而无需...

    jqueryApi版本集合

    jQuery由John Resig于2006年创建,其设计目标是使JavaScript编程更加简单,特别是处理HTML文档、处理事件、创建动画效果以及进行Ajax交互。jQuery通过提供简洁的语法,使得原本复杂的JavaScript任务变得轻松易行。 ...

    javascript+jQuery手册

    jQuery,是一个强大的JavaScript库,由John Resig于2006年创建,旨在简化JavaScript的DOM操作、事件处理和动画制作。jQuery 1.4.0 版本是该库的一个早期版本,虽然功能相对现代版本有所限制,但依然包含许多核心特性...

    javascript之jquery源代码,

    jQuery是JavaScript的一个库,由John Resig在2006年创建,它以"Write Less, Do More"为口号,使得JavaScript编程变得更加简洁和高效。 jQuery的核心特性包括DOM操作、事件处理、动画设计和Ajax交互。它的出现极大地...

    Jquery$JavaScript

    jQuery,另一方面,是由John Resig于2006年创建的一个JavaScript库,其目的是简化JavaScript的DOM操作、事件处理、动画制作和Ajax交互。jQuery 的核心特点在于其选择器,它使得选取HTML元素变得异常简单,如`$("#id...

    尚硅谷_教学课件_jQuery

    jQuery 是一款广泛应用于Web开发中的JavaScript库,由John Resig于2006年创建。它的出现极大地简化了JavaScript代码,尤其是处理DOM操作、事件处理、动画效果和Ajax交互等方面。"尚硅谷"的这个jQuery教学课件提供了...

    jquery包 jquery学习

    jQuery由John Resig在2006年创建,自那时起,它已经成为Web开发中不可或缺的一部分,尤其对于前端开发者来说,jQuery极大地提高了他们的工作效率。 **jQuery的核心功能** 1. **DOM操作**:jQuery提供了一套方便的...

    java开发常用jar包之jquery.rar

    jQuery是由John Resig在2006年创建的一个轻量级、高性能的JavaScript库。它的核心理念是“写得更少,做得更多”。jQuery通过提供简洁的API,使得开发者可以快速地操作DOM(文档对象模型),处理事件,执行Ajax交互,...

Global site tag (gtag.js) - Google Analytics