问题描述：
JQuery选择器使用
问题说明：
1、在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，标题中的提示图片也随之改变
2、单击“简化”链接时，隐藏指定的内容，并将“简化”字样改为“更多”，单击“更多”链接时，
返回初始状态
效果预览：
具体实现：
navbar.jsp 文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.10.2.js"></script> <title>导航条的应用</title> <style type="text/css"> body { font-size: 13px; text-align: center; } #divFrame { border: solid 1px #e5eecc; width: 301px; overflow: hidden; } #divFrame .clsHead { background-color: #e5eecc; padding: 8px; height: 18px; cursor: hand; border: solid 1px #c3c3c3; } #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; } </style> <script type="text/javascript"> $(function() { $(".clsHead").click(function() { if ($(".clsContent").is(":visible")) { //内容可见 $(".clsHead span img").attr("src", "../img/a1.gif"); //修改图标 $(".clsContent").css("display", "none"); //隐藏内容 } else { $(".clsHead span img").attr("src", "../img/a2.gif"); //修改图标 $(".clsContent").css("display", "block"); //显示内容 } }); $(".clsBot a").click(function() { if ($(".clsBot a").text() == "简化") { $(".clsBot a").text("更多"); //$("ul li:gt(4):not(:last)").css("display", "none"); $("ul li:gt(4):not(:last)").hide(); } else { $(".clsBot a").text("简化"); //$("ul li:gt(4):not(:last)").css("display", "block"); $("ul li:gt(4):not(:last)").show(); } }); }); </script> </head> <body> <div id="divFrame"> <div class="clsHead"> <h3>图书分类</h3> <span><img src="../img/a2.gif" alt="" /></span> </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 alt="" src="../img/a5.gif"> </div> </div> </div> </body> </html>
注：
JQuery选择器——可以准确的找到页面中的元素，根据元素的不同可以分为四大类：基本选择器、层次选择器、过滤选择器
表单选择器，其中过滤选择器又可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器
表单对象属性过滤选择器