jQuery选择器

最新推荐文章于 2020-08-06 17:54:47 发布

sf_climber

最新推荐文章于 2020-08-06 17:54:47 发布

阅读量318

点赞数

分类专栏： javaEE 文章标签： jQuery选择器 jQuery导航条 jQuery前端

本文链接：https://blog.youkuaiyun.com/sf_climber/article/details/71374301

版权

javaEE 专栏收录该内容

6 篇文章

订阅专栏

文章参考：机械工业出版社，陶国荣，《jQuery权威指南》

1.基本选择器

基本选择器
选择器	功能	返回值
#id	根据给定的id匹配一个元素	单个元素
element	根据给定的元素名称匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,...,selectorN	将每个选择器匹配的元素合并后一起返回	元素集合

2.层次选择器

层次选择器
选择器	功能	返回值
ancestor descendant	根据祖先匹配所有的后代元素	元素集合
parent>child	根据父元素匹配所有的子元素	元素集合
prev+next	匹配所有紧接在prep元素后的相邻元素	元素集合
prev~siblings	匹配prev元素之后的所有兄弟元素	元素集合

3.简单过滤选择器

简单过滤选择器
选择器	功能	返回值
first()或:first	获取第一个元素	单个元素
las()或:last	获取最后一个元素	单个元素
:not(selector)	获取出给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1、h2…	元素集合
:animated	获取正在执行动画效果的元素	元素集合

4.内容过滤选择器

内容过滤选择器
选择器	功能	返回值
:contain(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

5.可见性过滤选择器

可见性过滤选择器
选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

6.属性过滤选择器

属性过滤选择器
选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取给定的属性的值等于某个特定值的元素	元素集合
[attribute!=value]	获取给定的属性的值不等于某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性的值是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性的值是以某些值结束的元素	元素集合
[attribute*=value]	获取给定的属性的值包含某些值的元素	元素集合
[selector1] [selector2] [selectorN]	获取满足多个条件的复合属性的元素	元素集合

7.子元素过滤选择器

子元素过滤选择器
选择器	功能	返回值
:nth-child(eq\|even\|odd\|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

8.表单对象属性过滤选择器

表单对象属性过滤选择器
选择器	功能	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为可不用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中option的元素	元素集合

9.表单选择器

表单选择器
选择器	功能	返回值
:input	获取所有input、textarea、select	元素集合
:text	获取所有文本框	元素集合
:password	获取所有密码框	元素集合
:radio	获取所有单选按钮	元素集合
:checkbox	获取所有复选框	元素集合
:submit	获取所有提交按钮	元素集合
:image	获取所有图像域	元素集合
:reset	获取所有重置按钮	元素集合
:button	获取所有按钮	元素集合
:file	获取所有文件域	元素集合

10.最后给上一个利用jQuery选择器写的导航条吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行条</title>
    <script type="text/javascript" src="jQuery/jquery-2.1.4.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;
        }
    </style>

    <script type="text/javascript">
        $(function () {
           $(".clsHead span img").click(function(){//图片点击事件
               if($(".clsContent").is(":visible")){//内容可见
                   $(".clsHead span img").attr("src","images/open.gif");//改变图片
                   $(".clsContent").css("display","none");//隐藏内容
               }else{//内容不可见
                   $(".clsHead span img").attr("src","images/off.gif");
                   $(".clsContent").css("display","block");
               }

           });

            //热点连接单击事件
            $(".clsBot>a").click(function () {
               //如果内容为'简化'
                if($(".clsBot>a").text()=="简化"){
                    //隐藏index号大于4，且不是最后一个的元素
                    $("ul li:gt(4):not(:last)").hide();//hide隐藏元素
                    //将字符内容改为更多
                    $(".clsBot>a").text("更多");
                }else{
                    $("ul li:gt(4):not(:last)").show();//.addClass("GetFocus");
                    //将字符内容改为简化
                    $(".clsBot>a").text("简化");
                }
            });
        });
    </script>
</head>
<body>
<div id="divFrame">
    <div class="clsHead">
        <h3>图书分类</h3>
        <span><img src="images/off.gif"></span>
    </div>
    <div class="clsContent">
        <ul>
            <li><a href="#">小说</a><i>(1110)</i></li>
            <li><a href="#">文艺</a><i>(230)</i></li>
            <li><a href="#">青春</a><i>(1430)</i></li>
            <li><a href="#">少儿</a><i>(1560)</i></li>
            <li><a href="#">生活</a><i>(870)</i></li>
            <li><a href="#">社科</a><i>(1460)</i></li>
            <li><a href="#">管理</a><i>(1450)</i></li>
            <li><a href="#">计算机</a><i>(1780)</i></li>
            <li><a href="#">教育</a><i>(930)</i></li>
            <li><a href="#">工具书</a><i>(3450)</i></li>
            <li><a href="#">引进版</a><i>(980)</i></li>
            <li><a href="#">其他类</a><i>(3230)</i></li>
        </ul>
    <div class="clsBot"><a href="#">简化</a> </div>
    </div>
</div>
</body>
</html>

运行结果如下：

点击"×"：