您的位置：首页 > Web前端 > JQuery

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

2014-03-07 00:26 239 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航