從零開始學_JavaScript_系列（12）——jquery<2>（高度自适應，哈希位址及檢測，單頁面技術）

前注：我在練習的時候，函數命名比較随意，以修改起來簡單的簡短無意義函數名為主，實際使用時，請使用更易閱讀、規範的命名方式

（ps：這篇算是上周的）

（26）讓某塊随着浏覽器的高度變化而自動變化

假設該塊的标簽名為section

于是：

效果：

①初始時自适應；

②浏覽器高度變化時自适應。

③假如需要根據id來選擇，更改$("section")即可。

④m-100是因為該塊的上部有一個高度為100px的塊。

(27)按鈕和标簽綁定（按順序綁定）觸發事件

前提：

假設有5個按鈕，有5個事件。按鈕的類名相同，事件的類名相同。按第一個按鈕觸發第一個事件，依次類推。

代碼：

（28）初始不指派src屬性，後續觸發事件時加載

适用範圍：給标簽添加src屬性、單頁面結構

思路：

①首先，我們需要獲得一個src的連結位址；

②某一個标簽（例如iframe）需要使用這個連結（但不是即時使用，比如在點選某個按鈕時使用）；

③我們通過javascript的class選擇器（或者類似的），擷取其标簽（document.getElementsByClassName(xxxxx)），然後給标簽添加一個value屬性（即使該标簽本身沒有value屬性），用于在使用該src位址之前，儲存該連結位址；

④當觸發事件時，将value屬性指派給src屬性，即可。

代碼：（使用了jquery庫）

解釋：

①第一個函數用于模拟：當文檔加載完畢後，給标簽指派（或者是觸發事件，添加了該标簽後指派）；需要注意的是，标簽個數是不确定的，确定的是，在導入标簽時，一個iframe标簽對應一個src位址和一個按鈕；

②由于需要在按鈕點選時，才觸發事件，賦給對應的iframe标簽src值。是以，首先要确定點選的是哪個按鈕，然後找到該按鈕對應的iframe标簽；（就是第二個函數的a變量的值表示是第a+1個按鈕/标簽，

③然後确定該标簽目前的src值，通過.indexOf()和value值進行比對。

如果不比對（傳回值-1），那麼将value值賦給該src（即加載連結位址，注意，其他的是沒有被加載的）；

如果比對（傳回值大于0），那麼跳過。

④于是實作了在觸發事件才加載連結位址。

⑤更優辦法請參照（29）和（30）的哈希位址的檢測

（29）監視hashchange

①什麼是hashchange？

簡單來說，假設我們設定一個超鍊<ahref="#top">m1</a>

這個超鍊的作用，是跳轉到頁内id="top"處（注意，不是指頁面頂端，而是頁面内标簽等于top的地方）

此時，在浏覽器的位址處，最後會添加一個#top

②所謂的hashchange，就是監視這個連結的變化。

具體如下：

③效果是：當hashchange事件觸發後，将調用回調函數。

④檢視目前字尾位址（指的是例如點選上面的超連結後，在浏覽器位址後面所加的#top），使用代碼：

以上面為例，傳回值是：#top

⑤由于我們有時候不想要第一個“#”字元，于是，我們再使用指令：

傳回的是去除#之後的所有字元串。

（30）利用hashchange()監測，實作單頁面技術

①加入的iframe架構，都在一個id為iframe_section的塊之下。（是以必須要有這個塊，或者修改這個id）；

②監測hash位址的變化，如果有變化，首先檢查是否有等于該位址的id的塊（例如位址是#abc，那麼監測是否有id="abc"的塊）；

③如果沒有，創造一個這樣的塊，并給其賦予連結（連結位址是id，具體格式見src，可以根據實際需要修改）；

④有、或者建立之後，設定所有類名為.iframe的塊的display屬性為隐藏（倒數第二行代碼）；

⑤然後設定id為hash位址（實際上這個id有一個字首iframe_ ，是在前面加入的）的塊的display屬性為block（顯示這個塊）。

⑥綜合效果是：點選一個連結，哈希位址變化，顯示對應的iframe或者創造他，不符合的被隐藏。切換不同的哈希位址時，不會導緻之前操作的哈希位址的頁面被重新加載。

另一種實作方式：

簡單解釋一下，是iframe和其按鈕按順序一一對應。不需要影響哈希位址，但相對實作就更複雜一些。（這是（27）和（28）綜合起來的辦法）

JS代碼：

HTML代碼①按鈕部分：

HTML代碼②iframe部分：

CSS部分：

注：實際使用的話，可能需要調整一下布局問題。并且本代碼省略掉了實時建立iframe标簽部分的代碼，如果需要實時建立的話，需要在建立後，将src位址指派給對應的iframe标簽（通過獲得标簽對象後，加入到其value屬性中）