資訊專欄INFORMATION COLUMN
摘要：最后，我們只要在事件處理程序中獲得這個布爾值傳給這幾個函數就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個值，而全體的復選框要獲得就得靠遍歷了。
0x1播放列表收縮展開
實現效果
值得注意的一個地方是那個箭頭，我這里只是用了簡單的字符串替換，而原題用了背景圖片移動來實現切換箭頭，但是似乎那樣做會導致整個容器的左右偏移、效果不是很好。
0x2鼠標移過顯示車標實現效果
這題看起來和前面那道改變車標透明度的題差不多，但是卻花了我不少時間。原因還是沒有深入理解mouseover和mouseout事件的特點，雖然這兩個事件移進子元素也會觸發的特點便于實現事件代理，但是這樣一來如果單純在父元素上掛這兩個事件就想在子元素上實現出現和消失的效果，就會導致連續觸發---子元素出現觸發父元素mouseout導致消失、再觸發父元素mouseover，然后子元素又出現了，就這樣閃個不停。。。
所以這題和前面那道題最大的不同就在此，因為要實現的是子元素的出現和消失，由于上述原因的掣肘、也因為子元素本身就比父元素要大，故應該采用監聽li元素的mouseover使車標彈出，監聽子元素的mouseout使其消失。
然而新問題又出現了，一開始我彈出的車標是個鏈接嵌套圖片，而我只是監聽鏈接的mouseout觸發車標的消失。但這就導致一個詭異的情況，子元素彈出時鼠標就直接覆蓋在圖片上了，并不會觸發鏈接上的mouseover，而是要一直移動到鏈接的border上才觸發，然后移出border再觸發鏈接上的mouseover。因為border本身寬度小，只要鼠標的移動速度過快，瀏覽器就會反應不過來，鏈接上的mouseover和mouseout就不會被觸發！！如此一來，當鼠標快速地在各li上掃一遍后，就被掃過區域的圖像會一直顯示！！
這也說明監聽事件其實是個很費計算量的事情，一旦事件發生得很快，瀏覽器對事件的監聽就不太靠譜了。所以要解決上面的問題，就得給瀏覽器響應的時間，可以改成監聽圖片的mouseout觸發車標的消失，但最好地，還是精簡dom結構，不再在鏈接里嵌套圖片，把圖片內置成鏈接的背景，這樣鏈接變大就不會有上面的煩惱了。
0x3鼠標移過，修改圖片路徑實現效果
和上一題基本一個套路，總之要監聽mouseover這種進入子元素也會觸發的事件，就一定得防止連續觸發，否則就會和上一題一樣出現背離預想的效果、而且性能上也不太好。防止連續觸發的方法就是直接對最里層的子元素作用。還有像上一題也提到的，對于這種覆蓋的事件還要保證元素的面積夠大、讓瀏覽器反應得過來。
還有一個點，就是加載動畫的實現，這里用的是一個設置了半透明gif背景的div來做，直接覆蓋在展示區上。在mouseover觸發圖片切換時顯示這個div，直到要展示圖片load完畢，再觸發其消失即可。
0x4復選框全選、全不選、反選實現效果
稍微把思路理一下，這題總共監聽三個方面的點擊事件：全選框、反選鏈接、以及全體的復選框的代理。具體到每個方面：全選框的點擊事件處理全體的復選框的勾選及自身文本內容的改變（‘全選’、‘全不選’）這兩件事、而反選鏈接在此基礎上還要處理全選框的勾選；至于全體的復選框則處理全選框的勾選和全選框文本內容的改變這兩件事。
這樣一理就清晰了，每個監聽中的動作也就在三個操作中選：全體的復選框的勾選、全選框的勾選和全選框文本內容的改變，而且這三件操作都得依賴一個“是否全部勾選”的布爾值進行，所以這里分別用三個函數實現這三個操作。最后，我們只要在事件處理程序中獲得這個布爾值傳給這幾個函數就可以了，其中，全選框、反選鏈接可以從全選框的checked屬性獲得這個值，而全體的復選框要獲得就得靠遍歷了。
0x5操作 input 標簽實現效果
搞不懂原題想實現什么，原來那個版本功能也沒做完，于是我就自作主張改成實現表單獲值和重置了。通過這個也練習也補了一下表單的知識，關于這方面的總結我寫在《表單知識總結》這篇文章里了。
0x6操作表單元素 select實現效果
還是表單控件的練習，和input一樣，select也有專有的API給我們操縱，比單純用DOM方法方便高效，借著這次練習把對選項的增刪改查都練了一遍吧。增刪利用select元素的add和remove方法實現，而要具體訪問和修改某個選項就得用options屬性獲得選項集合再操作選項。此外，將options元素集的length置零還可以直接清空所有選項，但options貌似是個只讀的屬性，給它直接賦null卻不能清空選項。
0x7簡單的select級聯列表實現效果
監聽州列表的change事件獲取選中的州，再拿州名去獲取城市名添加到城市列表即可。注意添加前要把城市列表先清空，防止數據堆積；同時注意選中項的可直接由select的value屬性獲得，不用再繞個大彎去獲得選中項。
---第二課完 (^o^) /---
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78903.html
摘要：百度輸入法實現效果百度輸入法主要是切換的判斷條件，一開始我還用點擊次數的奇偶性來判斷，其實直接檢查菜單有沒有顯示即可。簡易年歷實現效果簡易年歷和上一題差不多，只是這次把修改類名換成修改數據而已。 0x1百度輸入法 實現效果：See the Pen 2-01百度輸入法 主要是切換的判斷條件，一開始我還用點擊次數的奇偶性來判斷-_-||，其實直接檢查菜單有沒有顯示即可。檢查的時候有個小t...
摘要：寫一個正則表達式來測試變量中是否包含字符串。用函數給出不使用字符，但和等價的正則表達式。第十四課標志全局匹配標志第二個常用的標志是全局匹配標志，用字母表示。寫出一個正則表達式來檢驗合法性。非捕獲組的主要用途是給一個組賦予量詞。 TRY REGEX 是一個交互式的正則表達式學習項目項目地址：https://github.com/callumacra...在線地址：http://tryre...
摘要：安裝獨立版本我們可以在的官網上直接下載并用標簽引入。國內會保持和發布的最新的版本一致。方法由于安裝速度慢，本教程使用了淘寶的鏡像及其命令，安裝使用介紹參照使用淘寶鏡像。 Vue.js 安裝 1、獨立版本 我們可以在 Vue.js 的官網上直接下載 vue.min.js 并用 標簽引入。 2、使用 CDN 方法 以下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前還是建議...
閱讀 1642·2021-10-12 10:11
閱讀 3759·2021-09-03 10:35
閱讀 1444·2019-08-30 15:55
閱讀 2130·2019-08-30 15:54
閱讀 1001·2019-08-30 13:07
閱讀 1015·2019-08-30 11:09
閱讀 581·2019-08-29 13:21
閱讀 2652·2019-08-29 11:32
