Jquery作者John Resig自己封装的javascript 常用函数_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”;
}
}
//设置透明度
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;
}

时间: 2024-08-01 03:39:38

Jquery作者John Resig自己封装的javascript 常用函数_javascript技巧的相关文章

JavaScript 常用函数_javascript技巧

javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认对话框,包括OK.Cancel按钮. (3)escape函数:将字符转换成Unicode码. (4)eval函数:计算表达式的结果. (5)isNaN函数:测试是(true)否(false)不是一个数字. (6)parseFloat函

javascript的函数_javascript技巧

javascript的函数 作者:F. Permadi 译者:Sheneyan(子乌) 时间:2006.01.03 英文原文: INTRODUCTION TO JavaScript Functions 子乌注:一篇相当不错的function入门文章,个人感觉相当经典. 词语翻译列表 function:函数(Function未翻译) declare:定义 assign:指派,分配 functionbody:函数体(就是函数的内容) object:对象 property:属性 unnamed:匿名(

轻松学习Javascript闭包函数_javascript技巧

闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的. 不过我们也还是从闭包的含义出发. 闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以"记忆"它创建时候的环境. 官方解释说完后,我们先来看一个简单计数的例子. var c = 0; function count(){ c++; } count();// 1 count();// 2 这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时

学习并汇集javascript匿名函数_javascript技巧

古人有"授之以鱼,不如授之以渔" ,没有老师,就只能自己学"渔"了.还是从简单的开始吧! 下面的这几句代码是最熟悉不过的了,但是你知道为什么这么写吗?为什么在页面中加上这几句代码,jQuery对象就已经被引入了. 复制代码 代码如下:  (function($){  //功能的实现code  })(jQuery); 我就从这个开始了!程序员都懂得如何google和baidu.同样我也一样...噢!原来这是javascript的匿名函数. 这个匿名函数是什么东西呢?慢

javascript 数组排序函数_javascript技巧

arrayobj.sort(sortfunction); 参数:sortFunction 可选项.是用来确定元素顺序的函数的名称.如果这个参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列. sort 方法将 Array 对象进行适当的排序:在执行过程中并不会创建新的 Array 对象. 如果为 sortfunction 参数提供了一个函数,那么该函数必须返回下列值之一: 负值,如果所传递的第一个参数比第二个参数小. 零,如果两个参数相等. 正值,如果第一个参数比第二个参数大. 以上的

javascript getElementsByClassName函数_javascript技巧

今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用. 复制代码 代码如下: var getElementsByClassName = function(searchClass, node, tag) { if (document.getElementsByClassName) { return document.getElementsByClassName(searchClass) } else { node = node || document;

一些经常会用到的Javascript检测函数_javascript技巧

// Function Name: trim // Function Description: 去除字符串的首尾的空格 // Creation Date: 2004-7-13 15:30 // Last Modify By: N/A // Last Modify Date: N/A String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } // Function Name: ltrim

自己封装的javascript事件队列函数版

 这篇文章主要介绍了自 己封装的javascript事件队列函数版,兼容了大部份浏览器,需要的朋友可以参考下 背景 javascript中使用addEventListener()或attachEvent()绑定事件时会有几个小问题: 一.使用addEventListener()或attachEvent()添加的匿名函数无法移除. var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',function(){

javascript常用函数(2)_javascript技巧

文章主要内容列表: 16. 除去数组重复项 17. 操作cookie 18. 判断浏览器类型 19. 判断是否开启cookie 20. 断是否开启JavaScript 21. JavaScript 打字机效果 22. 简单打印 23. 禁止右键 24. 防止垃圾邮件 25.复制(javaeye flash版) 26. 阻止冒泡事件或阻止浏览器默认行为 27. 关闭或跳转窗口时提示 28. 用javascript获取地 址栏参数 29. 计算停留的时间 30. div为空,只有背景时,背景自动增高