Web前端常用代碼筆記整理（01）

jas0n 發(fā)布于2019-08-21 10:42 / 1608人閱讀

摘要：第二段代碼如下修改就可以了改這一行其實(shí)你的本質(zhì)問題就在于誤認(rèn)為是數(shù)組對(duì)象，然而它是構(gòu)造函數(shù)。它繼承自構(gòu)造函數(shù)被執(zhí)行。故視為兩個(gè)字符串的拼接，結(jié)果為字符串，其長(zhǎng)度為。

1.[] 和 Array 調(diào)用 slice 方法引起的問題

問題表示：在某些場(chǎng)景下，需要將函數(shù)的 arguments 參數(shù)作為一個(gè)數(shù)組調(diào)用，但是 arguments 是一個(gè)奇異對(duì)象，所以試著將 arguments 轉(zhuǎn)化為一個(gè)數(shù)組；

function argToArr(){
    return [].slice.call(arguments, 0);
}
console.log(argToArr(1,2,3));    //[1,2,3]




function argToArr(){
        return Array.slice.call(arguments, 0);
    }
    console.log(argToArr(1,2,3));    //[]

問：這是為什么呢？
另外還有一個(gè)問題，是關(guān)于 Array 是怎么找到 slice 方法的？
Array 本身是沒有 slice 方法，它的方法在 Array.prototype 中，而我們?cè)谡{(diào)用 slice 方法的時(shí)候，如果在 Array 本身沒有找到 slice 方法的話，會(huì)通過它的原型鏈往上查找，而 Array.proto 并沒有指向 Array.prototype，而是指向 Function()，那么它是怎么找到 slice 方法的呢？

解釋：

第二段代碼報(bào)錯(cuò)是因?yàn)锳rray是構(gòu)造函數(shù)，不是對(duì)象，打開控制臺(tái)，輸入 typeof Array，結(jié)果是 function
你也說了slice()方法在其原型對(duì)象中，而[]就是Array的原型對(duì)象，在控制臺(tái)中輸入 Array.prototype，結(jié)果是[],所以第一段代碼可以順利執(zhí)行。

第二段代碼如下修改就可以了：

functionargToArr(){
    returnArray.prototype.slice.call(arguments, 0); // 改這一行
}
console.log(argToArr(1,2,3));

其實(shí)你的本質(zhì)問題就在于誤認(rèn)為Array是數(shù)組對(duì)象，然而它是構(gòu)造函數(shù)。

2.if條件語句相關(guān)

對(duì)于 if 語句括號(hào)里的表達(dá)式，ECMAScript 會(huì)自動(dòng)調(diào)用 Boolean()轉(zhuǎn)型函數(shù)將這個(gè)表達(dá)式的結(jié)果轉(zhuǎn)換成一個(gè)布爾值。如果值為 true，執(zhí)行后面的一條語句，否則不執(zhí)行。

3.arguments相關(guān)

通過arguments 對(duì)象的length屬性，來智能的判斷有多少參數(shù)，然后把參數(shù)進(jìn)行合理的應(yīng)用。
比如，要實(shí)現(xiàn)一個(gè)加法運(yùn)算，將所有傳進(jìn)來的數(shù)字累加，而數(shù)字的個(gè)數(shù)又不確定。

function box() {
        var sum = 0;
        if (arguments.length == 0) return sum; //如果沒有參數(shù)，退出
        for(var i = 0;i < arguments.length; i++) { //如果有，就累加
            sum = sum + arguments[i];
        }
        return sum; //返回累加結(jié)果
    }
    alert(box(5,9,12));

4.函數(shù)內(nèi)部屬性

函數(shù)內(nèi)部，有兩個(gè)特殊的對(duì)象：arguments 和 this。arguments 是一個(gè)類數(shù)組對(duì)象，包含著傳入函數(shù)中的所有參數(shù)，主要用途是保存函數(shù)參數(shù)。但這個(gè)對(duì)象還有一個(gè)名叫 callee 的屬性，該屬性是一個(gè)指針，指向擁有這個(gè) arguments 對(duì)象的函數(shù)。
對(duì)于階乘函數(shù)一般要用到遞歸算法，所以函數(shù)內(nèi)部一定會(huì)調(diào)用自身；如果函數(shù)名不改變是沒有問題的，但一旦改變函數(shù)名，內(nèi)部的自身調(diào)用需要逐一修改。為了解決這個(gè)問題，我們可以使用 arguments.callee 來代替。

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

5.event對(duì)象

直接接收 event 對(duì)象，是 W3C 的做法，IE 不支持，IE 自己定義了一個(gè) event 對(duì)象，直接在 window.event 獲取即可。

input.onclick = function (evt) {
    var e = evt || window.event; //實(shí)現(xiàn)跨瀏覽器兼容獲取 event 對(duì)象
    alert(e);
};

6.事件的目標(biāo)

W3C 中的 target 和 IE 中的 srcElement，都表示事件的目標(biāo)。

function getTarget(evt) {
    var e = evt || window.event;
    return e.target || e.srcElement; //兼容得到事件目標(biāo) DOM 對(duì)象
}
document.onclick = function (evt) {
    var target = getTarget(evt);
    alert(target);
};

7.阻止事件冒泡

在阻止冒泡的過程中，W3C 和 IE 采用的不同的方法，那么我們必須做一下兼容。

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

8.阻止事件默認(rèn)行為

function preDef(evt) {
    var e = evt || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

9.上下文菜單事件：contextmenu

當(dāng)我們右擊網(wǎng)頁(yè)的時(shí)候，會(huì)自動(dòng)出現(xiàn) windows 自帶的菜單。那么我們可以使用 contextmenu 事件來修改我們指定的菜單，但前提是把右擊的默認(rèn)行為取消掉。

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

10.js中的文檔模式-document.compatMode

文檔模式在開發(fā)中貌似很少用到，最常見的是就是在獲取頁(yè)面寬高的時(shí)候，比如文檔寬高，可見區(qū)域?qū)捀叩取?/p>

IE對(duì)盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對(duì)于盒模型的解釋和其他的標(biāo)準(zhǔn)瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認(rèn)又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當(dāng)前的文檔渲染方式。

document.compatMode正好派上用場(chǎng)，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。瀏覽器客戶區(qū)寬度是document.body.clientWidth;
CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟。瀏覽器客戶區(qū)寬度是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
　　　　　　}
　　　　}
　　}

11.跨瀏覽器獲取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];
    }
}

12.js動(dòng)態(tài)插入css相關(guān)styleSheets，insertRule，addRule，還有刪除樣式：deleteRule，removeRule

標(biāo)準(zhǔn)瀏覽器支持 insertRule， IE低版本則支持 addRule。

13.獲取頁(yè)面的寬高

window.innerWidth，window.innerHeight與document.documentElement.clientWidth，document.documentElement.clientHeight

注：用jquery獲取的頁(yè)面的寬度頁(yè)面不包括滾動(dòng)條的寬度的

window.innerWidth與window.innerHeight（IE9及以上，谷歌，火狐識(shí)別，寬高包含滾動(dòng)條的寬度）
document.documentElement.clientWidth與document.documentElement.clientHeight（IE，火狐，谷歌都能識(shí)別，寬高不包含滾動(dòng)條的寬度）
如果頁(yè)面沒有滾動(dòng)條:
window.innerWidth==document.documentElement.clientWidth，
window.innerHeight==document.documentElement.clientHeight（IE8及一下不識(shí)別window.innerHeight與window.innerWidth）

//跨瀏覽器獲取視口大小
function getInner() {
    if (typeof window.innerWidth != "undefined") { //IE8及以下undefined
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

14.使用localStorage存儲(chǔ)數(shù)據(jù)，存儲(chǔ)位置在哪里？

這個(gè)是瀏覽器隔離的，每個(gè)瀏覽器都會(huì)把localStorage存儲(chǔ)在自己的UserData中，如chrome一般就是

C:Users你的計(jì)算機(jī)名AppDataLocalGoogleChromeUser DataProfileLocal Storage
如果要在瀏覽器查看，打開調(diào)試工具，在application選項(xiàng)卡下可以查看。

15.js構(gòu)造對(duì)象問題

function Person {}
Person.prototype.test = function() {}

當(dāng)代碼 new Person(...) 執(zhí)行時(shí)：
一個(gè)新對(duì)象被創(chuàng)建。它繼承自Person.prototype.構(gòu)造函數(shù) Person 被執(zhí)行。執(zhí)行的時(shí)候，相應(yīng)的傳參會(huì)被傳入，同時(shí)上下文(this)會(huì)被指定為這個(gè)新實(shí)例。
new Person()與new Person這兩種寫法有相同的效果。
new Person 等同于 new Person(), 只能用在不傳遞任何參數(shù)的情況。

16.html5的拖拽，用了preventDefault防止彈出新頁(yè)面，ie有效，但在火狐下不管用？

sss //ps:不加紅顯示不了p標(biāo)簽。

解決方式：
在body設(shè)置ondrop

document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
}

問題地址：https://segmentfault.com/q/1010000004689615

17.使用ajaxfileupload.js進(jìn)行文件上傳，后臺(tái)成功執(zhí)行，前臺(tái)卻進(jìn)入error

問題描述：使用ajaxfileupload.js進(jìn)行文件上傳，后臺(tái)正確執(zhí)行，并返回了對(duì)應(yīng)的響應(yīng)值，但是前臺(tái)進(jìn)入error，返回值自動(dòng)加上了

標(biāo)簽
ajaxfileupload不支持響應(yīng)頭ContentType為application/json設(shè)置，不支持原因可能是為了瀏覽器兼容，因?yàn)閕e不支持application/json格式,另外firefox, chrome瀏覽器iframe在接收application/json格式的時(shí)候會(huì)自動(dòng)將其轉(zhuǎn)化為html格式，自動(dòng)在json數(shù)據(jù)前后加上
標(biāo)簽導(dǎo)致ajaxfileupload插件取json數(shù)據(jù)錯(cuò)誤
問題地址：https://segmentfault.com/q/1010000004292314
18.網(wǎng)頁(yè)中的背景圖怎樣讓他加載的更快？
描述：網(wǎng)頁(yè)中很多地方有背景圖，但網(wǎng)頁(yè)打開時(shí)，他才一點(diǎn)一點(diǎn)的顯示，怎樣讓它快速的顯示？在網(wǎng)頁(yè)制作過程中，怎樣優(yōu)化有圖片的地方？

用 jpeg，設(shè)置壓縮率
圖片切片，組合成一張大圖
用 CDN 加速

問題地址：https://segmentfault.com/q/1010000003847764
19.([] + {}).length ?
[] + {} 運(yùn)算，首先是調(diào)用對(duì)象的 valueOf 方法，如果返回一個(gè)基本類型，則以該基本類型參與運(yùn)算；否則調(diào)用 toString 方法，返回基本類型則參與運(yùn)算。
數(shù)組和對(duì)象的 valueOf（默認(rèn)）返回自身，因此不是基本類型，接著調(diào)用 toString，空數(shù)組返回空字符串，普通對(duì)象始終返回字符串 [object Object]。故視為兩個(gè)字符串的拼接，結(jié)果為字符串 [object Object]，其長(zhǎng)度為 15。
一個(gè)例外是 Date 的實(shí)例，其實(shí)例首先調(diào)用 toString ，接著才調(diào)用valueOf。
可以這樣驗(yàn)證：
([]).toString() // ""
({}).toString() // "[object Object]"
([]+{}) // "[object Object]"
問題地址：https://segmentfault.com/q/1010000003824450
20.js對(duì)Date對(duì)象的操作的問題
使用JavaScript生成一個(gè)倒數(shù)7天的數(shù)組。
比如今天是10月1號(hào)，生成的數(shù)組是["9月25號(hào)","9月26號(hào)","9月27號(hào)","9月28號(hào)","9月29號(hào)","9月30號(hào)","10月1號(hào)"]。
Date 的 setDate() 可以給 0 和負(fù)數(shù)作為參數(shù)，日期會(huì)自動(dòng)計(jì)算
var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

console.log(dates);
[Fri Sep 25 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),
 Sat Sep 26 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),
 Sun Sep 27 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),
 Mon Sep 28 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),
 Tue Sep 29 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),
 Wed Sep 30 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),
 Thu Oct 01 2015 09:58:23 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)]
如果要取得格式化后的日期
var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

dates = dates.map(function(d) {
    return (d.getMonth() + 1) + "月" + d.getDate() + "日";
});

console.log(dates);
結(jié)果：
["9月25日",
 "9月26日",
 "9月27日",
 "9月28日",
 "9月29日",
 "9月30日",
 "10月1日"]
問題地址：https://segmentfault.com/q/1010000003811778
21.用閉包保存狀態(tài)
和普通function執(zhí)行的時(shí)候傳參數(shù)一樣，自執(zhí)行的函數(shù)表達(dá)式也可以這么傳參，因?yàn)殚]包直接可以引用傳入的這些參數(shù)，利用這些被lock住的傳入?yún)?shù)，自執(zhí)行函數(shù)表達(dá)式可以有效地保存狀態(tài)。
// 這個(gè)代碼是錯(cuò)誤的，因?yàn)樽兞縤從來就沒背locked住
// 相反，當(dāng)循環(huán)執(zhí)行以后，我們?cè)邳c(diǎn)擊的時(shí)候i才獲得數(shù)值
// 因?yàn)檫@個(gè)時(shí)候i操真正獲得值
// 所以說無論點(diǎn)擊那個(gè)連接，最終顯示的都是I am link #10（如果有10個(gè)a元素的話）

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener("click", function (e) {
        e.preventDefault();
        alert("I am link #" + i);
    }, "false");

}

// 這個(gè)是可以用的，因?yàn)樗谧詧?zhí)行函數(shù)表達(dá)式閉包內(nèi)部
// i的值作為locked的索引存在，在循環(huán)執(zhí)行結(jié)束以后，盡管最后i的值變成了a元素總數(shù)（例如10）
// 但閉包內(nèi)部的lockedInIndex值是沒有改變，因?yàn)樗呀?jīng)執(zhí)行完畢了
// 所以當(dāng)點(diǎn)擊連接的時(shí)候，結(jié)果是正確的

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener("click", function (e) {
            e.preventDefault();
            alert("I am link #" + lockedInIndex);
        }, "false");

    })(i);

}

// 你也可以像下面這樣應(yīng)用，在處理函數(shù)那里使用自執(zhí)行函數(shù)表達(dá)式
// 而不是在addEventListener外部
// 但是相對(duì)來說，上面的代碼更具可讀性

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener("click", (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert("I am link #" + lockedInIndex);
        };
    })(i), "false");

}
22.各瀏覽器的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
23.向一個(gè)數(shù)組中插入元素
向數(shù)組結(jié)尾添加元素用push()很簡(jiǎn)單，但下面有一個(gè)更高效的方法：
例如：
var arr = [1,2,3,4,5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;
最快的為：
1.arr[arr.length] = 6; // 平均 5 632 856 ops/sec
2.arr.push(6); // 慢35.64%
 3.arr2 = arr.concat([6]); // 慢62.67%
向數(shù)組的頭部添加元素現(xiàn)在我們?cè)囍驍?shù)組的頭部添加元素：
var arr = [1,2,3,4,5];

arr.unshift(0);

[0].concat(arr);
注：這里有一些小區(qū)別，unshift操作的是原始數(shù)組，concat返回一個(gè)新數(shù)組
最快的為：

[0].concat(arr); // 平均6 032 573 ops/sec
arr.unshift(0); // 慢78.65%

向數(shù)組中間添加元素，使用splice可以簡(jiǎn)單的向數(shù)組中間添加元素，這也是最高效的方法：
var items = ["one", "two", "three", "four"];
items.splice(items.length / 2, 0, "hello");
參考地址：http://www.cnblogs.com/rubylouvre/p/5751564.html
24.360的渲染模式
360能選擇極速模式和兼容模式 但我想要像淘寶那樣

只能是極速模式,不能切換至兼容模式
網(wǎng)友的回復(fù)：我查了很多時(shí)間,只找到 默認(rèn)是極速模式渲染,但是這樣還是能夠切換的,我需要不能切換。
我在開發(fā)中也遇到過這個(gè)問題，就是當(dāng)我們的項(xiàng)目用IP訪問，用360查看默認(rèn)是兼容模式，盆友們是不是也遇見過呢？
問題地址：https://segmentfault.com/q/10...
25.純css 實(shí)現(xiàn)footer sticker
希望footer一直在頁(yè)面底部
html代碼：


    



footer

css代碼：
html, body,#sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;} 
#footer {
    margin-top:-41px;
    height: 40px; 
    width: 100%; 
    text-align: center;
    line-height: 40px;
    color: #ABA498;
    font-size: 12px;
    background: #fafafa;
    border-top:1px solid #E7E7E7;
}

原文地址：https://segmentfault.com/a/11...
26.js中的pixelTop屬性
style對(duì)象：
pixelLeft
pixelTop
pixelWidth
pixelHeight
返回以像素為單位的位置坐標(biāo)的數(shù)值,非像素單位轉(zhuǎn)換為像素單位顯示。
left
top
width
height
返回帶單位的位置坐標(biāo)字符串
27.TweenMax.js用法總結(jié)
1.yoyo:Boolean -- YOYO球。另外一種循環(huán)的方式，像我們玩的YOYO球一樣，從頭到尾，再?gòu)奈驳筋^的往返運(yùn)動(dòng)，PS：要與repeat同時(shí)設(shè)置
2.repeat:int -- 循環(huán)次數(shù)。設(shè)置為-1為無限循環(huán)
28.window.location屬性
window.location 對(duì)象所包含的屬性


屬性
描述



hash
從井號(hào) (#) 開始的 URL（錨）


host
主機(jī)名和當(dāng)前 URL 的端口號(hào)


hostname
當(dāng)前 URL 的主機(jī)名


href
完整的 URL


pathname
當(dāng)前 URL 的路徑部分


port
當(dāng)前 URL 的端口號(hào)


protocol
當(dāng)前 URL 的協(xié)議


search
從問號(hào) (?) 開始的 URL（查詢部分）



protocol 屬性是一個(gè)可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的協(xié)議。
語法：
location.protocol=path
實(shí)例：假設(shè)當(dāng)前的 URL 是: http://example.com:1234/test.htm#part2：

輸出：http:
29.正則表達(dá)式中的RegExp.$1
RegExp 是javascript中的一個(gè)內(nèi)置對(duì)象。為正則表達(dá)式。
RegExp.$1是RegExp的一個(gè)屬性,指的是與正則表達(dá)式匹配的第一個(gè)子匹配(以括號(hào)為標(biāo)志)字符串，以此類推，RegExp.2, RegExp.3, ..RegExp.$99總共可以有99個(gè)匹配。
例如：
var r= /^(d{4})-(d{1,2})-(d{1,2})$/; //正則表達(dá)式 匹配出生日期(簡(jiǎn)單匹配)    
r.exec("1985-10-15");
s1=RegExp.$1;
s2=RegExp.$2;
s3=RegExp.$3;
console.log(s1+" "+s2+" "+s3)//結(jié)果為1985 10 15
30.js中的Navigator對(duì)象
Navigator 對(duì)象包含有關(guān)瀏覽器的信息。
注釋：沒有應(yīng)用于 navigator 對(duì)象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對(duì)象。
Navigator 對(duì)象屬性：


屬性
描寫



appCodeName
返回瀏覽器的代碼名。


appMinorVersion
返回瀏覽器的次級(jí)版本。


appName
返回瀏覽器的名稱。


appVersion
返回瀏覽器的平臺(tái)和版本信息。


browserLanguage
返回當(dāng)前瀏覽器的語言。


cookieEnabled
返回指明瀏覽器中是否啟用 cookie 的布爾值。


cpuClass
返回瀏覽器系統(tǒng)的 CPU 等級(jí)。


onLine
返回指明系統(tǒng)是否處于脫機(jī)模式的布爾值。


platform
返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)。


systemLanguage
返回 OS 使用的默認(rèn)語言。


userAgent
返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。


userLanguage
返回 OS 的自然語言設(shè)置。



在谷歌瀏覽器中打印Navigator對(duì)象，如圖所示：

31.markdown語法經(jīng)常遺忘操作記錄
刪除線：~~ ~~包裹的文字會(huì)顯示刪除線 刪除線

屬性	描述
hash	從井號(hào) (#) 開始的 URL（錨）
host	主機(jī)名和當(dāng)前 URL 的端口號(hào)
hostname	當(dāng)前 URL 的主機(jī)名
href	完整的 URL
pathname	當(dāng)前 URL 的路徑部分
port	當(dāng)前 URL 的端口號(hào)
protocol	當(dāng)前 URL 的協(xié)議
search	從問號(hào) (?) 開始的 URL（查詢部分）

屬性	描寫
appCodeName	返回瀏覽器的代碼名。
appMinorVersion	返回瀏覽器的次級(jí)版本。
appName	返回瀏覽器的名稱。
appVersion	返回瀏覽器的平臺(tái)和版本信息。
browserLanguage	返回當(dāng)前瀏覽器的語言。
cookieEnabled	返回指明瀏覽器中是否啟用 cookie 的布爾值。
cpuClass	返回瀏覽器系統(tǒng)的 CPU 等級(jí)。
onLine	返回指明系統(tǒng)是否處于脫機(jī)模式的布爾值。
platform	返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)。
systemLanguage	返回 OS 使用的默認(rèn)語言。
userAgent	返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。
userLanguage	返回 OS 的自然語言設(shè)置。