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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
Javascript面向对象编程
Mar 18 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
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
基于mysql的bbs设计(一)
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP中使用curl入门教程
2015/07/02 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP实现的策略模式示例
2019/03/20 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python中Genarator函数用法分析
2015/04/08 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python append、extend与insert的区别
2016/10/13 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python3并发写文件与Python对比
2019/11/20 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
大学生村官工作感言
2014/01/10 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
网络管理专业求职信
2014/03/15 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
毕业实习证明范本
2015/06/16 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS