积累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 ...
随机推荐
- void运算符
void是一元运算符,它出现在操作数之前,操作数可以是任意类型,操作数会照常计算,但忽略计算结果并返回undefined.由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void来让程序 ...
- 日常博客----rem,em的恩怨相杀
基本知识: 使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小. 我们可以使用这种灵活性,使我们在开发期间,能更加快速灵活的调整,允许浏览器用户调整浏览器大 ...
- mongodb的安装及配置安装服务
1. 安装mongodb数据库 mongodb官方网址:https://www.mongodb.org 安装好之后的步奏: 第一步:规划你的安装目录和数据库文件的存储路径,我打算将Mongo的程序文件 ...
- 在项目中运用精益 - Five Why
今天成功地运用了5个why对一个项目上的问题进行剖析,收获良多,在此分享给大家. 事情是这样的,该项目是个固定价格项目,处于收尾阶段,客户提出来了一些需求,我们(实施方)认为这些要求是不在最初项目范围 ...
- webapi之fiddler头设置
Host: localhost:16648Connection: keep-aliveContent-Length: 36Accept: application/json, text/javascri ...
- BZOJ 1012： [JSOI2008]最大数maxnumber
★★ 输入文件:bzoj_1012.in 输出文件:bzoj_1012.out 简单对比时间限制:3 s 内存限制:162 MB [题目描述] 现在请求你维护一个数列,要求提供以下两种 ...
- 面向对象的设计的SOLID原则
S.O.L.I.D是面向对象设计和编程中5个重要编码规则的首字母的缩写. - SRP The Single Responsibility Principle 单一责任原则 当需要修改某个类的时候原因有 ...
- SQL数据库移植到ARM板步骤
SQL作为一种存储数据的数据结构,具有体积小(能堵存储的数据多),容易移植等优点.例如,在Ubuntu或者ARM开发板上被大量应用.下面就简单说一下SQL移植到ARM板的步骤. 下载源代码 (记得在家 ...
- mount nfs 各版本之间的转换
[root@one1-fst-hx ~]# mount.nfs 182.168.2.49:/mnt/sdb/nfs /mnt/nfs2/ nomand,-o vers=3[root@one1-fst- ...
- Django的架构
简介 Django继承并简化了MVC架构.MVC中的Controller部分基本全由Django完成.View部分被分割成两部分,即:负责HTML渲染的模板和负责显示逻辑的视图.所以Django又被称 ...