JQuery选择器

n672 9年前

$(document).ready在页面框架下载完毕后就执行,而window.onload必须在页面全部加载完毕(包含图片下载)后才执行,前者的执行效率更高

JQuery选择器在定位元素的时候,即使该元素不存在不存在也不会报错

基本选择器

选 择 器                                 描 述                                                            返 回

#id                                根据给定的id匹配一个元素                                   单个元素

.class                          根据给定的类名匹配元素                                        集合元素

element                      根据给定的元素名匹配元素                                    集合元素

*                                   匹配所有元素                                                            集合元素

selector1,selector2,...,selectorN     将匹配到的元素合并后一起返回       集合元素

层次选择器

    选 择 器                                                             描 述          

$("ancestor descendant")        选取ancestor元素里所有descendant(后代)元素

$("parent>child")                       选取parent元素下的child(子)元素  

$("prev+next")                            选取紧接在prev元素后的next元素       

$("prev~siblings")                     选取prev元素之后的所有siblings(兄弟)元素 


在层次选择器中,第1个和第2个比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的机率相对较少。

可以用next()方法来代替$("prev+next")选择器,即$(".one+div")与$(".one").next("div")等效。

可以用nextAll()方法来代替$("prev~siblings")选择器,即$(".one~div")与$(".one").nextAll("div")等效。

$("ancestor descendant")选取的是ancestor的所有后代元素,而$("parent>child")选取的只是第一代子元素,间接子元素则不被选取

基本过滤选择器

    选 择 器                                                             描 述   

       :first                                      选取第一个元素

       :last                                      选取最后一个元素

       :not(selector)                     去除所有与selector匹配的元素。

       :even                                   选取所有元素中偶数的元素, 索引从0开始。

      :odd                                     选取所有元素中奇数的元素,索引从0开始。

       :eq(index)                          选取指定索引的元素,索引从0开始。

       :gt(index)                           选取索引大于指定index的元素,索引从0开始。

       :lt(index)                            选取索引小于指定index的元素,索引从0开始。

       :header                              选取所有的标题元素,如hq、h2等。

       :animated                          选取当前正在执行的所有动画元素。

内容过滤选择器

    选 择 器                                                             描 述   

    :empty                                             匹配所有不包含子元素或者文本的空元素

    :parent                                            匹配所有含有子元素或者文本的元素

    :contains(’text’)                        匹配包含给定文本的元素

    :has(selector)                                匹配含有选择器所匹配的元素的元素

可见性过滤选择器

 选 择 器                                                             描 述   

:hidden               匹配所有不可见元素,如果使用css的visibility属性让元素不显示但是占位,则不属于hidden了

:visible                匹配所有可见元素查找所有display不为none的元素,

属性过滤选择器

选 择 器                                                            描 述   

[attribute]                          获取包含指定属性的元素

[attribute=value]              获取等于给定属性的某个特定值的元素

[attribute!=value]             获取不等于给定属性的某个特定值的元素

[attribute^=value]            获取给定属性是以某些值开始的元素

[attribute$=value]            获取给定属性是以某些值结尾的元素

[attribute*=value]            获取给定属性是包含某些值得元素

[attributeFilter1][attributeFilter2][attributeFilterN] 获取满足多个条件的复合属性的元素

子元素过滤选择器

选 择 器                                                            描 述   

:nth-child(eq|even|odd|index)      获取特定位置的元素,索引从1开始

:first-child                                       获取第一个元素

:last-child                                       获取最后一个元素

:only-child                                      获取仅有的一个子元素

表单对象属性过滤选择器

选 择 器                                                     描 述

:enabled                           获取表单中所有属性为可用的元素

:disabled                           获取表单中所有属性为不可用的元素

:checked                           获取表单中所有被选中的元素

:selected                           获取表单中所有被选中的option元素

表单选择器

选 择 器                                       描 述

:input                                获取input、textarea、select

:text                                  获取单行文本框

:password                      获取所有密码框

:radio                                获取所有单选框

:checkbox                         获取所有复选框

:submit                             获取所有提交按钮

:image                              获取所有图像域

:reset                                获取所有重置按钮

:button                              获取所有按钮

:file                                   获取所有文件域