利用jquery快速实现查询效果

AngryXD

于 2018-01-03 10:00:22 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：实用技巧文章标签： javascript jquery html

本文链接：https://blog.youkuaiyun.com/AngryXD/article/details/78958172

实用技巧专栏收录该内容

1 篇文章

订阅专栏

本文通过示例代码展示了如何利用jQuery的:contains(text)选择器实现查询效果。核心在于通过改变元素的style属性，切换display属性为block或none，达到筛选显示或隐藏的效果。同时提到，jQuery实现的功能本质是对样式操作，display不同于visibility在于前者隐藏元素时不占位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码：

$(".findwrap button").off().click(function(){//选择按钮并绑定时间，使用off()确认绑定单一事件，属于较好编码习惯
			     var _val = $(".findwrap input").val();//获取关键词作为索引
				 if(_val==""){
				    $(".content-tab td").parent().show();//当关键词为空时，显示所有元素
				 } else{
				 	$(".content-tab td").parent().hide();//根据关键词决定显示的内容
				 	$(".content-tab td:contains("+_val+")").parent().show()
				 }
			})

大致效果如图:

以下是详述：

jquery是一个总能给你惊喜的工具库，多使用总是能发现更多简便之处

以上功能实现核心之出就在于使用了:contains(text)选择器，该选择器可以让你直接查询结构下的文字元素，通过这样筛选很容易就能实现筛选功能

题外话：

jquery实现功能，本质上是在style上进行操作的

上述功能即是给对应元素增加了 style="display:block" 和 style="display:none"

display 和 visibility的区别在于，display的元素是不占位的，而visibility只是隐藏了显示，元素还是占位的