jQuery选择器的使用

最新推荐文章于 2023-05-09 21:15:00 发布

soosgo

最新推荐文章于 2023-05-09 21:15:00 发布

阅读量163

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Doulvme/article/details/107200423

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

jQuery里包含很多选择器，这里主要练习筛选选择器的使用，案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			body{font-size: 12px;}
			a{color: black;text-decoration: none;}
			.box ul{
				list-style: none;
				width: 608px;
				margin: auto;
			}
			.box ul li{
				display: inline-block;
				width: 200px;
				margin: 2px 0px;
				line-height: 20px;
			}
			
			.showmore {
				text-align: center;
			}
			.showmore a{display: block;margin: auto; width:120px;line-height: 24px;border:1px solid orange;}
		</style>
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var aOthersLi=$("ul li:gt(5):not(:last)");//需要隐藏的li大于5且不包括最后一个
				aOthersLi.hide();//先设定隐藏
				$(".showmore a").click(function(){//点击显示更多时显示
					if(aOthersLi.is(":visible")){//判断隐藏li的状态   如果处于显示状态  点击的时候让其隐藏   否则显示
						aOthersLi.hide();
					}else{
						aOthersLi.show();
						//给特殊内容的模块添加样式
						$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥利巴斯')").css("color","orange");
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><a href="#">佳能</a><i>(30440)</i></li>
				<li><a href="#">索尼</a><i>(27220)</i></li>
				<li><a href="#">三星</a><i>(20808)</i></li>
				<li><a href="#">尼康</a><i>(17821)</i></li>
				<li><a href="#">奥利巴斯</a><i>(12205)</i></li>
				<li><a href="#">明基</a><i>(1466)</i></li>
				<li><a href="#">爱国者</a><i>(3091)</i></li>
				<li><a href="#">松下</a><i>(12289)</i></li>
				<li><a href="#">卡西欧</a><i>(8284)</i></li>
				<li><a href="#">富士</a><i>(14894)</i></li>
				<li><a href="#">柯达</a><i>(9520)</i></li>
				<li><a href="#">宾得</a><i>(2195)</i></li>
				<li><a href="#">理光</a><i>(4114)</i></li>
				<li><a href="#">爱国者</a><i>(3091)</i></li>
				<li><a href="#">其他品牌相机</a><i>(7275)</i></li>
			</ul>
			<div class="showmore">
				<a href="javascript:;">显示更多</a>
			</div>
			
		</div>
	</body>
</html>

soosgo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器的使用

jQuery里包含很多选择器，这里主要练习筛选选择器的使用，案例如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0px;padding: 0px;} body{font-size: 12px;} a{color: black;
复制链接

扫一扫