自己封装的js工具
// 封装函数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工具的更多相关文章
- 分享非常好用的前端分页js工具类 灵活 简单易懂
分享自己封装的前端分页js工具类 下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
- JsQuick--个人封装的Js库
JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...
- 免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作简易流量爬虫
前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- Lo-Dash – 替代 Underscore 的优秀 JS 工具库
前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...
- 创建优雅表格的8个js工具
当需要呈现数百个表的数据时,展示和可访问性扮演着至关重要的角色.在这种情况下,倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序.搜索.过滤和分页等功能,那是棒棒哒.在这篇文章中, ...
- Redis操作Hash工具类封装,Redis工具类封装
Redis操作Hash工具类封装,Redis工具类封装 >>>>>>>>>>>>>>>>>> ...
- Redis操作字符串工具类封装,Redis工具类封装
Redis操作字符串工具类封装,Redis工具类封装 >>>>>>>>>>>>>>>>>>& ...
随机推荐
- vsftpd 配置文件
# mple config file /etc/vsftpd/vsftpd.conf # # The default compiled in settings are fairly paranoid. ...
- ————————C语言中快速排序方法——————————————
在对浮点型排序是一定要用三木运算符(三目运算符内容下去自己看),因为如果也是用整形那样的减法的时候如果是两个十分相近的数字 可能返回一个小数(自己一会去试试),冉冉他cmp返回值是int(试试别的)因 ...
- 2、IO流的分类和IO流体系
- 转 Dockerfile 常用指令 - 每天5分钟玩转 Docker 容器技术(16)
是时候系统学习 Dockerfile 了. 下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档. FROM指定 base 镜像. MAINTAINER设置镜像的作者,可以是 ...
- iOS programming Delegation and Text Input
iOS programming Delegation and Text Input 1.1 Text Fields CGRect textFieldRect = CGRectMake(40, ...
- InChatter系统之客户端实现原理与阶段小结
InChatter客户端的开发可以说是目前系统的阶段性结尾了.很抱歉的是,这篇文章来的这么晚,迟到了这么久. 在客户端的开发主要针对两个方面: 消息的传输与处理 消息的UI交互处理 一.消息的传输与处 ...
- [转] 一个U盘病毒简单分析
(转自:一个U盘病毒简单分析 - 瑞星网 原文日期:2014.03.25) U盘这个移动存储设备由于体积小.容量大.便于携带等优点,给人们的存储数据带来了很大的便利.但正是由于这种便利,也给病毒有 ...
- 【译】x86程序员手册41-10.6 TLB(快表)测试
译注:本章基本未做翻译 10.6 TLB Testing TLB测试 The 80386 provides a mechanism for testing the Translation Lookas ...
- 浅谈kernel的结构图及生成过程-----(1)
当今,我们身边如此多的服务器,工作站都运行着linux,因此也有不少的朋友想了解linux内的核心机理.但是由于kernel过于庞大,以致让一些朋友望而却步.(我在大二的时候也有过此经历,当时看到一些 ...
- UI概念体系要素
结构.渲染.交互.数据. 要素.呈现.交互 1)UI(组成)要素:结构 2)布局: 3)渲染: 4)事件处理: 5)数据: