1.逐一绑定操作到window.onload上

//func:新函数
function addLoadEvent(func){
//把现有的window.onload事件处理函数的值存入变量oldonload
var oldload = window.onload;
//如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它
if(typeof oldload !== 'function'){
window.onload = func;
} else {
//如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾
window.onload = function(){
oldload();
func();
}
}
}

2.插入一个元素到另一个元素的后面

  虽然dom没有提供直接的方法,但是提供了这一操作的所有“原材料”

//首先,这个函数有两个参数:一个是将被插入的新元素,另一个是目标元素。
function insertAfter(newElement, targetElement){
//把目标元素的parentNode属性值保存到变量parent里
var parent = targetElement.parentNode;
//检查目标元素是不是parent的最后一个元素
if(parent.lastChild === targetElement){
//如果是,则追加
parent.appendChild(newElement);
} else {
//如果不是,则把新元素插入到目标元素和目标元素的下一个兄弟元素之间。
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

3.获取一个元素的下一个元素(不是节点,节点包括:文本节点,属性节点,元素节点)

//把当前元素的nextSibling节点作为参数传递给getNextElement函数
function getNextElement(node){
if(node.nodeType === 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}

4.为一个元素添加className

//参数一:需要添加新class的元素
//参数二:新的class设置值
function addClass(element,value){
//检查className属性的值是否为null
if(element.className === null){
//如果是,把新的class设置值直接赋值给className属性
element.className = value;
} else {
//如果不是,把一个空格和新的class设置值追加到className属性上去
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}

5.移动页面元素:前提是元素能够移动,比如postion:absolute,父元素为postion:relative

//移动元素到指定位置
//参数:
//elementID 元素ID
//final_x 目标位置横坐标
//final_y 目标位置纵坐标
//interval 计时器timeout时长
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID);
//清除掉元素下所有计时器,重新开始,防止多个计时器混乱
if(elem.movement){
clearTimeout(elem.movement);
}
var xpos,ypos;
//如果属性值为null,设置为0
if(!elem.style.left){
elem.style.left = "0px";
}
if(!elem.style.top){
elem.style.top = "0px";
}
xpos = parseInt(elem.style.left);
ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y){
return true;
}
/*if(xpos < final_x){
xpos ++;
}*/
var dist;
if(xpos < final_x){
//实现由快到慢的动画效果
dist = Math.ceil((final_x - xpos)/10);
xpos += dist;
}
/*if(xpos > final_x){
xpos --;
}*/
if(xpos > final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos -= dist;
}
/*if(ypos < final_y){
ypos ++;
}*/
if(ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos += dist;
}
/*if(ypos > final_y){
ypos --;
}*/
if(ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos -= dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout(repeat,interval);
}

6.创建XMLHttpRequest对象

function getHTTPObject(){
//检测浏览器是否存在XMLHttpRequest对象
if(typeof window.XMLHttpRequest === "undefined"){
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){}
return false;
}
}
return new XMLHttpRequest();
}

7.获取一个元素的样式

function getStyle(obj,target){
if(obj.currentStyle){
return obj.currentStyle[target];
} else {
return getComputedStyle(obj,null)[target];
}
}

8.基于html4+css2的完美运动框架

//获取元素样式
function getStyle(obj,target){
if(obj.currentStyle){
return obj.currentStyle[target];
} else {
return getComputedStyle(obj,null)[target];
}
} /**
obj:要操作的对象
json:格式如下
var json={
width:300,
height:300
}
fnEnd:回调函数
*/
function startMove(obj,json,fnEnd){
if(obj.timer){clearInterval(obj.timer);} obj.timer = setInterval(function(){
var bStop = true; //假设:所有的操作都执行完毕(测试所有属性都设置好的解决方案有很多,这里取其中一种比较巧的方式)
for(var v in json){
var attr = v;
var iTarget = json[v];
bStop = oper(obj,attr,iTarget,bStop);//执行缓冲运动
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd){fnEnd();}
}
},30);
} function oper(obj,attr,iTarget,bStop){
var cur = 0;
if(attr === 'opacity'){
cur = Math.round(parseFloat(getStyle(obj,'opacity'))*100);
} else {
cur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget-cur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur !== iTarget){
bStop = false; //没达到目标设置为否
if(attr === 'opacity'){
obj.style.opacity = parseFloat((cur + speed)/100);
obj.style.filter = 'alpha(opacity:'+(cur + speed)+')';
} else {
obj.style[attr] = cur + speed + 'px';
}
} return bStop;
}

9 获取鼠标位置

function getPos(ev){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:scrollLeft+ev.clientX,y:scrollTop+ev.clientY};
}

10 添加绑定事件

/*不用加on,例如:onclick写成click即可*/
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
return;
}
if(obj.addEventListener){
obj.addEventListener(ev,fn,false);
return;
}
}

11 ajax调用方法

function ajax(url,succFn,failedFn){
//1.创建XMLHttpRequest对象
var oAjax = null;
if(window.ActiveXObject){
oAjax = new ActiveXObject('MicrosoftHTTP');
} else {
oAjax = new XMLHttpRequest();
} //2.连接服务器
oAjax.open('GET',url,true); //3.发送数据
oAjax.send(); //4.接收数据
oAjax.onreadystatechange = function(){
//解析完毕
if(oAjax.readyState === 4){
if(oAjax.status === 200){//状态码为200
succFn(oAjax.responseText);
} else {
if(failedFn){
failedFn(oAjax.status);//返回http状态码
}
}
}
}
}

11.javascript继承示例

function Drag(id){
var _this = this;
this.id = id;
this.disX = null;
this.disY = null;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function(ev){
_this.fnDown(ev); return false;//阻止浏览器默认事件
};
}; Drag.prototype.fnDown = function(ev){
var oEvent = ev||event;
var _this = this;
this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove = function(ev){
_this.fnMove(ev);
};
document.onmouseup = function(){
_this.fnUp();
};
} Drag.prototype.fnMove = function(ev){
var oEvent = ev||event;
this.oDiv.style.left = oEvent.clientX-this.disX + 'px';
this.oDiv.style.top = oEvent.clientY-this.disY + 'px';
} Drag.prototype.fnUp = function(){
document.onmousemove = null;
document.onmouseout = null;
} function LimitDrag(id){
Drag.call(this,id);//继承属性
} //继承方法
for(var v in Drag.prototype){
LimitDrag.prototype[v] = Drag.prototype[v];
} LimitDrag.prototype.fnMove = function(ev){//重写方法
var oEvent = ev||event;
var l = oEvent.clientX-this.disX;
var t = oEvent.clientY-this.disY; if(l<0){
l=0;
} else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) {
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
if(t<0){
t=0;
} else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){
t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
} this.oDiv.style.left = l + 'px';
this.oDiv.style.top = t + 'px'; }

javascript通用代码合集的更多相关文章

  1. 计算机视觉与模式识别代码合集第二版two

    Topic Name Reference code Image Segmentation Segmentation by Minimum Code Length AY Yang, J. Wright, ...

  2. 计算机视觉与模式识别代码合集第二版three

    计算机视觉与模式识别代码合集第二版three     Topic Name Reference code Optical Flow Horn and Schunck's Optical Flow   ...

  3. [ZZ] UIUC同学Jia-Bin Huang收集的计算机视觉代码合集

    UIUC同学Jia-Bin Huang收集的计算机视觉代码合集 http://blog.sina.com.cn/s/blog_4a1853330100zwgm.htmlv UIUC的Jia-Bin H ...

  4. WooCommerce代码合集整理

    本文整理了一些WooCommerce代码合集,方便查阅和使用,更是为了理清思路,提高自己.以下WooCommerce简称WC,代码放在主题的functions.php中即可. 修改首页和分类页面每页产 ...

  5. 【转载】GitHub 标星 1.2w+,超全 Python 常用代码合集,值得收藏!

    本文转自逆袭的二胖,作者二胖 今天给大家介绍一个由一个国外小哥用好几年时间维护的 Python 代码合集.简单来说就是,这个程序员小哥在几年前开始保存自己写过的 Python 代码,同时把一些自己比较 ...

  6. git常用代码合集

    git常用代码合集 1. Git init:初始化一个仓库 2. Git add 文件名称:添加文件到Git暂存区 3. Git commit -m “message”:将Git暂存区的代码提交到Gi ...

  7. JavaScript推荐资料合集(前端必看)

    这份合集覆盖了所有的JavaScript基本知识,从基本网络编程技巧,如变量.函数和循环语句,到高级一些的专题,如表单验证.DOM操作.客户端对象.脚本程序调试.学习前端的你不容错过! 资料名称 下载 ...

  8. 常用的js代码合集

    !function(util){ window.Utils = util(); }( function(){ //document_event_attributes var DEA = "d ...

  9. JavaScript常用API合集汇总(一)

    今天这篇文章跟大家分享一些JavaScript常用的API代码,有DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Con ...

随机推荐

  1. HTTP传输数据压缩

    一.基础 1.HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少网络传 ...

  2. OGNL取Map,List,Set的值

    用到的类有: 相应代码: public class Dog { private String name; public Dog(){ } public Dog(String name){ this.n ...

  3. Getway网关管理ZUUL

    1.ZUUL微服务网关 微服务架构体系中,通常一个业务系统会有很多的微服务,比如:OrderService.ProductService.UserService...,为了让调用更简单,一般会在这些服 ...

  4. Java 正则表达式 中的 任意字符

    原来正则表达式中的"."代表的是除换行以外的任意字符,如果要真正代表任意字符,需要把换行符也加进去,但是经过测试"[.\\n]"不生效,可以使用"\\ ...

  5. FocusBI: 微软商业智能教程目录介绍(原创)

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...

  6. [PY3]——Python的函数

    Python函数总结图 1.调用 1.1 如何调用 1.1.1  函数名(传参) # 函数使用函数名来调用,函数名后紧跟一对小括号,小括号里传入函数定义时要求的参数 add(9,9) #9+9=18 ...

  7. vscode 安装插件,和相关配置

    安装插件,配置对应的用户设置,进行替换,实现插件功能的生效 { // 控制是否在搜索中跟踪符号链接. "search.followSymlinks": false, "e ...

  8. [PHP] 从PHP 5.6.x 移植到 PHP 7.0.x不兼容点

    1.错误和异常处理 1.1 set_exception_handler()函数申明的类型 function handler($e){ var_dump($e); } set_exception_han ...

  9. 用户登录注册(安全)(常规、FB、google、paypal) 实战

    /* 用户登录界面 */elseif ($action == 'login'){    if($_SESSION['user_id'])    {        ecs_header("Lo ...

  10. [LeetCode]Generate Parentheses题解

    Generate Parentheses: Given n pairs of parentheses, write a function to generate all combinations of ...