首页 > 我的文章 > PHP开发 > javascript的代码 > jQuery特效之列表检索功能实现

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

浏览:767 编辑:绿萝 来源:绿萝
先上效果图: 这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的jquery实现的 具体代码如下:

先上效果图:

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

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

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

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

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

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