背景:标题比较唬人,实际上就是在文本框中输入关键字,通过关键字检索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. DHCP原理和配置

    在大型网络中,会有大量的主机和设备需要获取ip地址和网络参数,为了解决手动配置的工作量大.ip冲突问题,因此需要使用DHCP(dynamic host configuration protocol). ...

  2. JOS lab1 part2 分析

    lab1的Exercise 2就是让我们熟悉gdb的si操作,并知道BIOS的几条指令在做什么就够了,所以我们也会尽可能的去分析每一行代码. 首先进入到6.8282/lab这个目录下,输入指令make ...

  3. CF C. Plasticine zebra (思维)

    题意: 是输入一个只有'w','b'的字符串,可以对他的任意位置切割成两个子串,切割后的右边的子串翻转后再和左边的子串拼起来会得到一个新的字符串,操作次数不限,问能得到的字符串中wb交替出现的最大的长 ...

  4. C++之Vect

    在C++中数组和向量都是多同类元素的集合,他们也有很明显的区别 1 数组属于静态分配,编译之前必须知道数组的大小,一旦确定就不能更改:2个数组之间不能直接赋值实现拷贝,而必须显式用for或者拷贝函数拷 ...

  5. RabbitMQ使用教程(四)如何通过持久化保证消息99.99%不丢失?

    1. 前情回顾 RabbitMQ使用教程(一)RabbitMQ环境安装配置及Hello World示例 RabbitMQ使用教程(二)RabbitMQ用户管理,角色管理及权限设置 RabbitMQ使用 ...

  6. Asp.NetCore 2.2 WebApi 发布到IIS步骤及错误处理

    一.创建一个Asp.NetCore WebApi 程序(话不多说) 二.发布 三.配置IIS 程序池中选中网站的程序池 ——基本设置 浏览网站——浏览器 域名后面输入api/values 四.错误处理 ...

  7. android 开发-Toast控件的实现

    Toast吐司: Toast内容简单,不做过多介绍,Toast支持自带简单吐司,自定义吐司.内容简单可见代码,详见API.A toast provides simple feedback about ...

  8. SpringBoot | 第五章:多环境配置

    前言 写上一篇看英文资料,耗费了心力呀,这章,相对来说简单点.也比较熟悉,但是这很实用.不扯了,开始~ 多环境配置 maven的多环境配置 springboot多环境配置 总结 老生常谈 多环境配置 ...

  9. C++中的引用和指针

    引用和指针有何区别?何时只能使用指针而不能使用引用?    引用是一个别名,不能为 NULL 值,不能被重新分配:指针是一个存放地址的变量.当需要对变量重新赋以另外的地址或赋值为 NULL 时只能使用 ...

  10. jquery中的$(document).ready()

    window.onload = function(){ alert("welcome"); } 这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(d ...