书本中的demo，用来加深jquery选择器的使用

最新推荐文章于 2022-07-12 17:32:22 发布

qadada

最新推荐文章于 2022-07-12 17:32:22 发布

阅读量871

点赞数 1

分类专栏： jquery 文章标签： jquery选择器显示隐藏详细

本文链接：https://blog.csdn.net/qadada/article/details/20667683

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.开始效果

2.点击按钮显示效果

3.代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}/*设置背景颜色，设置居中*/
a { color:#04D; text-decoration:none;}/*超链接颜色，超链接是否有下划线*/
a:hover { color:#F50; text-decoration:underline;}/*鼠标放到超链接上时候的效果，有下划线*/
.Box {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.Box ul { list-style:none;}
.Box ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a{ color:#F50;}
</style>
<script type="text/javascript">
$(function(){
	//1.从第七条开始，隐藏后面的品牌
	var $category = $("ul li:gt(5):not(:last)");//获得ul 下的 li索引值大于5的li，并且不是最后一个
	$category.hide();//隐藏这些元素
	//2.点击显示更多按钮，显示出全部
	var $btn = $("div.showmore > a");//获得class为showmore的div下的子元素,注意，元素和属性之间没有空格，如果有空格无法获得
	$btn.click(function(){//为按钮绑定click事件
		if($category.is(":visible")){//隐藏元素是否可见
				$category.hide();
				$(this).find("span").css("background","url(img/dowm.gif) no-repeat 0 0").text("显示全部品牌");
				$('ul li').removeClass("promoted");
		}else{
				$category.show();//显示被隐藏的元素
			//3.且换显示全部的按钮演示和文本
				$(this).find("span").css("background","url(img/up.gif) no-repeat 0 0").text("精简显示品牌");
			//4.高亮显示推荐品牌
				$('ul li').filter(":contains('佳能'),:contains('联想'),:contains('苹果')").addClass("promoted");
				
		}
		return false;//控制超链接不跳转
	});
})
</script>
</head>

<body>
	<div class="Box">
		<ul>
			<li><a href="#">佳能</a><i>(30440)</i></li>
			<li><a href="#">索尼</a><i>(30441)</i></li>
			<li><a href="#">三星</a><i>(30442)</i></li>
			<li><a href="#">尼康</a><i>(30443)</i></li>
			<li><a href="#">松下</a><i>(30444)</i></li>
			<li><a href="#">卡西欧</a><i>(30445)</i></li>
			<li><a href="#">富士</a><i>(30446)</i></li>
			<li><a href="#">柯达</a><i>(30447)</i></li>
			<li><a href="#">宾得</a><i>(30448)</i></li>
			<li><a href="#">理光</a><i>(30449)</i></li>
			<li><a href="#">联想</a><i>(30411)</i></li>
			<li><a href="#">明基</a><i>(30421)</i></li>
			<li><a href="#">苹果</a><i>(30431)</i></li>
			<li><a href="#">谷歌</a><i>(30441)</i></li>
		</ul>
	</div>
	<div class="showmore">
		<a href="more.html"><span>显示全部品牌</span></a>
	</div>
</body>
<!--
方法说明：
	1.show():显示元素
	2.hide():隐藏元素
	3.test()：设置匹配文本的值
	4.filter（expr）：筛选出符合表达式的元素
	5.addClass(class):增加class样式
	6.removeClass(class):移除class样式
	7.is(":visible")：判断原始是否显示
-->
</html>

qadada

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
书本中的demo，用来加深jquery选择器的使用

1.开始效果2.点击按钮显示效果3.代码无标题文档*{ margin:0; padding:0;}body {font-size:12px;text-align:center;}/*设置背景颜色，设置居中*/a { color:#04D; text-decoration:none;}/*超链接颜色，超链接是否有下划线*/a:hover { color
复制链接

扫一扫

专栏目录