window.location.hash知識彙總

location是javascript裡邊管理位址列的內建物件，比如location.href就管理頁面的url，用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設定頁面的標籤值。比如http://domain/#admin的location.hash=”#admin”。利用這個屬性值可以做一個非常有意義的事情。

window.location.hash簡單應用

一、#的涵義

#代表網頁中的一個位置。其右面的字元，就是該位置的識別符號。比如，

　　http://www.example.com/index.html#print

就代表網頁index.html的print位置。瀏覽器讀取這個URL後，會自動將print位置滾動至可視區域。

為網頁位置指定識別符號，有兩個方法。一是使用錨點，比如<a name=”print”></a>，二是使用id屬性，比如<div id=”print” >。

二、HTTP請求不包括#

#是用來指導瀏覽器動作的，對伺服器端完全無用。所以，HTTP請求中不包括#。

比如，訪問下面的網址，

　　http://www.example.com/index.html#print

瀏覽器實際發出的請求是這樣的：

　　GET /index.html HTTP/1.1

　　Host: www.example.com

可以看到，只是請求index.html，根本沒有”#print”的部分。

三、#後的字元

在第一個#後面出現的任何字元，都會被瀏覽器解讀為位置識別符號。這意味著，這些字元都不會被髮送到伺服器端。

比如，下面URL的原意是指定一個顏色值：

　　http://www.example.com/?color=#fff

但是，瀏覽器實際發出的請求是：

　　GET /?color= HTTP/1.1

　　Host: www.example.com

可以看到，”#fff”被省略了。只有將#轉碼為%23，瀏覽器才會將其作為實義字元處理。也就是說，上面的網址應該被寫成：

　　http://example.com/?color=%23fff

四、改變#不觸發網頁過載

單單改變#後的部分，瀏覽器只會滾動到相應位置，不會重新載入網頁。

比如，從

　　http://www.example.com/index.html#location1

改成

　　http://www.example.com/index.html#location2

瀏覽器不會重新向伺服器請求index.html。

五、改變#會改變瀏覽器的訪問歷史

每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”後退”按鈕，就可以回到上一個位置。

這對於ajax應用程式特別有用，可以用不同的#值，表示不同的訪問狀態，然後向使用者給出可以訪問某個狀態的連結。

值得注意的是，上述規則對IE 6和IE 7不成立，它們不會因為#的改變而增加歷史記錄。

六、window.location.hash讀取#值

window.location.hash這個屬性可讀可寫。讀取時，可以用來判斷網頁狀態是否改變；寫入時，則會在不過載網頁的前提下，創造一條訪問歷史記錄。

七、onhashchange事件

這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8 、Firefox 3.6 、Chrome 5 、Safari 4.0 支援該事件。

它的使用方法有三種：

　　window.onhashchange = func;

　　<body onhashchange=”func();”>

　　window.addEventListener(“hashchange”, func, false);

對於不支援onhashchange的瀏覽器，可以用setInterval監控location.hash的變化。

八、Google抓取#的機制

預設情況下，Google的網路蜘蛛忽視URL的#部分。

但是，Google還規定，如果你希望Ajax生成的內容被瀏覽引擎讀取，那麼URL中可以使用”#!”，Google會自動將其後面的內容轉成查詢字串_escaped_fragment_的值。

比如，Google發現新版twitter的URL如下：

　　http://twitter.com/#!/username

就會自動抓取另一個URL：

　　http://twitter.com/?_escaped_fragment_=/username

通過這種機制，Google就可以索引動態的Ajax內容。

我們再來看有網友遇到這樣一個問題，如以下程式碼所示，每次點選頁面上的按鈕都將改變瀏覽器位址列中的值，這樣的話就可以欺騙到瀏覽器(並沒有向伺服器傳送新的請求)，使得它的“後退”和“前進”按鈕可以用。 

    現在的問題是，在ie6 和ff3下瀏覽器的值都改變了，但是只有在ff3下“前進”和“後退”可以用，在ie下這兩個都是灰色不可用的，請問為什麼呢？

程式碼如下

<html> 
<head> 
<script type="text/javascript"> 
//每次點選都會呼叫test()，它會改變url的值 
var i=0; 
function test(){   
window.location.hash=i; 
i  ;   
} 
</script> 
</head> 
<body> 
<input type="submit" value="xxxxxxxxxxxxx" onclick="test()"/> 
</body> 
</html> 

下面就講述一下hash結合ajax的使用，ajax每次取資料時頁面更新後瀏覽器並不產生歷史記錄，也就是說後退和前進按鈕失去應用的效用，這時可以結合hash和window.onhashchange來使用，注意ie6、7均不支援onhashchange，但可以用setInterval定期檢查hash的改變，或者onload中檢查的方法。

  具體實現：

<body>
<div id="div1"></div>
<input type="button" value="click" onclick="GetT()" /> 
</body>
</html>
<script type="text/javascript" src="js/AjaxHasPool.js">
</script>
<script type="text/javascript">
var ajax = new AjaxHasPool();
var method="get";
var url ="Handler.ashx";
var i = 1;
var obj = new Object();
function GetT()
{
document.getElementById("div1").innerHTML=i; 
ajax.Startup(null,url,method,ep);
}
function ep(xmlobj){
eval("obj['" i "']=" i ";");
location.hash="#" i;
i; 
}
window.onhashchange=function(){
var hashStr = location.hash.replace("#","");
if(typeof(eval("obj['" hashStr "']"))!="undefined") 
document.getElementById("div1").innerHTML=eval("obj['" hashStr "']"); 
}
</script>

1.AjaxHasPool是自己封裝的ajax類，其中的ajax.Startup()就是傳送ajax請求；
2.Object物件儲存歷史記錄，如果物件屬性為數字的話，要用obj[“1”]的方式來例項化，否者會違反命名規範。
3.在使用window.onhashchange檢測hash值獲取歷史資料。

您可能感興趣的文章:

window.location.hash 屬性使用說明利用location.hash實現跨域iframe自適應window.location.hash 使用說明location.hash儲存頁面狀態的技巧

資料來源: https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/273709/

將 Visual Studio Code 的編輯行設定高亮(Highlight)顯示

在使用 Visual Studio Code 時因為當前編輯行並不突顯, 感覺很費眼力，也容易使得眼睛疲勞，對眼睛的視力造成傷害。

找了很久，終於發現能夠突顯前編輯行的方法，就是使用增加擴充功能(Highlight Line)的安裝與設置參數，來改善這個惱人的困擾。

安裝設定的方法很容易如下: (看圖，照作即可)

Javascript 中 slice()、splice()、split() 易混淆指令解說

slice()

複製開始與結束點（結束點不算）中的內容

對象：
可操控Array及String

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

用法：
begin 為開始的索引值，負數代表從後面開始算起，-1為倒數第一個元素。
end 為結束的索引值，沒有填寫時則得到arr中的所有元素。
因為是做shallow copy，所以原值不改變。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var fruit1 = fruits.slice(1);
var fruit2 = fruits.slice(1, 3);
var fruit3 = fruits.slice(-3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// fruit1 contains ['Orange', 'Lemon', 'Apple', 'Mango']
// fruit2 contains ['Orange', 'Lemon']
// fruit3 contains ["Lemon", "Apple", "Mango"]

splice()

從Array中添加/刪除項目，回傳被刪除的項目。

對象：
可操控Array

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

用法：
start 增加/刪除項目的位置，負數代表從後方算起。
deleteCount 刪除的個數，如為0則不會刪除。
item… 添加的新項目。
會改變原值

var myFish1 = ['angel', 'clown', 'drum', 'sturgeon'];
var removed1 = myFish1.splice(2, 1, 'trumpet');

// myFish1 is ["angel", "clown", "trumpet", "sturgeon"]
// removed1 is ["drum"]

var myFish2 = ['angel', 'clown', 'drum', 'sturgeon'];
var removed2 = myFish2.splice(-2, 2, 'trumpet');

// myFish2 is ["angel", "clown", "trumpet"]
// removed2 is ["drum", "sturgeon"]

split()

分割字串成字串組

對象：
可操控String

stringObject.split(separator,howmany)

用法：
separator 字串符或正則表達式，從該參數指定的地方分割stringObject。
howmany 返回值的最大長度，超過該長度則不顯示。
不改變原值

var str="How are you ?"
var splits1 = str.split(" ");
var splits2 = str.split("");
var splits3 = str.split(" ",3);

//splits1 contains ["How", "are", "you", "?"]
//splits2 contains ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "?"]
//splits3 contains ["How", "are", "you"]

Angular 物件陣列的操作參考範例

getIntersection(a: any[], b: any[], key: string)
取回二個物件陣列的交集

getCombineAndCanRepeating(a: any[], b: any[])
取回二個物件陣列的 無條件 合併結果

getCombineAndNonRepeating(a: any[], b: any[], key: string)
取回二個物件陣列的 關鍵值不重複 合併結果

Sort(data: any[], sortBy: string, fieldName?: string)
排序

  ngOnInit() {

    var a = [{ sn: 1, no: '1', name: 'name1' }, { sn: 2, no: '2', name: 'name2' }, { sn: 3, no: '3', name: 'name3' }, { sn: 4, no: '4', name: 'name4' }];

    var b = [{ sn: 4, no: '4', name: 'name4' }, { sn: 5, no: '5', name: 'name5' }, { sn: 3, no: '3', name: 'name3' }];

    const r1 = this.getIntersection(a, b, 'no');

    const r2 = this.getCombineAndNonRepeating(a, b, 'no');

    const r3 = this.getCombineAndCanRepeating(a, b);    

    const r4 = this.Sort(r3, 'up', 'no');    

    console.log(r1);

    console.log(r2);

    console.log(r3);

    console.log(r4);

  }

  // 取回二個物件陣列的交集

  getIntersection(a: any[], b: any[], key: string) {

    var ret: any[] = [];

    a.map(

      av => {

        b.map(

          bv => {

            if (av[key] == bv[key]) {

              ret.push(av)

            }

          })

      });

    return ret;

  }

  // 取回二個物件陣列的 無條件 合併結果

  getCombineAndCanRepeating(a: any[], b: any[]) {

    var ret: any[] = [];

    a.map(

      av => {

          ret.push(av);

      });

    b.map(

      bv => {

          ret.push(bv);

      });

      return ret;

  }

  // 取回二個物件陣列的 關鍵值不重複 合併結果

  getCombineAndNonRepeating(a: any[], b: any[], key: string) {

    var ret: any[] = [];

    a.map(

      av => {

        if (!ret.find(a => a[key]==av[key])){

          ret.push(av);

        }

      });

    b.map(

      bv => {

        if (!ret.find(b => b[key]==bv[key])){

          ret.push(bv);

        }

      });

      return ret;

  }

    // 排序

    // data: any[] 待排序的陣列資料

    // sortBy: string , 排序方式 up: 升冪 ,down: 降冪

    // fieldName?: string , 

    //      如果陣列是 Object 資料型態時, 用於指定欲排序的資料欄位名稱

    //      Object 資料型態以外的陣列是無效的

    Sort(data: any[], sortBy: string, fieldName?: string): any[] {

        let ret;

        switch (this.getArrayDataType(data, 0)) {

            case 'number':

                ret = (this.SortNumberArray(data, sortBy));

                break;

            case 'string':

                ret = (this.SortStringArray(data, sortBy));

                break;

            case 'object':

                ret = (this.SortObjectArray(data, fieldName, sortBy));

                break;

            default:

                ret = data;

                break;

        }

        return ret.slice();

    }

    // 排序數值陣列

    // data: any[] 待排序的陣列資料

    // sortBy: string , 排序方式 up: 升冪 ,down: 降冪 

    private SortNumberArray(data: any[], sortBy: string): any[] {

        let ret;

        if (data.length <= 0)

            return data;

        switch (sortBy) {

            case 'up':

                ret = data.sort((n1, n2) => n1 - n2);

                break;

            case 'down':

                ret = data.sort((n1, n2) => n2 - n1);

                break;

            default:

                ret = data;

                break;

        }

        return ret;

    }

    // 排序字串陣列

    // data: any[] 待排序的陣列資料

    // sortBy: string , 排序方式 up: 升冪 ,down: 降冪 

    private SortStringArray(data: any[], sortBy: string): any[] {

        let ret;

        if (data.length <= 0)

            return data;

        switch (sortBy) {

            case 'up':

                ret = data.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);

                break;

            case 'down':

                ret = data.sort((a, b) => a < b ? 1 : a > b ? -1 : 0);

                break;

            default:

                ret = data;

                break;

        }

        return ret;

    }

    // 排序 Object 陣列

    // data: any[] 待排序的陣列資料

    // sortBy: string , 排序方式 up: 升冪 ,down: 降冪 

    // fieldName?: string , 

    //      如果陣列是 Object 資料型態時, 用於指定欲排序的資料欄位名稱

    private SortObjectArray(data: any[], fieldName: string, sortBy: string): any[] {

        let ret;

        if (data.length <= 0)

            return data;

        if (fieldName == undefined || fieldName == null || fieldName.trim()=='') {

            fieldName = Object.keys(data[0])[0];            

        }

        switch (sortBy) {

            case 'up':

                ret = data.sort((o1, o2) => o1[fieldName] < o2[fieldName] ? -1 : o1[fieldName] > o2[fieldName] ? 1 : 0);

                break;

            case 'down':

                ret = data.sort((o1, o2) => o1[fieldName] < o2[fieldName] ? 1 : o1[fieldName] > o2[fieldName] ? -1 : 0);

                break;

            default:

                ret = data;

                break;

        }

        return ret;

    }

    // 取得陣列資料的資料型態字串(以陣列的第一個資料元素為判定的依據,雖然這是不正確的作法)

    // data: any[] , 陣列資料    

    // index: number 陣列索引值, 由 0 開始    

    private getArrayDataType(data: any[], index: number): string {

        if (data.length < index)

            return null;

        return (typeof data[index]);

    }

jQuery 選擇器

• jQuery 語法
• jQuery 事件

選擇器允許您對元素組或單個元素進行操作。

jQuery 選擇器

在前面的章節中，我們展示了一些有關如何選取HTML 元素的實例。

關鍵點是學習jQuery 選擇器是如何準確地選取您希望應用效果的元素。

jQuery 元素選擇器和屬性選擇器允許您通過標籤名、屬性名或內容對HTML 元素進行選擇。

選擇器允許您對HTML 元素組或單個元素進行操作。

在HTML DOM 術語中：

選擇器允許您對DOM 元素組或單個DOM 節點進行操作。

jQuery 元素選擇器

jQuery 使用CSS 選擇器來選取HTML 元素。

$("p") 選取<p> 元素。

$("p.intro") 選取所有class="intro" 的<p> 元素。

$("p#demo") 選取所有id="demo" 的<p> 元素。

jQuery 屬性選擇器

jQuery 使用XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有href 屬性的元素。

$("[href='#']") 選取所有帶有href 值等於"#" 的元素。

$("[href!='#']") 選取所有帶有href 值不等於"#" 的元素。

$("[href$='.jpg']") 選取所有href 值以".jpg" 結尾的元素。

jQuery CSS 選擇器

jQuery CSS 選擇器可用於改變HTML 元素的CSS 屬性。

下面的例子把所有p 元素的背景顏色更改為紅色：

實例

$("p").css("background-color","re​​d");

親自試一試

更多的選擇器實例

語法	描述
$(this)	當前HTML 元素
$("p")	所有<p> 元素
$("p.intro")	所有class="intro" 的<p> 元素
$(".intro")	所有class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每個<ul> 的第一個<li> 元素
$("[href$='.jpg']")	所有帶有以".jpg" 結尾的屬性值的href 屬性
$("div#intro .head")	id="intro" 的<div> 元素中的所有class="head" 的元素

如需完整的參考手冊，請訪問我們的jQuery選擇器參考手冊。

---

資料來源: http://www.w3school.com.cn/jquery/jquery_selectors.asp

HTML DOM getElementById() 方法

HTML DOM Document 對象

定義和用法

getElementById() 方法可返回對擁有指定ID 的第一個對象的引用。

語法

document.getElementById(id)

說明

HTML DOM 定義了多種查找元素的方法，除了getElementById() 之外，還有getElementsByName() 和getElementsByTagName()。

不過，如果您需要查找文檔中的一個特定的元素，最有效的方法是getElementById()。

在操作文檔的一個特定的元素時，最好給該元素一個id 屬性，為它指定一個（在文檔中）唯一的名稱，然後就可以用該ID 查找想要的元素。

實例

例子 1

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x= document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

例子 2

getElementById() 是一個重要的方法，在DOM 程序設計中，它的使用非常常見。我們為您定義了一個工具函數，這樣您就可以通過一個較短的名字來使用getElementById() 方法了：

function id(x) {
  if (typeof x == "string") return document.getElementById(x) ;
  return x;
  }

上面這個函數接受元素ID 作為它們的參數。對於每個這樣的參數，您只要在使用前編寫x = id(x) 就可以了。

TIY

使用getElementById()

HTML DOM Document 對象

---

資料來源: http://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp