jQuery特效之列表检索功能实现

发布时间:2018-01-10 12:43:19编辑:丝画阁阅读(308)

先上效果图:

jQuery特效之列表检索功能实现

这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的jquery实现的 具体代码如下:

jQuery特效之列表检索功能实现

原理就是:给按钮一个点击事件,首先获取到input中的值,然后让span的其它父元素都隐藏(其实就是隐藏掉其它的li标签)然后查找含有txt(就是input中值)的那一个li,然后显示出来。

下面修改为监控键盘事件后的优化代码:

jQuery特效之列表检索功能实现

关键字