jQuery的初步使用
来源:互联网 发布:midas civil软件下载 编辑:程序博客网 时间:2024/05/17 09:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
float: left;
margin: 10px 20px;
}
ul{
overflow: hidden;
}
.sub{
width: 500px;
/* height: 200px;*/
border: 1px solid #999;
}
span{
display: inline-block;
background: red;
}
.showmore{
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.showmore a{
color: #fff;
}
</style>
</head>
<body>
<div class="sub">
<ul>
<li><a href="#">奥林巴斯</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(30440)</i></li>
<li><a href="#">三星</a><i>(30440)</i></li>
<li><a href="#">松下</a><i>(30440)</i></li>
<li><a href="#">卡西欧</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">万家</a><i>(30440)</i></li>
<li><a href="#">超能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">万家福</a><i>(30440)</i></li>
<li><a href="#">河防</a><i>(30440)</i></li>
<li><a href="#">人鱼i</a><i>(30440)</i></li>
<li><a href="#">其他品牌相机</a><i>(30440)</i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部</span><span>0</span></a>
</div>
</div>
<script src="../jQuery/jquery-1.12.0.min.js"></script>
<script>
$(function(){
/*选择出索引值大于5,并且除了最后一个*/
var $hide=$("ul li:gt(5):not(:last)");
/*默认情况隐藏显示的内容*/
$hide.hide();
/*找见class为showmore的元素*/
var $btn=$(".showmore");
/*给$btn添加点击事件*/
$btn.click(function(){
/*判断$hide的可见性*/
if($hide.is(':visible')){
/*元素隐藏的方法*/
$hide.hide();
/*btn找见span,改变背景,改变内容*/
$(this).find("span").eq(0).css("background","red").text("显示全部");
}else {
/*元素显示的方法*/
$hide.show();
/*btn找见span,改变背景,改变内容*/
$(this).find("span").eq(0).css("background","red").text("精简显示");
}
})
})
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
float: left;
margin: 10px 20px;
}
ul{
overflow: hidden;
}
.sub{
width: 500px;
/* height: 200px;*/
border: 1px solid #999;
}
span{
display: inline-block;
background: red;
}
.showmore{
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.showmore a{
color: #fff;
}
</style>
</head>
<body>
<div class="sub">
<ul>
<li><a href="#">奥林巴斯</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(30440)</i></li>
<li><a href="#">三星</a><i>(30440)</i></li>
<li><a href="#">松下</a><i>(30440)</i></li>
<li><a href="#">卡西欧</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">万家</a><i>(30440)</i></li>
<li><a href="#">超能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">万家福</a><i>(30440)</i></li>
<li><a href="#">河防</a><i>(30440)</i></li>
<li><a href="#">人鱼i</a><i>(30440)</i></li>
<li><a href="#">其他品牌相机</a><i>(30440)</i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部</span><span>0</span></a>
</div>
</div>
<script src="../jQuery/jquery-1.12.0.min.js"></script>
<script>
$(function(){
/*选择出索引值大于5,并且除了最后一个*/
var $hide=$("ul li:gt(5):not(:last)");
/*默认情况隐藏显示的内容*/
$hide.hide();
/*找见class为showmore的元素*/
var $btn=$(".showmore");
/*给$btn添加点击事件*/
$btn.click(function(){
/*判断$hide的可见性*/
if($hide.is(':visible')){
/*元素隐藏的方法*/
$hide.hide();
/*btn找见span,改变背景,改变内容*/
$(this).find("span").eq(0).css("background","red").text("显示全部");
}else {
/*元素显示的方法*/
$hide.show();
/*btn找见span,改变背景,改变内容*/
$(this).find("span").eq(0).css("background","red").text("精简显示");
}
})
})
</script>
// $(function(){
// $("button").click(function(){
// var a=$(this).index();
// console.log(a);
// $("ul li").hide().eq(a-1).show();
// })
// })
//<ul>
// <li>1</li>
// <li>2</li>
// <li>3</li>
// <li>4</li>
//</ul>
//<button>1</button>
//<button>2</button>
//<button>3</button>
//<button>4</button>
</html>
阅读全文
0 0
- jQuery的初步使用
- Jquery Easy UI的初步使用
- jquery的初步总结
- CSS动画的初步使用(好像比jQuery流畅)
- 使用 jQuery EasyUI 的初步感觉与思考总结
- JQuery的学习(初步)
- 对jQuery的初步认识
- jquery-easyui简介和初步使用
- jquery-easyui简介和初步使用
- 触发器的使用初步
- 索引的使用初步
- Repeater的初步使用
- FileWriter的初步使用
- webzip70的初步使用
- LayoutAnimationController的初步使用
- git的初步使用
- IplImage的初步使用
- Volley的初步使用
- Hdu 5784 How Many Triangles(极角排序+尺取法)
- JS常见面试题
- java文件读取
- C++ Prime Plus第六版--第二章复习题
- POJ1077 Eight —— 反向BFS
- jQuery的初步使用
- 【转载】postgresSQL数据库alter语句
- WOJ1114-Bullseye
- POJ 1113 Wall (凸包求周长)
- C++ const总结
- html的标签整理
- redhat虚拟机在配置中文语言是出现vmware workstation unrecoverable error: (vmui)错误
- 文件操作1
- linux 编程面试常见问题整理