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

JQuery选择器使用

2013-12-09 14:26 260 查看

问题描述：

        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选择器——可以准确的找到页面中的元素，根据元素的不同可以分为四大类：基本选择器、层次选择器、过滤选择器

表单选择器，其中过滤选择器又可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器

表单对象属性过滤选择器

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航