积累js里有用的函数库
一.兼容地获取非行间样式（兼容火狐，ie，chrome）
function getStyle(obj,name)
{
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
} //调用
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width')); };
说明：只能获取单一样式，不能获取复合样式。
单一样式：width、height、position
复合样式：background、border。例如，如果想取背景颜色，可以用backgroundColor
二.封装getByClass
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
三.比较完美的运动框架
1.支持多物体，对任意属性值，链式运动，以及多个值同时运动的情况，满足80%的运动情况。
调用：startMove(obj，json,fnEnd)。第一个参数是运动的物体。中间一个参数是传一个包含希望运动的属性的json，例如想要同时变高和宽和透明度，可以var json={'height':300,'width':300,'opacity':100};，最后一个参数是传一个函数，即执行完该运动后，想要接着执行的运动。
2.代码：
// JavaScript Document
window.onload=function (){
var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function (){ startMove(this,'opacity',100);
};
oDiv1.onmouseout=function (){ startMove(this,'opacity',30);
}; }; function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
} //例如startMove(oDiv,{width:400,height:400})
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设所有的值都已经到了 for(var attr in json){
var cur=0; if(attr=='opacity'){
cur=Math.round(100*parseFloat(getStyle(obj,attr)));
}else{
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr])
bStop=false; if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100; }else{
obj.style[attr]=cur+speed+'px';
}
} if(bStop){
clearInterval(obj.timer); if(fnEnd) fnEnd();
}
},30);
}
move.js
四.获取鼠标在页面的绝对位置，消除滚动条的影响
1.如图所示：当存在滚动条时，不能用oDiv.style.top=oEvent.clientY+'px'，因为clientY是可视区的坐标，运用clientY+scrollTop即可得到鼠标的绝对坐标，将其封装为函数。
2.代码如下：
function getPos(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:200px;height:200px;background:red;position:absolute;}
</style>
<script>
function getPos(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
} document.onmousemove=function (){
var oEvent=event||ev;
var oDiv=document.getElementById('div1'); var pos=getPos(oEvent); oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
};
</script>
</head> <body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
完整例子
3.存在的问题：移动鼠标时还是会有卡顿。
五.兼容性的绑定事件
1.attachEvent(事件名,函数)适合于ie10及以下版本，addEventListener(事件名，函数，捕获)适合于谷歌，火狐和ie9及以上版本。
还有一个区别在于事件名，前者是完整的事件名，如'onclick'，后者是不带on的事件名，如‘click’
2.代码：
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
}else{
obj.addEventListener(ev,fn,false);
}
}
说明：依次传入obj，不带on的事件名和函数即可。
六.Ajax的库函数
1.主要有4步：创建Ajax对象，连接到服务器，发送请求，接收返回值
2.代码：
function ajax(url, fnSucc, fnFailed)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true); //3.发送
oAjax.send(); //4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//只有传入失败，才调用
if(fnFailed)
{
fnFailed();
}
}
}
};
}
调用：
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
ajax('a1.txt?t='+new Date().getTime(),function (str){
alert(str);
},function (){alert('失败');});
};
};
其中第三个参数(失败的参数)可以省略。
七.封装cookie。
1.代码：（包括设置cookie(包括过期时间)，读取cookie和删除cookie）
//设置cookie的过期时间
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+ ';expires='+oDate;
} //读取cookie
function getCookie(name){
//cookie的格式：username=cx; password=11
//注意这里的空格
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';
} //删除cookie
function removeCookie(name){
setCookie(name,1,-1);
}
测试
//测试读取cookie
//alert(getCookie('sex')); //测试设置cookie
//setCookie('username','cx',12);
//setCookie('password','11',1); //测试删除cookie
removeCookie('username');
alert(document.cookie);
依次打开火狐浏览器->右键查看页面信息->安全->查看cookie，可以看到下图，即设置cookie成功。
积累js里有用的函数库的更多相关文章
- js里的回调函数
function a(callback) // 定义一个函数 ,需要传入的参数是callback 然后callback的类型为一个函数{console.log("callback还表示传 ...
- js里的匿名函数 数组排序
// 匿名函数:其实就是函数的简写形式 var method =function(){ alert("123"); } method(); // 匿名函数可以用于事件的处理 fun ...
- JS里的CSS函数
<title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...
- JS里面的indexOf()函数
stringObject.indexOf(searchvalue,formindex); searchvalue在字符串首次出现的位置,位置是从0开始算的.
- Android非常有用的开源库介绍整理
Android开源库 自己一直很喜欢Android开发,就如博客副标题一样,我想做个好的App. 在摸索过程中,GitHub上搜集了很多很棒的Android第三方库,推荐给在苦苦寻找的开发者,而且我会 ...
- 翻译连载 | 附录 C：函数式编程函数库－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- Underscore——JS函数库
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826065.html underscore是什么——它是一个js函数库 jQuery统一了不同浏览器之间的 ...
- PHP里10个鲜为人知但却非常有用的函数
levenshtein() 你有没有经历过需要知道两个单词有多大的不同的时候,这个函数就是来帮你解决这个问题的.它能比较出两个字符串的不同程度. 用法: <?php $str1 = " ...
- 【js编程艺术】 之有用的函数
学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...
随机推荐
- 013、BOM对象的应用
BOM结构图如下: DOM结构图如下: BOM和DOM BOM,Bowser Object Model浏览器对象模型.提供了访问和操作浏览器各组件的途径或方法. 比如:Navigator对象:浏览器的 ...
- vs 2017 下 千万不要装force utf8 这个插件
千万不要装!!! 装了之后,传文件到linux系统下,各种xml和makefile报错(如下) Makefile:1: *** 遗漏分隔符 . 停止
- php配置之include_path
在php.ini中配置include_path,可在引入文件时直接引入配置目录下的文件. 项目中就可以直接 引入/var/www/phpxwlib及/var/www/huicuiserver/libs ...
- sql格式化工具
桌面版: SQLInform: http://www.sqlinform.com/download_free_desktop_sw.html 在线格式化: http://www.dpriver.com ...
- 分类IP地址(A、B、C类)的指派范围、一般不使用的特殊IP地址
分类IP地址(A.B.C类)的指派范围.一般不使用的特殊IP地址 A类地址:0开头,8位网络号 B类地址:10开头,16位网络号 C类地址:110开头,24位网络号 D类地址:1110开头,多播地址 ...
- 字符串翻转（java）
1 递归,二分 private static String reverse(String s) { int N = s.length(); if(N <= 1) return s; String ...
- 利用MSF实现三层网络的一次内网渗透
目标IP192.168.31.207 很明显这是一个文件上传的靶场 白名单限制 各种尝试之后发现这是一个检测文件类型的限制 上传php大马文件后抓包修改其类型为 image/jpeg 上传大马之后发 ...
- zabbix4.2学习笔记系列
写在前面:对zabbix的接触始于对监控的了解,网上比较多zabbix相关博客,比较多基于3系列甚至2系列,最新开发版zabbix4.2版本已经出来,本博客基于4.2版本学习,参考官网4.2版本和网上 ...
- ES6 第一章 let和const命令 具体参照http://es6.ruanyifeng.com
1.let类似于var用用来定义变量 1)let没有预解析,不存在变量提升 // var 的情况 console.log(foo); // 输出undefined var foo = 2; // le ...
- delphi并行压缩
real case test MM parallel 4x scalable (i7 6700)(on the newer processors will be linear) I did a sma ...