// 封装函数insertAfter;功能类似insertBefore();

 var div = document.getElementsByTagName("div")[0];
var span = document.createElement("span");
var a = document.getElementsByTagName("a")[0];
div.appendChild(span); HTMLElement.prototype.insertAfter = function(tag, now){
if(now.nextSibling.nextSibling){
this.insertBefore(tag, now.nextSibling.nextSibling)
}else{
this.appendChild(tag)
} };
div.insertAfter(span, a); // 将目标节点内节点反转 var div = document.getElementsByTagName("div")[0];
HTMLElement.prototype.reverse = function () {
var len = this.children.length;
console.log(len);
while(len){
this.insertBefore(this.lastChild,this.firstChild);
len --;
}
}
div.reverse() // 获取窗口滚动条的兼容性方法
function getScrollOffset() {
if(window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
x : document.body.scrollTop + document.documentElement.scrollTop, }
}
} // 获取窗口尺寸的兼容性方法
function getViewportOffset() {
if(window.innerWidth){
return {
w : window.innerWidth,
w : window.innerHeight
}
}else{
if(documen.compatMode === "BackCompat"){
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else {
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
} //时间处理函数 function addEvent(elem, type, handle){//第一个标签,第二个类型,第三个函数
if(elem.addEventListener){
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent("on" + type, function () {
handle.call(elem);
})
}else{
elem["on" + type] = handle;
}
}

Tools

         // 封装兼容性获取样式
function getComputedStyle(elem,prop){
if (window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}

封装兼容性获取样式

     <script 描述="兼容性异步加载最终方式">
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){
script.onreadystatechange = function () {
if (script.readyState == "complete" || script.readyState == "loadded"){
//IE9以下的兼容
tools[callback]();//需要工具包js配合
// eval(callback);//eval 最好不要使用
}
}
}else{
//Safari chrome firefox opera 的兼容
script.onload = function () {
tools[callback]();//需要工具包js配合
// eval(callback);//eval 最好不要使用
}
}
script.src = url;
document.head.appendChild(script);
}
// 异步执行js包里面的函数,按需执行,也可以修改成return信号,确定是否加载完毕等功能
// loadScript(js包链接,执行的函数)
// 1.defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用,也可以将代码写到内部。
// 2.aysnc 异步加载,加载完就执行,async只能加载啊我i不脚本,不能把js写在script标签里,w3c标准,IE9以及其他主流浏览器都可以用
</script>

兼容性异步加载最终方式

自己封装的js工具的更多相关文章

  1. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  2. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  3. 免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作简易流量爬虫

    前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...

  4. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  5. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  6. Lo-Dash – 替代 Underscore 的优秀 JS 工具库

    前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...

  7. 创建优雅表格的8个js工具

    当需要呈现数百个表的数据时,展示和可访问性扮演着至关重要的角色.在这种情况下,倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序.搜索.过滤和分页等功能,那是棒棒哒.在这篇文章中, ...

  8. Redis操作Hash工具类封装,Redis工具类封装

    Redis操作Hash工具类封装,Redis工具类封装 >>>>>>>>>>>>>>>>>> ...

  9. Redis操作字符串工具类封装,Redis工具类封装

    Redis操作字符串工具类封装,Redis工具类封装 >>>>>>>>>>>>>>>>>>& ...

随机推荐

  1. P4575 [CQOI2013]图的逆变换

    传送门 如果新的图里存在边\((u,v)\),那么说明原图中\(u\)的终点和\(v\)的起点是同一个点 于是可以对新图中的每个点维护它的起点和终点,如果有一条边就把对应两个应该相等的点用并查集连起来 ...

  2. *关于TCP长连接,NAT超时,心跳包

    参考: http://www.jianshu.com/p/584707554ed7 1.TCP长连接 TCP连接建立后只要不明确关闭,逻辑上连接一直存在. TCP是有保活定时器的,可以打开保活定时器来 ...

  3. C#中的预编译指令介绍[转]

    原文链接 1.#define和#undef 用法: #define DEBUG #undef DEBUG #define告诉编译器,我定义了一个DEBUG的一个符号,他类似一个变量,但是它没有具体的值 ...

  4. 工厂方法模式及php实现

    工厂方法模式: 工厂方法模式(Factory Method Pattern)又称为工厂模式,也叫虚拟构造器(Virtual Constructor)模式或者多态工厂(Polymorphic Facto ...

  5. WPF 实时绘图的逻辑

    实时绘图实际上是两个线程.外部线程直接用thread,只有到绘图那个逻辑才用绘图控件的mycanvas2.Dispatcher.Invoke. 或者说,INVOKE并不是开线程,只是一个绘图的委托而已 ...

  6. 使用Glide加载Android图片

    一.概述 Glide是一个在Android端非常好的图片缓冲工具,总体上来说,他有以下优点 使用简单 自适应程度高 支持常见的图片格式,如jpg,png等 支持多种数据源,网络,本地,资源,Asset ...

  7. 在action中将字符串、对象、list集合保存到值栈中,在jsp页面中获取的方法

    转自:csdn 封装对象User,属性有id,username,email等1.1:在action中将字符串保存到值栈中   1.1.1 获取值栈对象         ValueStack stack ...

  8. Visual SVN自动给文件加锁

    在使用SVN作为版本控制器的时候,在VS里安装VISUALSVN插件,当修改文件公共文件的时候需要先Get Lock,如果对于多次操作这个鼠标操作显得是一些复杂,自动给文件加锁的操作实际是给文件加一个 ...

  9. R Programming week 3-Debugging

    Something’s Wrong! Indications that something’s not right message: A generic notification/diagnostic ...

  10. Activity的四种启动模式区别

    (1) standard 模式启动模式,每次激活Activity时都会创建Activity,并放入任务栈中. (2) singleTop 如果在任务的栈顶正好存在该Activity的实例, 就重用该实 ...