jQuery——商品显示与隐藏案例

志在远方233

于 2022-04-15 10:00:00 发布

阅读量252

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_54110518/article/details/124179712

版权

该博客展示了如何利用jQuery的选择器来实现商品元素的显示与隐藏效果。通过选取隐藏元素`$("li:hidden")`和可见元素`$("li:visible")`，结合文本框选择`$(":text")`，配合HTML、CSS和jQuery代码完成交互功能。文章指出，此案例在多个场景下都有应用价值，并期待读者提出改进意见。

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

先给大家看一下效果图，主要用了jQuery的知识

选择器：

：hidden 获取所有隐藏元素 $（"li:hidden"）

：visble 获取所有可见元素 $（"li:visble"）

: text 选取页面中所有文本框

body部分代码

<body>
		<div class="content">
			<div id="img">
				<img src="../images/xiangji.jpg" class="i">
			</div>
			<div class="part">
				&nbsp;&nbsp;&nbsp;<span style="color:wheat; font-weight:bolder; font-size: 30px;">商品筛选:</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;<span style="color: orange;font-size: