背景:标题比较唬人,实际上就是在文本框中输入关键字,通过关键字检索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元素并筛选显示的更多相关文章

  1. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

  2. JQuery基础教程:选择元素(下)

    DOM遍历方法   利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...

  3. 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

    1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...

  4. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  5. jQuery获取所有父级元素及同级元素及子元素的方法

    jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...

  6. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  7. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  8. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  9. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

随机推荐

  1. CF447B DZY Loves Strings 贪心

    DZY loves collecting special strings which only contain lowercase letters. For each lowercase letter ...

  2. Exadata Adaptive Scrubbing Schedule

    1.为什么要引入"Hard Disk Scrub and Repair"特性 在exadata的11.2.3.3.0版本中,开始引进了"Automatic Hard Di ...

  3. CCF201809(Java)

    第一题: 问题描述 在一条街上有n个卖菜的商店,按1至n的顺序排成一排,这些商店都卖一种蔬菜. 第一天,每个商店都自己定了一个价格.店主们希望自己的菜价和其他商店的一致,第二天,每一家商店都会根据他自 ...

  4. python_sting字符串的方法及注释

    string类型是python内置的类型,无需安装   方法/属性 说明   capitalize()   把字符串的第一个字符改为大写   casefold()   把整个字符串的所有字符改为小写 ...

  5. POJ 2361 Tic Tac Toe

    题目:给定一个3*3的矩阵,是一个井字过三关游戏.开始为X先走,问你这个是不是一个合法的游戏.也就是,现在这种情况,能不能出现.如果有人赢了,那应该立即停止.那么可以知道X的步数和O的步数应该满足x= ...

  6. Java集合——List集合

    1.集合框架的作用 在实际开发中,我们经常会对一组相同类型的数据进行统一管理操作.到目前为止,我们可以使用数组结构,链表结构,二叉树结构来实现. 数组的最大问题在于数组中的元素个数是固定的,要实现动态 ...

  7. Java文件与io——NewIO

    为啥要使用NIO? NIO的创建目的是为了让JAVA程序员可以实现高速I/O而无需编写自定义的本机代码.NIO将最耗时的I/O操作(即填充和提取缓冲区)转移回操作系统,因而可以极大地提高速度 流与快的 ...

  8. SpringBoot源码篇:深度分析SpringBoot如何省去web.xml

    一.前言 从本博文开始,正式开启Spring及SpringBoot源码分析之旅.这可能是一个漫长的过程,因为本人之前阅读源码都是很片面的,对Spring源码没有一个系统的认识.从本文开始我会持续更新, ...

  9. SpringBoot | 第二十章:异步开发之异步请求

    前言 关于web开发的相关知识点,后续有补充时再开续写了.比如webService服务.发邮件等,这些一般上觉得不完全属于web开发方面的,而且目前webService作为一个接口来提供服务的机会应该 ...

  10. arcgis 定位图斑,并且高亮显示

    ///图斑定位 function TabQuery(instance_id, layer_name) { require(["esri/map", "esri/geome ...