跨浏览器添加事件
//跨浏览器添加事件
function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }
跨浏览器移除事件
//跨浏览器移除事件 function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); } } 跨浏览器阻止默认行为 //跨浏览器阻止默认行为 function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } } 跨浏览器获取目标对象 //跨浏览器获取目标对象 function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; } } 跨浏览器获取滚动条位置 //跨浏览器获取滚动条位置，sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.body.scrollLeft; } } 跨浏览器获取可视窗口大小 //跨浏览器获取可视窗口大小 function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } }, js 对象冒充

js 异步加载和同步加载 异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。 在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了： (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); 同步加载 　　平常默认用的都是同步加载。如： ? 1

　　同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。 　　通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。 　　同步加载流程是瀑布模型，异步加载流程是并发模型。 js获取屏幕坐标

获取鼠标坐标

X:
Y:
注释： 1.documentElement 属性可返回文档的根节点。 2.scrollTop() 为滚动条向下移动的距离 3.document.documentElement.scrollTop 指的是滚动条的垂直坐标 4.document.documentElement.clientHeight 指的是浏览器可见区域高度 -------------------------------------------------------------------------------- DTD已声明的情况下： ? 1

如果在页面中添加这行标记的话 IE document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Firefox document.documentElement.scrollHeight ==> 浏览器所有内容高度 document.body.scrollHeight ==> 浏览器所有内容高度 document.documentElement.scrollTop ==> 浏览器滚动部分高度 document.body.scrollTop ==>始终为0 document.documentElement.clientHeight ==>浏览器可视部分高度 document.body.clientHeight ==> 浏览器所有内容高度 Chrome document.documentElement.scrollHeight ==> 浏览器所有内容高度 document.body.scrollHeight ==> 浏览器所有内容高度 document.documentElement.scrollTop==> 始终为0 document.body.scrollTop==>浏览器滚动部分高度 document.documentElement.clientHeight ==> 浏览器可视部分高度 document.body.clientHeight ==> 浏览器所有内容高度 浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和 浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。 综上 1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop 2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body clientHeight 在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。 PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化. 可是悲剧的是,PageX只有FF特有,IE则没有这个，所以在IE下使用这个： PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) scrollTop代表的是被浏览器滑动条滚过的长度 offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值 只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了. 最给力的是，chrome和safari一条龙通杀!完全支持所有属性 js拖拽效果 <!doctype html>

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 js获取图片原始大小尺寸 var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("") // Make in memory copy of image to avoid css issues .attr("src", $(img).attr("src")) .load(function() { pic_real_width = this.width; // Note: $(this).width() will not pic_real_height = this.height; // work for in memory images. }); js循环遍历数组

遍历二维数组

阻止表单重复提交 有两种方法可以解决：一是提交之后，立刻禁用点击按钮；第二种就是提交之后取消后续的表单提交操作。 document.getElementById("btn").disabled = true;//第一次提交后，将按钮禁用 这种方式只能用于通过提交按钮防止重复提交，还可以使用如下方式： var flag = false;//设置一个监听变量 if(flag ==true)return;//退出事件 flag = true;//表示提交过一次了 字符串部分 在字符串中查找子字符串

Number和Math部分 数字可以是一个直接量，也可以是一个对象，但是Math对象不同，他没有构造函数，并且其所有的属性和方法都是直接通过这个对象来访问的 把十进制转化为一个十六进制值 var num = 255; console.log(num.toString(16));//ff js中，十进制数字以0x开头，八进制数字总是以0开头 随进产生颜色

目前，所有浏览器都支持RGB表示法和十六进制表示法，除了IE7，它只支持十六进制表示法 在角度和弧度之间转换 var rad = degrees*(Math.PI/180); var degrees = rad*(180/Math.PI); 数组部分 创建多维数组

排序数组

Array对象的sort方法会按照字母顺序来排序数组元素。对于数字，是按照字符编码的顺序进行排序 function compare(a,b){ return a-b; } var num = [32,43,2,5,-23,0,4]; console.log(num.sort(compare));//Array [ -23, 0, 2, 4, 5, 32, 43 ] Date日期时间部分 js计算时间差 var date1=new Date(); //开始时间，当前时间 var date2=new Date(); //结束时间，需传入时间参数 var date3=date2.getTime()-date1.getTime(); //时间差的毫秒数 //计算出相差天数 var days=Math.floor(date3/(24*3600*1000)); //计算出小时数 var leave1=date3%(24*3600*1000); //计算天数后剩余的毫秒数 var hours=Math.floor(leave1/(3600*1000)); //计算相差分钟数 var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数 var minutes=Math.floor(leave2/(60*1000)); //计算相差秒数 var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数 var seconds=Math.round(leave3/1000); console.log(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒"); 正则部分 js实现千分位分隔

js判断传入参数是否为质数 function fn(input) { input = parseInt(input,10); return isPrime(input) ? 'is prime' : 'not prime'; } function isPrime(input) { if (input ) { return false; } else { for (var i = 2; i <= Math.sqrt(input); i++) { if (input % i == 0) { return false; } } } return true; } js判断字符串出现最多的字符，并统计次数 //js实现一个函数，来判断一个字符串出现次数最多的字符，并统计这个次数 function countStr(str){ var obj = {}; for(var i = 0, l = str.length,k; i < l ;i++){ k = str.charAt(i); if(obj[k]){ obj[k]++; }else{ obj[k] = 1; } } var m = 0,i=null; for(var k in obj){ if(obj[k] > m){ m = obj[k]; i = k; } } return i + ':' + m; } 以上内容是

日常收集整理些js经典实例的更多相关文章

  1. 原生JS研究：学习jquery源码，收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  2. JavaScript 经典实例日常收集整理(常用经典)

    作者:阿讯小飞 原文来自:脚本之家 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj. ...

  3. Js经典实例收集

    跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(t ...

  4. Java知识日常收集整理001Java获取变量的数据类型的实现方法

    一.具体情况区分 对于简单类型变量,是无法直接获得变量类型的:要想获取,必须自定义函数进行返回. 对于包装类型变量,是可以直接获得的,变量名称.getClass().getName(); 二.代码实现 ...

  5. JS练习实例--编写经典小游戏俄罗斯方块

    最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...

  6. 【前端】Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  7. Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  8. Vue.js经典开源项目汇总-前端参考资源

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  9. 【Android源代码下载】收集整理android界面UI效果源码

    在Android开发中,Android界面UI效果设计一直都是很多童鞋关注的问题,今天给大家分享下大神收集整理的多个android界面UI效果,都是源码,都是干货,贡献给各位网友! 话不多说,直接上效 ...

随机推荐

  1. Initialization of bean failed; nested exception is java.lang.IllegalArgumentException: Pointcut is not well-formed: expecting 'name pattern' at character position 36

    例: <aop:config> <aop:pointcut expression="execution(* com.zsn.Service.Impl.*.*(..))&qu ...

  2. #Python编程从入门到实践#第三章笔记

      列表简介 ​​​1.什么是列表 列表:由一系列按也顶顺序排列的元素组成.元素之间可以没有任何关系. 列表:用方括号[]表示,并用逗号分隔其中元素.名称一般为复数 2.访问元素 (1)列表是有序集合 ...

  3. python-1基础总结

    输入  >>> name = input() 1--如果字符串里面有很多字符都需要转义,就需要加很多\,为了简化,Python还允许用r''表示''内部的字符串默认不转义,可以自己试 ...

  4. CONDENSE命令により、文字列から冗長スペースが削除

    CONDENSE 命令により.文字列から冗長スペースが削除されます. CONDENSE c [NO-GAPS]. この命令により.項目 c に先行空白が含まれる場合は削除され.その他の空白列がある場合 ...

  5. 基于HDP版本的YDB安装部署（转）

    第三章 YDB依赖环境准备 一.硬件环境 硬件如何搭配,能做到比较高的性价比,不存在短板.合理的硬件搭配,对系统的稳定性也很关键. 1.CPU不是核数越高越好,性价比才是关键. 经常遇到很多的企业级客 ...

  6. ionic3中关于Ionic ui component使用的一些总结

    在我的理解中,IONIC中例如 ion-list ion-item  ion-input 其实就是相于一段自定义的指令 ,相对于angular1.x中的东西, 所以,我们在使用中,要特别去注意butt ...

  7. 斐波那契数列（递归）&求100以内的素数

    Java 5 添加了 java.util.Scanner 类,这是一个用于扫描输入文本的新的实用程序.它是以 前的 StringTokenizer 和 Matcher 类之间的某种结合.由于任何数据都 ...

  8. The Django Book

    The Django Book Table of contents 2.0, English -> Chinese Django book 2.0 的中文翻译. 最近更新 - 贡献者 方便自己也 ...

  9. javascript类式继承模式#2——借用构造函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Object Pascal中文手册 经典教程

    Object Pascal 参考手册 (Ver 0.1)ezdelphi@hotmail.com OverviewOverview(概述)Using object pascal(使用 object p ...