WEB前端常用JavaScript代碼整理

相關內容簡體繁體

WEB前端常用JavaScript代碼整理

本文轉載自查看原文 2018-11-11 19:54 1277 1.3.JavaScript/ 1.0.前端基礎/ js/ html

文章目錄

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. 事件對象同時也不是目標區域的子元素 */

如何在手機上禁止瀏覽器的網頁滾動

方法一：

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

方法二：

 <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中間代碼執行時長來測試間隔時間。

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

參考地址：

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

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

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:

文檔可視區域寬： document.documentElement.clientWidth
文檔可視區域高： document.documentElement.clientHeight

網頁可見區域寬： 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 ==> 瀏覽器所有內容高度

瀏覽器所有內容高度即瀏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和

瀏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。

綜上

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> <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> 2、 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> 弊端：請看下面渲染加載優化 3、 nginx代理跨域 4、 nodejs中間件代理跨域 5、 后端在頭部信息里面設置安全域名

更多跨域的具體內容請看《跨域詳解》

純前端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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [總結]web前端常用JavaScript代碼段及知識點集錦 Web前端開發工程師常用技術網站整理 JavaScript 常用單詞整理 JavaScript 常用單詞整理 Web前端——JavaScript練習 JavaScript常用單詞整理總結 Web前端代碼規范 web前端如何優化自己的代碼 PyTorch 常用代碼段整理《web前端設計基礎——HTML5、CSS3、JavaScript》張樹明版簡答題簡單整理