一步一步学jQuery之选择器

一、jQuery下载地址  http://jquery.com

二、jQuery选择器

      2.1 基本选择器

             id选择器  根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义 $("#myDiv");   #foo\\:bar

             element  元素选择器  根据给定的元素名匹配所有元素  一个用于搜索的元素。指向 DOM 节点的标签名。 $("div");

            $(“.class”) 其中.class参数表示元素的CSS类别(类选择器)名称。

            * 匹配所有元素  多用于结合上下文来搜索。 由于该选择器的特殊性,它常与其他元素组合使用,表示获取其他元素中的全部子元素。 

                                          $(“div *”)   由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
             $(“sele1,sele2,seleN”)其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,
                                           如$(“#id”)、$(“.class”)、$(“selector”)选择器等
              ance desc选择器  $("ance desc") 其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)
                                          表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”,家族几代人里,都有名字里带“span”的,就可                                               以用这个ance desc选择器把这几个人给定位出来。
            parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:$(“parent > child”)
                                       child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系。
           prev + next选择器 其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系, “prev”元素最紧邻的下一个元素                                               由“next”选择器返回的并且只返回唯的一个元素。

           ~ siblings选择器也是查找prev 元素之后的相邻元素,  但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下: 

                                    $(“prev ~ siblings”)其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。                                     匹配 prev 元素之后的所有 siblings 元素
       2.2 过滤选择器
             :first过滤选择器  获取第一个元素 常常与其它选择器一起使用,获取指定的一组元素中的第一个元素。:last  获取最后个元素
             :eq(index)过滤选择器 匹配一个给定索引值的元素 其中参数index表示索引号(即:一个整数),它从0开始,如果index的值为3,表示选择的是第4个元素
             :gt(index) 匹配所有大于给定索引值的元素 :lt(index)  匹配所有小于给定索引值的元素
             :contains(text)过滤选择器 匹配包含给定文本的元素  li:contains('土豪') 土豪为什么必须加单引号呢?因为它是一个字符串,而不是一个变量,所以不加单或双引号的话                             是会报错的。
               :has(selector)过滤选择器  匹配含有选择器所匹配的元素的元素
             :hidden过滤选择器 :hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。
             :visible过滤选择器  hidden过滤选择器相反,:visible过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过                             该选择器获取。
             [attribute=value]属性选择器  [attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示                           属性名称,value参数表示属性值。
           [attribute!=value]属性选择器
            [attribute*=value]属性选择器 [attribute*=value],它可以获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,                            value参数表示对应的属性值。
             :first-child子元素过滤选择器  :first过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child子元素过滤选                        择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。
              :last-child子元素过滤选择器 与:first-child子元素过滤选择器功能相反,:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素,它也是一个集                          合,常用多个集合数据的选择处理。

    2.3   表单选择器
           :input表单选择器   它的功能是返回全部的表单元素  不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择                     的表单元素是最广的。
           :text表单文本选择器  :text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
           :password表单密码选择器
           :radio单选按钮选择器
           :checkbox复选框选择器
          :submit提交按钮选择器
           :image图像域选择器  当一个<input>元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素。
           :button表单按钮选择器 表单中包含许多类型的按钮,而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
         :checked选中状态选择器  有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。
          :selected选中状态选择器  与:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值