跨浏览器添加事件
//跨浏览器添加事件
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. docker swarm使用keepalived+haproxy搭建基于percona-xtradb-cluster方案的高可用mysql集群

    一.部署环境 序号 hostname ip 备注 1 manager107 10.0.3.107 centos7;3.10.0-957.1.3.el7.x86_64 2 worker68 10.0.3 ...

  2. zip压缩工具，unzip解压缩工具

    zip压缩工具,unzip解压缩工具=================== [root@aminglinux tmp]# yum install -y zip[root@aminglinux tmp] ...

  3. php 利用composer引用第三方类库构建项目

    经常看到各种开源库推荐使用 composer 安装代码,却总是看不懂怎么用composer, 这几天静下心来学习了composer的使用,发现这可真是一个好东西,先贴上一个讲的很棒的视频教程: PHP ...

  4. laravel通过make auth实现手机号登录

    首先按照Laravel的教程,安装认证系统. php artisan make:auth php artisan migrate laravel已经安装完成认证系统,默认注册和登录都是用邮箱. 如果想 ...

  5. mysql的一些相关的命令（2013-05-05-bd 写的日志迁移

    cmd中连接:mysql -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样)断开:exit (回车) --建立数据库creata database 数据库名;--切换到数据库下工 ...

  6. linux学习（1）——这是一个新的开始，加油吧少年

     (一)自己简单总结 学会使用简单命令 Tab:实现自动补全功能 Ctrl+D:退出当前终端 Ctrl+Z:暂停当前进程 Ctrl+L:清屏 Ctrl+A:可以让光标移动到最前列 Ctrl+E:可以让 ...

  7. POJ 2836 状压DP

    Rectangular Covering Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2727   Accepted: 7 ...

  8. idea中用maven打包spring的java项目(非web)

    之前一直用安装的maven打包spring的javaweb项目,用的是mvn assembly:assembly打包,这次打包非web的spring项目,遇到许多问题,特记录一下正确步骤. 1.配置p ...

  9. 板载raid 安装Ubuntu 黑屏

    最近有碰到过产线反馈supermicro x10主板板载raid安装ubuntu桌面版 ,出现安装完成后黑屏,现象是能正常识别faker raid 但是第一次重启,就会出现黑屏,只有左上角广光标在闪, ...

  10. 孤荷凌寒自学python第五十九天尝试使用python来读访问远端MongoDb数据服务

    孤荷凌寒自学python第五十九天尝试使用python来读访问远端MongoDb数据服务 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第五天.今天的感觉是,mongoDB数 ...