JQuery根据关键字检索html元素并筛选显示
背景:标题比较唬人,实际上就是在文本框中输入关键字,通过关键字检索html元素,筛选后显示在界面上。
Html元素如下:
<div>
<input type="text" id="searchBox"/>
<ul id="dataSet">
<li>刘德华</li>
<li>黄日华</li>
<li>张学友</li>
<li>谢霆锋</li>
<li>陈奕迅</li>
<li>陈冠希</li>
<li>郑伊健</li>
<li>郭富城</li>
<li>黄秋生</li>
<li>杜琪峰</li>
<li>梁朝伟</li>
</ul>
</div>
$(function () {
$("#searchBox").keyup(function () {
var value = $(this).val();
$("#dataSet li").each(function () {
$(this).hide();
if ($(this).text().indexOf($.trim(value)) >= 0) {
$(this).show();
}
});
});
});
运行后的效果如图:


JQuery根据关键字检索html元素并筛选显示的更多相关文章
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...
- JQuery基础教程:选择元素(下)
DOM遍历方法 利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...
- 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
随机推荐
- HTTP的学习记录3--HTTPS和HTTP
一开始我所知道的只有HTTPS比HTTP更加安全,而且很多网站,如百度谷歌之流已经都是HTTPS了,博客园也是,你可以看到上方我们链接上那个绿色的小锁和绿色的安全二字. 另外吐槽一句,绿色还真是有趣, ...
- ReflectionUtil
import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import java.lang ...
- maven插件: shade, assembly
shade插件的作用: 通过版本的exclution无法解决jar冲突的问题, 解决方案是把依赖的包打到本model的jar中,打包的时候由mvn plugin自动修改代码中的依赖jar包名 relo ...
- Python+Selenium----使用HTMLTestRunner.py生成自动化测试报告1(使用IDLE)
1.说明 自动化测试报告是一个很重要的测试数据,网上看了一下,使用HTMLTestRunner.py生成自动化测试报告使用的比较多,但是呢,小白刚刚入手,不太懂,看了很多博客,终于生成了一个测试报告, ...
- Spark编程环境搭建及WordCount实例
基于Intellij IDEA搭建Spark开发环境搭建 基于Intellij IDEA搭建Spark开发环境搭——参考文档 ● 参考文档http://spark.apache.org/docs/la ...
- Storm概念学习系列之Task任务
不多说,直接上干货! 每一个Spout/Bolt的线程称为一个Task. Task任务 Task是运行Spout或Bolt的单元,每一个Spout/Bolt的线程称为一个Task. 在Storm 0. ...
- php版给UEditor的图片在线管理栏目增加图片删除功能
1.找到uedior/dialogs/image/image.js文件,Add为修改部分的代码: /** * tab点击处理事件 * @param tabHeads * @param tabBodys ...
- JQuery初识(三 )
一丶JQuery的文档操作 1.插入操作: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng|element(js对象)|JQuery元素 var ...
- 零基础逆向工程26_C++_03_Vector
1 Vector 核心代码 #define SUCCESS 1 // 成功 #define ERROR -1 // 失败 #define MALLOC_ERROR -2 // 申请内存失败 #defi ...
- Java static修饰符小记
首先我们明确一点:java是一个纯面向对象的编程语言,它的每一个文件都视为一个类,当我们创建一个对象的时候,就是在调用一个文件,那么这个时候,这个文件(类)里的一些东西,它是需要通过对象来使用或访问, ...