JQuery选择器使用

问题描述：

        JQuery选择器使用

 

问题说明：

      1、在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，标题中的提示图片也随之改变

      2、单击“简化”链接时，隐藏指定的内容，并将“简化”字样改为“更多”，单击“更多”链接时，

返回初始状态

 

效果预览：

 image

 image

image

具体实现：

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

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

表单对象属性过滤选择器

posted @ 2013-12-09 14:26  罗松超  阅读(338)  评论(0)  编辑  收藏  举报