积累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对象:浏览器的 ...
- [ CQOI 2018 ] 异或序列
\(\\\) Description 给出一个长为 \(n\) 的数列 \(A\) 和 \(k\),多次询问: 对于一个区间 \([L_i,R_i]\),问区间内有多少个不为空的子段异或和为 \(k\ ...
- CF782B The Meeting Place Cannot Be Changed
题意: The main road in Bytecity is a straight line from south to north. Conveniently, there are coordi ...
- scrollTop、offsetTop、clientTop
1.offsetTop: obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置. 2.clientTop: 这个返回的是元素周围边框的厚度, ...
- 《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
- Java编译时根据调用该方法的类或对象所属的类决定
class Base{ int x = 1; static int y = 2; } class Subclass extends Base{ int x = 4; i ...
- [转载]ant和maven的区别
Ant是软件构建工具,Maven的定位是软件项目管理和理解工具.Maven除了具备Ant的功能外,还增加了以下主要的功能: 1)使用Project Object Model来对软件项目管理: 2)内置 ...
- 关于maven source1.5报错
是因为maven 默认是1.5编译的 <build>//加上这个配置,把编译给改掉试试 <pluginManagement> <plugins> <plugi ...
- Vue 几种常见开局方式
vue的开局方式五花八门,这里列几种常见的. 我们先建立一个app.vue来当入口文件,即所有页面都会以这个组件为模板. <template> <div id="app&q ...
- Java开发者写SQL时常犯的10个错误
首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - iOS ...