返回宝典

jQuery 过滤搜索

上一节 下一节

查看源码

姓名 帮派 邮箱
鳌拜 清廷 Aobai@zhuanfou.com
东方不败 日月神教 Dongfang@zhuanfou.com
陈近南 天地会 Jinnan@zhuanfou.com
洪秀全 太平天国 Xiu@zhuanfou.com

jQuery 过滤搜索

jQuery老仙,法力无边!jQuery老仙,神功盖世!jQuery老仙可轻松过滤搜索特定的元素。但是在学习这套功法前,会先把该功法涉及的知识点拆解开来,逐一道来。

jQuery filter()方法

jQuery的filter()的方法,与其说是过滤,不如说是把符合jQuery选择器规则的所有元素全都过一遍;在针对每个目标元素的函数中,this就是指此具体的目标元素。

$(document).ready(function(){
    $("button").on("click", function() {
        $("p").filter(function() {
            alert( $(this).html() );
        });
    });
});

运行一下

jQuery toggle( 判断条件 )

jQuery中的toggle函数以前说过的,toggle()方法可切换元素的隐藏和显示状态。但是如果给toggle方法传入一个布尔型的变量,则会toggle方法的效果如下:

  • 传入false 给 toggle方法 - 隐藏目标元素
  • 传入true 给 toggle方法 - 隐藏目标元素


因此,可以传入一个条件判断表达式(条件判断表达式的结果就是true或false):

// 只有当目标元素的内容等于“反清复明”时该元素才可以显示
// 相反,目标元素内容若不是“反清复明”,就会被隐藏
$(this).toggle( $(this).html() == "反清复明" );

运行一下

JavaScript indexOf() 方法

JavaScript中判断字符串是否是另外一个字符串的子串,如果是则返回存在该子串的第一处的索引位置;若不存在该子串,则返回-1;因此indexOf方法可以判断字符串之间的包含关系。

var a = "东方不败".indexOf( "独孤求败" ); // 结果为-1
var b = "反清复明".indexOf( "反清" ); // 结果为0
var c = "I am a jerk!".indexOf( "jerk" ); // 结果为7

运行一下

jQuery过滤搜索 - 原理

所谓的使用jQuery进行过滤搜索的原理就是:

filter()方法 + toggle( 判断条件 ) + indexOf()方法

对目标选择的元素,采用filter()方法从头到尾撸一遍;然后在撸每一个具体的目标元素的时候进行toggle(判断条件),而判断条件就是该元素内容是否包含目标搜索词,如何判断内容是否具有目标搜索词,那就是用indexOf()方法来判断,找不到搜索词,结果就是-1,找到搜索词,结果就一定大于-1;从而根据此判断条件,来决定是否显示该元素。

对表格(Tables)进行过滤搜索

$(document).ready(function(){
  $("#searchBox").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // 把大写字母变成小写
    $("#jerkTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

运行一下

对列表(Lists)进行过滤搜索

$(document).ready(function(){
  $("#searchBox").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // 把大写字母变成小写
    $("li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

运行一下

对所有元素进行过滤搜索

为了不至于太夸张,下例中把搜索框排除在外啦~

$(document).ready(function(){
  $("#searchBox").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // 把大写字母变成小写
    $("body *").not("#searchBox").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

运行一下


jQuery 过滤搜索

上一节 下一节