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