簡(jiǎn)介：本課程中，我們將使用jQuery和JavaScript兩種技術(shù)來(lái)實(shí)現(xiàn)搜索框效果功能,并對(duì)jQuery和JavaScript兩種技術(shù)進(jìn)行了對(duì)比，你將可以了解到JQ與JS實(shí)現(xiàn)Ajax技術(shù)的不同點(diǎn)。趕快行動(dòng)吧！
第1章 簡(jiǎn)單搜索框
對(duì)搜索框功能所需要的表單標(biāo)簽進(jìn)行講解，包括文本輸入框、按鈕、表單標(biāo)簽并且詳細(xì)講解Bing搜索框的制作方法，包括去掉Chrome焦點(diǎn)光環(huán)效果，定位搜索框方法，用圖片美化輸入框、按鈕方法。
第2章 智能提示搜索框制作
本案例帶領(lǐng)大家對(duì)完成智能提示下拉層功能所需知識(shí)點(diǎn)進(jìn)行解析，并且講解如何用jQuery及JS兩種代碼方式實(shí)現(xiàn)搜索框事件綁定、DOM操作、Ajax的方法。
- 視頻： 2-1 動(dòng)態(tài)效果實(shí)現(xiàn)介紹 (01:30)
- 視頻： 2-2 智能提示下拉層制作介紹 (10:29)
- 視頻： 2-3 智能提示知識(shí)點(diǎn)介紹 (02:29)
- 視頻： 2-4 jQuery實(shí)現(xiàn)事件綁定、DOM操作 (13:42)
- 視頻： 2-5 Ajax原理及jQuery實(shí)現(xiàn) (15:42)
- 視頻： 2-6 事件代理及jQuery實(shí)現(xiàn) (04:41)
- 視頻： 2-7 JS實(shí)現(xiàn)下拉框功能 (16:11)
- 視頻： 2-8 JS實(shí)現(xiàn)Ajax方法 (13:37)
第3章 淘寶搜索框制作
本案例講解使用CSS樣式對(duì)淘寶搜索框進(jìn)行美化的方法，使用字符集把小圖標(biāo)制作成字體并插入到網(wǎng)頁(yè)的方法。最后講解一個(gè)有意思功能，使用語(yǔ)音輸入功能，用戶以語(yǔ)音的方式在搜索框中輸入關(guān)鍵字。