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


Posted in Javascript onNovember 09, 2009
//获取元素的样式值。 
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”; 
} 
} 
//设置透明度 
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; 
}
Javascript 相关文章推荐
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
js星星评分效果
Jul 24 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
JQuery 图片延迟加载并等比缩放插件
Nov 09 #Javascript
让Firefox支持event对象实现代码
Nov 07 #Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 #Javascript
JavaScript 变量基础知识
Nov 07 #Javascript
表格 隔行换色升级版
Nov 07 #Javascript
csdn 论坛技术区平均给分功能
Nov 07 #Javascript
在js中单选框和复选框获取值的方式
Nov 06 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
js实现拖拽功能
2017/03/01 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
使用Python写CUDA程序的方法
2017/03/27 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
python遍历小写英文字母的方法
2019/01/02 Python
python实现银行实战系统
2020/02/26 Python
python批量修改交换机密码的示例
2020/09/22 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
设计部经理的岗位职责
2013/11/16 职场文书
校园招聘策划书
2014/01/09 职场文书
珠宝店促销方案
2014/03/21 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript