积累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 ...
随机推荐
- AJPFX总结List的三个子类的特点
ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. ...
- 使用kubeadm安装kubernetes v1.14.1
使用kubeadm安装kubernetes v1.14.1 一.环境准备 操作系统:Centos 7.5 ⼀ 一台或多台运⾏行行着下列列系统的机器器: Ubuntu 16.04+ Debi ...
- hihocoder offer收割编程练习赛9 B 水陆距离
思路: 宽搜,多个起点. 实现: #include <iostream> #include <cstdio> #include <algorithm> #inclu ...
- Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...
- 安装mysql时 make 时 提示 redeclaration of C++ built-in type ‘bool’ 错误
安装mysql时 make 时 提示 redeclaration of C++ built-in type ‘bool’ 错误 由于gcc-c++是在./configure后进行编译的 重新./con ...
- 利用JSTL重写查询的jsp页面
利用JSTL重写Java Web MVC实例中的jsp页面 第一步:导入jstl.jar和standard.jar文件
- 如何在运行时改变App的图标
在你完成应用程序的beta版本后,最后会有些人去帮你测试,使你去完善应用程序……或者会有投资青睐.但是如果测试人员有一种简单地方式去检查构建版本的应用程序会不会有帮助呢? 这个教程将会向你展示这些,向 ...
- Perl中 qw 是 “quoted Word” 或是 “quoted by whitespace”的简写
Perl中 qw 是 “quoted Word” 或是 “quoted by whitespace”的简写 eg: @strict_pragma = qw ( a b c);
- 并发3-Volatile
Volatile关键字实现原理 1.认识volatile关键字 程序举例 用一个线程读数据,一个线程改数据 存在数据的不一致性 2.机器硬件CPU与JMM (1)CPU Cache模 (2)CPU缓存 ...
- 去BAT，你应该要看一看的面试经验总结
我去年12月份从上一家公司离职,一直到今年3月份,基本上都在面试中度过来的. 先交代下背景:坐标上海,做技术开发,我本人面试的职位是linux服务器开发,最倾向的职位是服务器开发主程或技术经理.我本人 ...