一直在用Jquery,但从来都是直接套用被人写好的代码,或是改改,实现自己的目 的。现在终于要自己系统的学习下Jquery了。相关教材是《Jquery权威指南》第二版陶国荣著;小伙伴们可以一起哦。从最基础开始就发现Jquery的选择器简直太神奇了。整个页面只有你想不到的,没有它取不到的元素类。
话不多说。搞起。
Jquery选择器的类型有哪些:
-
基本选择器
-
层次选择器
-
过滤选择器 (其中包括有简单过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象过滤等等)
-
表单选择器
下面根据这些我们要做一个简单的导航条:如图所示。
当你点击“图片分类”标题后,它会将导航内容隐藏。如图下:
再次点击标题,就会展示导航,如下:
点击“更多”,你可以将导航进行折叠或者展开。如下图:
刚开始,做些简单的例子。
主要的代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>导航条在项目中的应用</title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<style type="text/css">
body{font-size:13px;}
#divFrame{border:solid 1px #666;width:301px;overflow:hidden}
#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}
#divFrame .clsHead h3{
padding:0px;margin:0px;float:left
}
#divFrame .clsHead span{float:right;margin-top:3px}
#divFrame .clsContent{padding:8px;}
#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px;}
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px;}
#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
.GetFocus{background-color:#eee}
.sty{
padding-left:5px;
height:20px;
width:15px;
}
</style>
<script>
$(function () {//页面加载事件
$(".clsHead").click(function () {
if ($(".clsContent").is(":visible")) {
$(".clsHead h3 img").attr("src", "img/down.png");//改变图片
$(".clsContent").css("display", "none");//隐藏内容
}
else {
$(".clsHead h3 img").attr("src", "img/up.png");
$(".clsContent").css("display", "block");//显示内容
}
});
$(".clsBot>a").click(function () {
if ($(".clsBot>a").text() == "简化") {
$("ul li:gt(4):not(:last)").hide();
$(".clsBot>a").text("更多");
$(".clsBot img").attr("src", "img/left.png");
}
else {
$("ul li:gt(4):not(:last)").show().addClass("GetFocus");
$(".clsBot>a").text("简化");
$(".clsBot img").attr("src", "img/right.png");
}
});
});
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>图书分类<img src="img/up.png" class="img-responsive sty" /></h3>
</div>
<div class="clsContent">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(1110)</i></li>
<li><a href="#">青春</a><i>(1110)</i></li>
<li><a href="#">少儿</a><i>(1110)</i></li>
<li><a href="#">生活</a><i>(1110)</i></li>
<li><a href="#">社科</a><i>(1110)</i></li>
<li><a href="#">管理</a><i>(1110)</i></li>
<li><a href="#">计算机</a><i>(1110)</i></li>
<li><a href="#">教育</a><i>(1110)</i></li>
<li><a href="#">工具书</a><i>(1110)</i></li>
<li><a href="#">引进版</a><i>(1110)</i></li>
<li><a href="#">其他类</a><i>(1110)</i></li>
</ul>
<div class="clsBot"><a href="#">简化</a>
<img src="img/up.png" class="sty" />
</div>
</div>
</div>
</body>
</html>
$(".clsContent").css("display","none");获取类名称为clscontent的元素集合,实现其内容的显示和隐藏。
$(".clsHead img").attr("src","img/up.png");用来变换图片。
$("ul li:gt(4):not(:last)".hide(); 其中ul li 用来获取元素,“gt(4)”和":not(:last)"分别是两个并列的过滤选择条件。前者表示index大于4 ,后者表示不是最后一个元素。