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 Event学习第八章 事件的顺序
Feb 07 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
微信小程序实现时间戳格式转换
Jul 20 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
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
python3爬取淘宝信息代码分析
2018/02/10 Python
python如何查看微信消息撤回
2018/11/27 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
如何使用python传入不确定个数参数
2020/02/18 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
房地产融资计划书
2014/01/10 职场文书
2014年情人节活动方案
2014/02/16 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
MySQL中varchar和char类型的区别
2021/11/17 MySQL
openstack云计算keystone组件工作介绍
2022/04/20 Servers
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang