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

    PRIVACY POLICY First, welcome to use the app Thank you for using our products and services ("Se ...

  2. 基于Python Selenium Unittest PO设计模式详解

    本文章会讲述以下几个内容: 1.什么是PO设计模式(Page Object Model) 2.为什么要使用PO设计模式 3.使用PO设计模式要点 4.PO设计模式实例 1.什么是PO设计模式 (Pag ...

  3. js中去掉字符中间空格和首尾空格

    转载: https://www.jb51.net/article/109522.htm 1.  去掉字符串前后所有空格: 代码如下: ? 1 2 3 4 function Trim(str)  {   ...

  4. python3+Appium自动化04-Toast元素识别

    什么是toast? 如下图,“再按一次退出程序”,这就是toast 如何定位toast元素? Appium1.6.3开始支持识别Toast内容,主要基于UiAutomator2 想定位toast元素, ...

  5. zk小结

    一 ZooKeeper功能 1.文件系统 2.通知机制 二 Zookeeper文件系统 每个子目录项都被称作为znode,和文件系统一样,我们能够自由的增加.删除znode,在一个znode下增加.删 ...

  6. C#获得字符串首字符字母(大写)

    /// <summary> /// 获得字符串首字符字母(大写): /// </summary> /// <param name="cnChar"&g ...

  7. ASP Session的功能的缺陷以及解决方案

    转http://www.cnblogs.com/jhy55/p/3376925.html 目前ASP的开发人员都正在使用Session这一强大的功能,但是在他们使用的过程中却发现了ASP Sessio ...

  8. 【Python】python2 str 编码检测

    python2 str 编码检测 import chardet s = 'sdffdfd' print type(s) print chardet.detect(s) s2 = '反反复复' prin ...

  9. AngularJs Type error : Cannot read property 'childNodes' of undefined

    参考博客: https://blog.csdn.net/u011127019/article/details/73087868 在AngularJs和JQuery插件共存咋项目中经常会遇到如下异常 T ...

  10. HDevEngine in .NET Applications MultiThreading

    Basics To use HDevEngine in Visual Studio .NET, you must add a reference to the HALCON/.NET assembly ...