利用jquery快速实现查询效果

最新推荐文章于 2022-08-07 11:50:16 发布

AngryXD

最新推荐文章于 2022-08-07 11:50:16 发布

阅读量3.3k

点赞数

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

本文链接：https://blog.csdn.net/AngryXD/article/details/78958172

版权

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

摘要由CSDN通过智能技术生成

先上代码：

$(".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)选择器，</