摘要：最后，我們只要在事件處理程序中獲得這個(gè)布爾值傳給這幾個(gè)函數(shù)就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個(gè)值，而全體的復(fù)選框要獲得就得靠遍歷了。

實(shí)現(xiàn)效果

值得注意的一個(gè)地方是那個(gè)箭頭，我這里只是用了簡(jiǎn)單的字符串替換，而原題用了背景圖片移動(dòng)來(lái)實(shí)現(xiàn)切換箭頭，但是似乎那樣做會(huì)導(dǎo)致整個(gè)容器的左右偏移、效果不是很好。

實(shí)現(xiàn)效果

這題看起來(lái)和前面那道改變車(chē)標(biāo)透明度的題差不多，但是卻花了我不少時(shí)間。原因還是沒(méi)有深入理解mouseover和mouseout事件的特點(diǎn)，雖然這兩個(gè)事件移進(jìn)子元素也會(huì)觸發(fā)的特點(diǎn)便于實(shí)現(xiàn)事件代理，但是這樣一來(lái)如果單純?cè)诟冈厣蠏爝@兩個(gè)事件就想在子元素上實(shí)現(xiàn)出現(xiàn)和消失的效果，就會(huì)導(dǎo)致連續(xù)觸發(fā)---子元素出現(xiàn)觸發(fā)父元素mouseout導(dǎo)致消失、再觸發(fā)父元素mouseover，然后子元素又出現(xiàn)了，就這樣閃個(gè)不停。。。

所以這題和前面那道題最大的不同就在此，因?yàn)橐獙?shí)現(xiàn)的是子元素的出現(xiàn)和消失，由于上述原因的掣肘、也因?yàn)樽釉乇旧砭捅雀冈匾?，故?yīng)該采用監(jiān)聽(tīng)li元素的mouseover使車(chē)標(biāo)彈出，監(jiān)聽(tīng)子元素的mouseout使其消失。

然而新問(wèn)題又出現(xiàn)了，一開(kāi)始我彈出的車(chē)標(biāo)是個(gè)鏈接嵌套圖片，而我只是監(jiān)聽(tīng)鏈接的mouseout觸發(fā)車(chē)標(biāo)的消失。但這就導(dǎo)致一個(gè)詭異的情況，子元素彈出時(shí)鼠標(biāo)就直接覆蓋在圖片上了，并不會(huì)觸發(fā)鏈接上的mouseover，而是要一直移動(dòng)到鏈接的border上才觸發(fā)，然后移出border再觸發(fā)鏈接上的mouseover。因?yàn)閎order本身寬度小，只要鼠標(biāo)的移動(dòng)速度過(guò)快，瀏覽器就會(huì)反應(yīng)不過(guò)來(lái)，鏈接上的mouseover和mouseout就不會(huì)被觸發(fā)??！如此一來(lái)，當(dāng)鼠標(biāo)快速地在各li上掃一遍后，就被掃過(guò)區(qū)域的圖像會(huì)一直顯示！！

這也說(shuō)明監(jiān)聽(tīng)事件其實(shí)是個(gè)很費(fèi)計(jì)算量的事情，一旦事件發(fā)生得很快，瀏覽器對(duì)事件的監(jiān)聽(tīng)就不太靠譜了。所以要解決上面的問(wèn)題，就得給瀏覽器響應(yīng)的時(shí)間，可以改成監(jiān)聽(tīng)圖片的mouseout觸發(fā)車(chē)標(biāo)的消失，但最好地，還是精簡(jiǎn)dom結(jié)構(gòu)，不再在鏈接里嵌套圖片，把圖片內(nèi)置成鏈接的背景，這樣鏈接變大就不會(huì)有上面的煩惱了。

實(shí)現(xiàn)效果

和上一題基本一個(gè)套路，總之要監(jiān)聽(tīng)mouseover這種進(jìn)入子元素也會(huì)觸發(fā)的事件，就一定得防止連續(xù)觸發(fā)，否則就會(huì)和上一題一樣出現(xiàn)背離預(yù)想的效果、而且性能上也不太好。防止連續(xù)觸發(fā)的方法就是直接對(duì)最里層的子元素作用。還有像上一題也提到的，對(duì)于這種覆蓋的事件還要保證元素的面積夠大、讓瀏覽器反應(yīng)得過(guò)來(lái)。

還有一個(gè)點(diǎn)，就是加載動(dòng)畫(huà)的實(shí)現(xiàn)，這里用的是一個(gè)設(shè)置了半透明gif背景的div來(lái)做，直接覆蓋在展示區(qū)上。在mouseover觸發(fā)圖片切換時(shí)顯示這個(gè)div，直到要展示圖片load完畢，再觸發(fā)其消失即可。

實(shí)現(xiàn)效果

稍微把思路理一下，這題總共監(jiān)聽(tīng)三個(gè)方面的點(diǎn)擊事件：全選框、反選鏈接、以及全體的復(fù)選框的代理。具體到每個(gè)方面：全選框的點(diǎn)擊事件處理全體的復(fù)選框的勾選及自身文本內(nèi)容的改變（‘全選’、‘全不選’）這兩件事、而反選鏈接在此基礎(chǔ)上還要處理全選框的勾選；至于全體的復(fù)選框則處理全選框的勾選和全選框文本內(nèi)容的改變這兩件事。

這樣一理就清晰了，每個(gè)監(jiān)聽(tīng)中的動(dòng)作也就在三個(gè)操作中選：全體的復(fù)選框的勾選、全選框的勾選和全選框文本內(nèi)容的改變，而且這三件操作都得依賴(lài)一個(gè)“是否全部勾選”的布爾值進(jìn)行，所以這里分別用三個(gè)函數(shù)實(shí)現(xiàn)這三個(gè)操作。最后，我們只要在事件處理程序中獲得這個(gè)布爾值傳給這幾個(gè)函數(shù)就可以了，其中，全選框、反選鏈接可以從全選框的checked屬性獲得這個(gè)值，而全體的復(fù)選框要獲得就得靠遍歷了。

實(shí)現(xiàn)效果

搞不懂原題想實(shí)現(xiàn)什么，原來(lái)那個(gè)版本功能也沒(méi)做完，于是我就自作主張改成實(shí)現(xiàn)表單獲值和重置了。通過(guò)這個(gè)也練習(xí)也補(bǔ)了一下表單的知識(shí)，關(guān)于這方面的總結(jié)我寫(xiě)在《表單知識(shí)總結(jié)》這篇文章里了。

實(shí)現(xiàn)效果

還是表單控件的練習(xí)，和input一樣，select也有專(zhuān)有的API給我們操縱，比單純用DOM方法方便高效，借著這次練習(xí)把對(duì)選項(xiàng)的增刪改查都練了一遍吧。增刪利用select元素的add和remove方法實(shí)現(xiàn)，而要具體訪(fǎng)問(wèn)和修改某個(gè)選項(xiàng)就得用options屬性獲得選項(xiàng)集合再操作選項(xiàng)。此外，將options元素集的length置零還可以直接清空所有選項(xiàng)，但options貌似是個(gè)只讀的屬性，給它直接賦null卻不能清空選項(xiàng)。

實(shí)現(xiàn)效果
監(jiān)聽(tīng)州列表的change事件獲取選中的州，再拿州名去獲取城市名添加到城市列表即可。注意添加前要把城市列表先清空，防止數(shù)據(jù)堆積；同時(shí)注意選中項(xiàng)的可直接由select的value屬性獲得，不用再繞個(gè)大彎去獲得選中項(xiàng)。

---第二課完 (^o^) /---