jQuery选择器

来源：互联网发布：怎么看淘宝商品的类目编辑：程序博客网时间：2024/06/06 09:16

文章参考：机械工业出版社，陶国荣，《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>

运行结果如下：

点击"×"：

点击"简化":

0 0