WEB前端经常使用JavaScript代码整理

时间 2019-11-08

标签 web 前端经常使用 javascript 代码整理栏目 HTML 繁體版

原文原文链接

文章目录javascript

html代码用JS动态加载进页面

<script type="text/html" id="T-pcList"> //这里面是你要放的html代码，例如放一个div的内容 </script>

把上面的js动态加入到页面中

$(function(){ var s=$("#T-pcList").html();//得到js的html内容 $(".picScroll-left .bd").html(s);//把s的内容放到class为bd内 thisstyle();//执行某个函数 });

JS判断用户访问的是PC仍是mobile或者微信浏览器

var browser = {
    versions:function(){ var u = navigator.userAgent.toLowerCase(); return { trident: u.indexOf('trident') > -1, presto: u.indexOf('presto') > -1, isChrome: u.indexOf("chrome") > -1 && u.indexOf("safari") > -1 && !(u.indexOf("qqbrowser") > -1), qqbrowser: u.indexOf("qqbrowser") > -1, isFirefox: u.indexOf('firefox') > -1, isSafari: !(u.indexOf("chrome") > -1) && (/webkit|khtml/).test(u) && u.indexOf('safari') > -1, webKit: u.indexOf('applewebkit') > -1, gecko: u.indexOf('gecko') > -1 && u.indexOf('khtml') == -1, mobile: !!u.match(/applewebkit.*mobile.*/), ios: !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/), android: u.indexOf('android') > -1 || u.indexOf('linux') > -1, iPhone: u.indexOf('iphone') > -1, iPad: u.indexOf('ipad') > -1, iWinPhone: u.indexOf('windows phone') > -1, isWeiXin:!!u.match(/MicroMessenger/i) } } } if(browser.versions.mobile || browser.versions.iWinPhone){ console.log('手机'); }else{ console.log('pc'); }

判断浏览器的简单有效方法

functiongetInternet(){    
    if(navigator.userAgent.indexOf("MSIE")>0) { return"MSIE"; //IE浏览器 } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return"Firefox"; //Firefox浏览器 } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return"Safari"; //Safan浏览器 } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return"Camino"; //Camino浏览器 } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return"Gecko"; //Gecko浏览器 } }

点击某个div区域以外，隐藏该div

$(document).bind("click",function(e){ var target = $(e.target); if(target.closest(".city_box,#city_select a.selected").length == 0){ $(".city_box").hide(); } })

更全的方式：

$(document).click(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代码 } }); /* Mark 1 的原理： 判断点击事件发生在区域外的条件是： 1. 点击事件的对象不是目标区域自己 2. 事件对象同时也不是目标区域的子元素 */

如何在手机上禁止浏览器的网页滚动

方法一：php

<body ontouchmove="event.preventDefault()" >

方法二：css

 <script type="text/javascript"> document.addEventListener('touchmove', function(event) { event.preventDefault(); }) </script>

改变type=file默认样式，"浏览"等字体

<input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value"> <input type="button" id="filebutton" value="" onclick="browsefile.click()"> <input type="textfield" id="filepath">

js使用console.`time`打印代码执行时间

用console.time和console.timeEnd中间代码执行时长来测试间隔时间。html

console.time('console'); console.log('test'); console.timeEnd('console');

js判断变量是否未定义的代码

通常若是变量经过var声明，可是并未初始化的时候，变量的值为undefined，而未定义的变量则须要经过 "typeof 变量"的形式来判断，不然会发生错误。
实际应用：
variable有的页面咱们不定义,但有的页面定义了，就能够须要这样的判断方法，没有定义的就不执行。前端

if("undefined" != typeof variable){ if(variable=="abc"){ console.log('成功'); } }

js动态建立css样式添加到head内

function addCSS(cssText){ var style = document.createElement('style'); var head = document.head || document.getElementsByTagName('head')[0]; style.type = 'text/css'; if(style.styleSheet){ //IE var func = function(){ try{ //防止IE中stylesheet数量超过限制而发生错误 style.styleSheet.cssText = cssText; }catch(e){ } } //若是当前styleSheet还不能用，则放到异步中则行 if(style.styleSheet.disabled){ setTimeout(func,10); }else{ func(); } }else{ //w3c //w3c浏览器中只要建立文本节点插入到style元素中就好了 var textNode = document.createTextNode(cssText); style.appendChild(textNode); } //把建立的style元素插入到head中 head.appendChild(style); } //使用 addCSS('#demo{ height: 30px; background:#f00;}');

在IE8以及其低版本浏览器下，IE独有属性styleSheet.cssText。因此通常的兼容简单写法：

var style = document.createElement('style'); style.type = "text/css"; if (style.styleSheet) { //IE style.styleSheet.cssText = '/*..css content here..*/'; } else { //w3c style.innerHTML = '/*..css content here..*/'; } document.getElementsByTagName('head')[0].appendChild(style);

form表单提交时设置编码格式

<form name="form" method="post" action="XXXX" accept-charset="utf-8" onsubmit="document.charset='utf-8';"> //内容 </form>

js 加入收藏代码

function addFavorite(title, url) { url = encodeURI(url); try { window.external.addFavorite(url, title); } catch (e) { try { window.sidebar.addPanel(title, url, ""); } catch (e) { alert("加入收藏失败,Ctrl+D进行添加"); } } } addFavorite(document.title,window.location);

打印方法：（整个页面 window.print()）

function Printpart(id_str)//id-str 内容中的id{ var el = document.getElementById(id_str); var iframe = document.createElement('IFRAME'); var doc = null; iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(iframe); doc = iframe.contentWindow.document; doc.write('<div>' + el.innerHTML + '</div>'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } }

参考地址：java

http://www.cnblogs.com/yeminglong/archive/2012/12/03/2799957.htmlnode

http://www.cnblogs.com/jikey/archive/2011/06/22/2087683.htmljquery

js强制手机页面横屏显示

<script> // Bind an event to window.orientationchange that, when the device is turned, // gets the orientation and displays it to on screen. $( window ).on( "orientationchange", function( event ) { //alert (event.orientation ) if (event.orientation=='portrait') { $('body').css('transform', 'rotate(90deg)'); } else { $('body').css('transform', 'rotate(0deg)'); } }); // You can also manually force this event to fire.  $( window ).orientationchange(); </script>

JS,Jquery获取各类屏幕的宽度和高度

Javascript:linux

文档可视区域宽： document.documentElement.clientWidth
文档可视区域高： document.documentElement.clientHeightandroid

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth(包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工做区高度： window.screen.availHeight
屏幕可用工做区宽度： window.screen.availWidth

JQuery:

$(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口文档对象宽度 alert($(document.body).width());//浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin })

jQuery取得select选择的文本与值

jquery获取select选择的文本与值
获取select ：
获取select 选中的 text :

$("#ddlregtype").find("option:selected").text();

获取select选中的 value:

$("#ddlregtype ").val();

获取select选中的索引:

$("#ddlregtype ").get(0).selectedindex;

设置select:
设置select 选中的索引：

$("#ddlregtype ").get(0).selectedindex=index;//index为索引值

设置select 选中的value：

$("#ddlregtype ").attr("value","normal“); $("#ddlregtype ").val("normal"); $("#ddlregtype ").get(0).value = value;

jquery得到select中option的索引实例

html代码：

<select class="select-green"> <option value="0">高级客户经理</option> <option value="1">中级客户经理</option> </select>

jquery代码：

$(".select-green").change(function(){ var _indx = $(this).get(0).selectedIndex; $(".selectall .selectCon").hide(); $(".selectall .selectCon").eq(_indx).fadeIn(); });

注：其中 $(t h i s) . g e t (0) 与$

jquery中带命名空间的事件(namespaced events)

带命名空间的事件(namespaced events)在jQuery 1.2就被加入了，可是没有几我的用。

举个例子

$('a').on('click', function() { // Handler 1 }); $('a').on('click', function() { // Handler 2 });

若是咱们想要移除第二个handler, 使用$(‘a’).off(‘click’)确会把两个handler都移除掉！

可是若是使用带命名空间的事件，就能够搞定：

$('a').on('click.namespace1', function() { //Handler 1 }); $('a').on('click.namespace2', function() { //Handler 2 });

使用以下代码移除：

$('a').off('click.namespace2');

jquery对文本框只读状态与可读状态的相互转化

  $('input').removeAttr('Readonly'); $('input').attr('Readonly','true');

js/jquery实现密码框输入聚焦，失焦问题

js实现方法：

html代码：

<input id="i_input" type="text" value='会员卡号/手机号' />

js代码：

window.onload = function(){ var oIpt = document.getElementById("i_input"); if(oIpt.value == "会员卡号/手机号"){ oIpt.style.color = "#888"; }else{ oIpt.style.color = "#000"; } oIpt.onfocus = function(){ if(this.value == "会员卡号/手机号"){ this.value=""; this.style.color = "#000"; this.type = "password"; }else{ this.style.color = "#000"; } }; oIpt.onblur = function(){ if(this.value == ""){ this.value="会员卡号/手机号"; this.style.color = "#888"; this.type = "text"; } }; }

jquery实现方法:
html代码：

<input type="text"class="oldpsw" id="showPwd"value="请输入您的注册密码"/> <input type="password" name="psw"class="oldpsw" id="password"value="" style="display:none;"/>

jquery代码：

$("#showPwd").focus(function(){ var text_value=$(this).val(); if (text_value =='请输入您的注册密码') { $("#showPwd").hide(); $("#password").show().focus(); } }); $("#password").blur(function(){ var text_value = $(this).val(); if (text_value == "") { $("#showPwd").show(); $("#password").hide(); } });

获取上传文件的大小

html代码：

<input type="file" id="filePath" onchange="getFileSize(this)"/>

js代码：

//兼容IE9低版本获取文件的大小 function getFileSize(obj){ var filesize; if(obj.files){ filesize = obj.files[0].size; }else{ try{ var path,fso; path = document.getElementById('filePath').value; fso = new ActiveXObject("Scripting.FileSystemObject"); filesize = fso.GetFile(path).size; } catch(e){ //在IE9及低版本浏览器，若是不允许ActiveX控件与页面交互，点击了否，就没法获取size console.log(e.message); //Automation 服务器不能建立对象 filesize = 'error'; //没法获取 } } return filesize; }

限制上传文件的类型

若是是高版本浏览器，通常在HTML代码中写就能实现，如：

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">

若是限制上传文件为图片类型，以下：

<input type="file" class="file" value="上传" accept="image/*"/>

可是在其它低版本浏览器就无论用了，须要js来判断。

html代码：

<input type="file" id="filePath" onchange="limitTypes()"/>

js代码：

/* 经过扩展名，检验文件格式。 *@parma filePath{string} 文件路径 *@parma acceptFormat{Array} 容许的文件类型 *@result 返回值{Boolen}：true or false */ function checkFormat(filePath,acceptFormat){ var resultBool= false, ex = filePath.substring(filePath.lastIndexOf('.') + 1); ex = ex.toLowerCase(); for(var i = 0; i < acceptFormat.length; i++){ 　　if(acceptFormat[i] == ex){ resultBool = true; break; 　　} } return resultBool; }; function limitTypes(){ var obj = document.getElementById('filePath'); var path = obj.value; var result = checkFormat(path,['bmp','jpg','jpeg','png']); if(!result){ alert('上传类型错误，请从新上传'); obj.value = ''; } }

随机产生lowwer - upper之间的随机数

function selectFrom(lower, upper) { var sum = upper - lower + 1; //总数-第一个数+1 return Math.floor(Math.random() * sum + lower); };

保留后端传递到前端页面的空格

var objt = {
        name:' aaaa 这是一个空格多的标签 这是一个空格多的标签' } objt.name = objt.name.replace(/\s/g,'&nbsp;'); console.log(objt.name);

用firebug查看结果：

为何Image对象的src属性要写在onload事件后面？

var image=new Image(); imgae.onload = funtion; imgae.src = 'url'

js内部是按顺序逐行执行的，能够认为是同步的
给imgae赋值src时，去加载图片这个过程是异步的，这个异步过程完成后，若是有onload，则执行onload

若是先赋值src，那么这个异步过程可能在你赋值onload以前就完成了（好比图片缓存，或者是js因为某些缘由被阻塞了），那么onload就不会执行
反之，js同步执行肯定onload赋值完成后才会赋值src,能够保证这个异步过程在onload赋值完成后才开始进行，也就保证了onload必定会被执行到

获取当前日期

var calculateDate = function(){ var date = newDate(); var weeks = ["日","一","二","三","四","五","六"]; return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日 星期"+weeks[date.getDay()]; } $(function(){ 　　$("#dateSpan").html(calculateDate()); })

时间倒计时（固定倒计时的结束时间）

functioncountdown(){
    var endtime = newDate("Jan 18, 2015 23:50:00"); var nowtime = newDate(); if (nowtime >= endtime) { document.getElementById("_lefttime").innerHTML = "倒计时间结束"; return; } var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); if (leftsecond < 0) { leftsecond = 0; } __d = parseInt(leftsecond / 3600 / 24); __h = parseInt((leftsecond / 3600) % 24); __m = parseInt((leftsecond / 60) % 60); __s = parseInt(leftsecond % 60); document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒"; } countdown(); setInterval(countdown, 1000);

10秒倒计时跳转

html代码：

<divid="showtimes"></div>

js代码：

//设定倒数秒数 var t = 10; //显示倒数秒数 functionshowTime(){ t -= 1; document.getElementById('showtimes').innerHTML= t; if(t==0){ location.href='error404.asp'; } //每秒执行一次,showTime() setTimeout("showTime()",1000); } //执行showTime() showTime();

每隔0.1s改变图片的路径

<divid="tt"><imgsrc="images/1.jpg"alt=""/></div>

js代码：

(function(){ functionchagesimagesrc(t){ document.getElementById("tt").childNodes[0].src="images/"+t+".jpg"; } setInterval(function(){ for(var i=0;i<2;i++){ setTimeout((function(t){ returnfunction(){ chagesimagesrc(t); } })(i+1),i*100) } },1000); })()

js获取某年某月的哪些天是周六和周日

<p id="text"></p>

 
<script type="text/javascript"> functiontime(y,m){ var tempTime = newDate(y,m,0); var time = newDate(); var saturday = newArray(); var sunday = newArray(); for(var i=1;i<=tempTime.getDate();i++){ time.setFullYear(y,m-1,i); var day = time.getDay(); if(day == 6){ saturday.push(i); }elseif(day == 0){ sunday.push(i); } } var text = y+"年"+m+"月份"+"<br />" +"周六："+saturday.toString()+"<br />" +"周日："+sunday.toString(); document.getElementById("text").innerHTML = text; } time(2014,7); </script>

函数内部属性arguments

函数内部，有两个特殊的对象：arguments 和 this。arguments 是一个类数组对象，包含着传入函数中的全部参数，主要用途是保存函数参数。但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。

对于阶乘函数通常要用到递归算法，因此函数内部必定会调用自身；若是函数名不改变是没有问题的，但一旦改变函数名，内部的自身调用须要逐一修改。为了解决这个问题，咱们可使用 arguments.callee 来代替。

function box(num) { if (num <= 1) { return 1; } else { return num * arguments.callee(num-1);//使用 callee 来执行自身 } }

经过arguments 对象的length属性，来智能的判断有多少参数，而后把参数进行合理的应用。

好比，要实现一个加法运算，将全部传进来的数字累加，而数字的个数又不肯定。

function box() { var sum = 0; if (arguments.length == 0) return sum; //若是没有参数，退出 for(var i = 0;i < arguments.length; i++) { //若是有，就累加 sum = sum + arguments[i]; } return sum; //返回累加结果 } alert(box(5,9,12));

if条件语句相关

对于 if 语句括号里的表达式，ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值。若是值为 true，执行后面的一条语句，不然不执行。

跨浏览器添加事件

//跨浏览器添加事件 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; } }

阻止事件冒泡

在阻止冒泡的过程当中，W3C 和 IE 采用的不一样的方法，那么咱们必须作一下兼容。

function stopPro(evt) { var e = evt || window.event; window.event ? e.cancelBubble = true : e.stopPropagation(); }

跨浏览器获取目标对象

//跨浏览器获取目标对象 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') { //IE8及如下undefined return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },

跨浏览器获取Style

function getStyle(element, attr) { if (typeof window.getComputedStyle != 'undefined') {//W3C return window.getComputedStyle(element, null)[attr]; } else if (typeof element.currentStyle != 'undeinfed') {//IE return element.currentStyle[attr]; } }

js 对象冒充

<script type = 'text/javascript'> function Person(name , age){ this.name = name ; this.age = age ; this.say = function (){ return "name : "+ this.name + " age: "+this.age ; } ; } var o = new Object() ;//能够简化为Object() Person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20 </script>

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); })();

同步加载

日常默认用的都是同步加载。如：

<script src="http://yourdomain.com/script.js"></script>

同步模式又称阻塞模式，会阻止流览器的后续处理。中止了后续的文件的解析，执行，如图像的渲染。浏览器之因此会采用同步模式，是由于加载的js文件中有对dom的操做，重定向，输出document等默认行为，因此同步才是最安全的。
一般会把要加载的js放到body结束标签以前，使得js可在页面最后加载，尽可能减小阻塞页面的渲染。这样能够先让页面显示出来。

同步加载流程是瀑布模型，异步加载流程是并发模型。

js获取屏幕坐标

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <meta name="auther" content="fq" /> <title>获取鼠标坐标</title> </head> <body> <script type="text/javascript"> function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('xxx').value = mousePos.x; document.getElementById('yyy').value = mousePos.y; } document.onmousemove = mouseMove; </script> X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> </body> </html>

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

DTD已声明的状况下：

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

若是在页面中添加这行标记的话

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 ==> 浏览器全部内容高度

浏览器全部内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度便可视顶端距离整个对象顶端的高度。

综上

一、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，因此能够用这两个的和来求scrollTop

二、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> <html lang="zn-CN"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> #login{ height: 100px; width: 100px; border: 1px solid black; position: relative; top:200px; left: 200px; background: red; } </style> </head> <body> <div id="login"></div> <script type="text/javascript"> var oDiv = document.getElementById("login"); oDiv.onmousedown = function(e){ var e = e || window.event;//window.event兼容IE,当事件发生时有效 var diffX = e.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离 var diffY = e.clientY - oDiv.offsetTop; document.onmousemove = function(e){ //需设为document对象才能做用于整个文档 var e = e||window.event; oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所选对象的边框到浏览器左侧距离  oDiv.style.top = e.clientY -diffY + 'px'; }; document.onmouseup = function(){ document.onmousemove = null;//清除鼠标释放时的对象移动方法  document.onmouseup = null; } } </script> </body> </html>

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

js实现insertAfter方法

DOM里还有一个insertBefore方法用于再节点前面附件内容，经过insertBefore和appendChild咱们能够实现本身的insertAfter函数：

// 'Target'是DOM里已经存在的元素 // 'Bullet'是要插入的新元素 function insertAfter(target, bullet) { target.nextSibling ? target.parentNode.insertBefore(bullet, target.nextSibling) : target.parentNode.appendChild(bullet); } // 使用了3目表达式: // 格式：条件?条件为true时的表达式：条件为false时的表达式

上面的函数首先检查target元素的同级下一个节点是否存在，若是存在就在该节点前面添加bullet节点，若是不存在，就说明target是最后一个节点了，直接在后面append新节点就能够了。DOM API没有给提供insertAfter是由于真的不必了——咱们能够本身建立。

上下文菜单事件：contextmenu

当咱们右击网页的时候，会自动出现 windows 自带的菜单。那么咱们可使用 contextmenu 事件来修改咱们指定的菜单，但前提是把右击的默认行为取消掉。

function addEvent(obj, type, fn) { //添加事件兼容 if (obj.addEventListener) { obj.addEventListener(type, fn); } else if (obj.attachEvent) { obj.attachEvent('on' + type, fn); } } function removeEvent(obj, type, fn) { //移除事件兼容 if (obj.removeEventListener) { ob j.removeEventListener(type, fn); } else if (obj.detachEvent) { obj.detachEvent('on' + type, fn); } } addEvent(window, 'load', function () { var text = document.getElementById('text'); addEvent(text, 'contextmenu', function (evt) { var e = evt || window.event; preDef(e); var menu = document.getElementById('menu'); menu.style.left = e.clientX + 'px'; menu.style.top = e.clientY + 'px'; menu.style.visibility = 'visible'; addEvent(document, 'click', function () { document.getElementById('myMenu').style.visibility = 'hidden'; }); }); });

JS中的文档模式-document.compatMode（老版本）

文档模式在开发中貌似不多用到，最多见的是就是在获取页面宽高的时候，好比文档宽高，可见区域宽高等。

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差异的，在Standards Mode下对于盒模型的解释和其余的标准浏览器是同样，但在Quirks Mode模式下则有很大差异，而在不声明Doctype的状况下，IE默认又是Quirks Mode。因此为兼容性考虑，咱们可能须要获取当前的文档渲染方式。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。

BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;

CSS1Compat：标准兼容模式开启。浏览器客户区宽度是document.documentElement.clientWidth。

例如：

function getViewport(){ 　　　　if (document.compatMode == "BackCompat"){ 　　　　　　return { 　　　　　　　　width: document.body.clientWidth, 　　　　　　　　height: document.body.clientHeight 　　　　　　} 　　　　} else { 　　　　　　return { 　　　　　　　　width: document.documentElement.clientWidth, 　　　　　　　　height: document.documentElement.clientHeight 　　　　　　} 　　　　} 　　}

求两个数的和并以二进制输出

var m=3; var n=5; var sum=m+n; var result = sum.toString(2); console.log(result); //1000

二进制输出：toString函数

JS中的"!!"的做用

该操做至关于Boolean()，即转化为布尔型。如：

!!0 == false; //true !!-1 == true; //true

这儿列举下其它类型转化为boolean型：

undefined =》 false
null =》 false
布尔值 =》不用转换
数字 =》 0，NaN转化成false，其余数字类型转换成true
字符串 =》只有空字符串''转换成false，其余都转换成true
对象 =》所有转换为true

JS replace()方法全局替换变量

简单替换字符：string.replace("a","b"); （把 a 替换成 b）
全局替换字符：string.replace(/a/g,"b");（全局把a替换成b）

可是若是是全局替换一个变量内容，以下,给一个电话号码中间加*号：

var phone = "15512345678"; var sliceNumber = phone.slice(3,phone.length - 3); var newPhone = phone.replace(new RegExp(sliceNumber,'g'),'****'); console.log(newPhone); //155****678

跨域的几种方式

首先了解下浏览器的同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。

那么怎样解决跨域问题的呢？

1 经过jsonp跨域
        1.）原生实现：
         <script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.....:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); } </script> 二、 document.domain + iframe跨域 此方案仅限主域相同，子域不一样的跨域应用场景。 1.）父窗口：(http://www.domain.com/a.html) <iframe id="iframe" src="http://child.domain.com/b.html"></iframe> <script> document.domain = 'domain.com'; var user = 'admin'; </script> 2.）子窗口：(http://child.domain.com/b.html) <script> document.domain = 'domain.com'; // 获取父窗口中变量 alert('get js data from parent ---> ' + window.parent.user); </script> 弊端：请看下面渲染加载优化 三、 nginx代理跨域 四、 nodejs中间件代理跨域 五、 后端在头部信息里面设置安全域名

更多跨域的具体内容请看《跨域详解》

纯前端JS读取与解析本地文本类文件

var reader = new FileReader(); reader.onload = function (event) { // event.target.result就是文件文本内容 // 而后你就能够随心所欲了 // 例如若是是JSON数据能够解析 // 若是是HTML数据，能够直接插入到页面中 // 甚至字幕文件，各类滤镜，自定义文件格式，均可以…… }; reader.readAsText(file);

详细参考地址：小tips: 纯前端JS读取与解析本地文本类文件

各浏览器的navigator.userAgent

IE11：Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E) IE9： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E) IE8： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E) 谷歌：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 火狐：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0 QQ浏：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Core/1.47.933.400 QQBrowser/9.4.8699.400 360js:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36 360jr:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E) safar:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

JS中的pixelTop属性

style对象：

pixelLeft
pixelTop
pixelWidth
pixelHeight

返回以像素为单位的位置坐标的数值,非像素单位转换为像素单位显示。

left
top
width
height

返回带单位的位置坐标字符串

TweenMax.js用法总结

1. yoyo:Boolean -- YOYO球。另一种循环的方式，像咱们玩的YOYO球同样，从头至尾，再从尾到头的往返运动，PS：要与repeat同时设置

repeat:int -- 循环次数。设置为-1为无限循环

window.location属性

window.location 对象所包含的属性

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

protocol 属性是一个可读可写的字符串，可设置或返回当前 URL 的协议。

语法：

location.protocol=path

实例：假设当前的 URL 是: http://example.com:1234/test.htm#part2：

<script type="text/javascript"> document.write(location.protocol); </script>

输出：http:

正则表达式中的RegExp.$1

RegExp 是javascript中的一个内置对象。为正则表达式。
RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个子匹配(以括号为标志)字符串，以此类推，RegExp.2, RegExp.3,

例如：

var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配) r.exec('1985-10-15'); s1=RegExp.$1; s2=RegExp.$2; s3=RegExp.$3; console.log(s1+" "+s2+" "+s3)//结果为1985 10 15

JS中的Navigator对象

Navigator 对象包含有关浏览器的信息。

注释：没有应用于 navigator 对象的公开标准，不过全部浏览器都支持该对象。

Navigator 对象属性：

属性	描写
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
`appName`	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操做系统平台。
systemLanguage	返回 OS 使用的默认语言。
`userAgent`	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的天然语言设置。

在谷歌浏览器中打印Navigator对象，如图所示：

markdown语法常常遗忘操做记录

删除线：~~ ~~包裹的文字会显示删除线 ~~删除线~~

web经常使用状态码整理

200：OK 请求成功。通常用于GET与POST请求

204：No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的状况下，可确保浏览器继续显示当前文档

304：Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端一般会缓存访问过的资源，经过提供一个头信息指出客户端但愿只返回在指定日期以后修改的资源

400：Bad Request 客户端请求的语法错误，服务器没法理解

403：Forbidden 服务器理解请求客户端的请求，可是拒绝执行此请求

404：Not Found 服务器没法根据客户端的请求找到资源（网页）。经过此代码，网站设计人员可设置"您所请求的资源没法找到"的个性页面

github： https://github.com/hxlmqtily1314

WEB前端经常使用JavaScript代码整理

html代码用JS动态加载进页面

把上面的js动态加入到页面中

JS判断用户访问的是PC仍是mobile或者微信浏览器

判断浏览器的简单有效方法

点击某个div区域以外，隐藏该div

更全的方式：

如何在手机上禁止浏览器的网页滚动

改变type=file默认样式，"浏览"等字体

js使用console.time打印代码执行时间

js判断变量是否未定义的代码

js动态建立css样式添加到head内

在IE8以及其低版本浏览器下，IE独有属性styleSheet.cssText。因此通常的兼容简单写法：

form表单提交时设置编码格式

js 加入收藏代码

打印方法：（整个页面 window.print()）

js强制手机页面横屏显示

JS,Jquery获取各类屏幕的宽度和高度

JQuery:

jQuery取得select选择的文本与值

jquery中带命名空间的事件(namespaced events)

jquery对文本框只读状态与可读状态的相互转化

js/jquery实现密码框输入聚焦，失焦问题

获取上传文件的大小

限制上传文件的类型

随机产生lowwer - upper之间的随机数

保留后端传递到前端页面的空格

为何Image对象的src属性要写在onload事件后面？

获取当前日期

时间倒计时（固定倒计时的结束时间）

10秒倒计时跳转

每隔0.1s改变图片的路径

js获取某年某月的哪些天是周六和周日

函数内部属性arguments

if条件语句相关

跨浏览器添加事件

跨浏览器移除事件

跨浏览器阻止默认行为

阻止事件冒泡

跨浏览器获取目标对象

跨浏览器获取滚动条位置

跨浏览器获取可视窗口大小

跨浏览器获取Style

js 对象冒充

js 异步加载和同步加载

js获取屏幕坐标

IE

Firefox

Chrome

PageX和clientX

js拖拽效果

js实现insertAfter方法

上下文菜单事件：contextmenu

JS中的文档模式-document.compatMode（老版本）

求两个数的和 并以二进制输出

JS中的"!!"的做用

JS replace()方法全局替换变量

跨域的几种方式

纯前端JS读取与解析本地文本类文件

各浏览器的navigator.userAgent

JS中的pixelTop属性

TweenMax.js用法总结

window.location属性

正则表达式中的RegExp.$1

JS中的Navigator对象

在谷歌浏览器中打印Navigator对象，如图所示：

markdown语法常常遗忘操做记录

web经常使用状态码整理

js使用console.`time`打印代码执行时间

求两个数的和并以二进制输出