前端搜索框制作案例视频教程

源码小哥哥

课程简介：
本课程中，我们将使用jQuery和JavaScript两种技术来实现搜索框效果功能,并对jQuery和JavaScript两种技术进行了对比，你将可以了解到JQ与JS实现Ajax技术的不同点。赶快行动吧！

课程须知:
具有HTML、CSS样式、Javascript、jQuery基础知识

课程能学到什么？
可以利用HTML、CSS样式制作出搜索框效果，并使用Javascript及jQuery代码实现Ajax技术分别实现搜索引擎的制作。
1. 定位元素
2. 输入框、按钮美化
3. 修复IE兼容性问题
4.使用Javascript代码实现Ajax技术
5.使用 jQuery代码实现Ajax技术
6.同源原理

课程目录:
第1章 简单搜索框
对搜索框功能所需要的表单标签进行讲解，包括文本输入框、按钮、表单标签并且详细讲解Bing搜索框的制作方法，包括去掉Chrome焦点光环效果，定位搜索框方法，用图片美化输入框、按钮方法。
1-1 搜索框简介 (01:49)
1-2 标签讲解 (06:59)
1-3 Bing搜索框页面背景制作 (04:27)
1-4 Bing搜索框制作 (13:11)
1-5 解决浏览器兼容问题 (01:49)
1-6 实战题
第2章 智能提示搜索框制作
本案例带领大家对完成智能提示下拉层功能所需知识点进行解析，并且讲解如何用jQuery及JS两种代码方式实现搜索框事件绑定、DOM操作、Ajax的方法。
2-1 动态效果实现介绍 (01:30)
2-2 智能提示下拉层制作介绍 (10:29)
2-3 智能提示知识点介绍 (02:29)
2-4 jQuery实现事件绑定、DOM操作 (13:42)
2-5 Ajax原理及jQuery实现 (15:42)
2-6 事件代理及jQuery实现 (04:41)
2-7 JS实现下拉框功能 (16:11)
2-8 JS实现Ajax方法 (13:37)
第3章 淘宝搜索框制作
本案例讲解使用CSS样式对淘宝搜索框进行美化的方法，使用字符集把小图标制作成字体并插入到网页的方法。最后讲解一个有意思功能，使用语音输入功能，用户以语音的方式在搜索框中输入关键字。
3-1 taobao搜索框介绍 (01:46)
3-2 搜索框框架搭建 (09:34)
3-3 输入框及按钮美化 (07:09)
3-4 输入框小icon插入 (07:26)
3-5 chrome语音输入功能 (02:25)
3-6 切换菜单（静态结构）制作 (11:15)
3-7 切换菜单（动态效果）制作 (10:19)

游客，如果您要查看本帖隐藏内容请回复

sipkoy

这个比较不错的  感谢楼主分享

未来星空

正需要，支持楼主大人了！

plusman

正需要，支持楼主大人了！

jjqlbfsh998

啥也不说了，感谢楼主分享哇！

hermeticnosh

额，看不懂在说神马~@_@

336652zxc

正需要，支持楼主大人了！

你来了

谢谢分享，支持了。

芜湖

啥也不说了，感谢楼主分享哇！