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 的天然語言設置。