jQuery选择器纪要

本文摘自锋利的jQuery...

一:基本选择器, 也就是最常用的选择器,也最为简单

1: #id - id选择器,通过html中的id属性进行选择

2: .class- class选择器,就是按照class属性进行选择

3: element- 类似HTML的标签选择器,如$("p"),表示所有的html 的p标签

4: * -匹配所有的元素,就和css里面使用*进行设置一样

5: 多选--使用,分隔选择多个以上四种的选择器,用于同时选择多种不同类型的元素,如$("p","div","#dd")


二: 层次选择器,类似根据组件之间关系进行选择

1:后代选择器 -- 与css选择器类似, $("div span"),选择div下所有的span元素

2:子元素选择器 ---类似后代选择器,也许~ 使用格式如$("div > span")

3:+选择器--- 选取指定元素紧接的下一个指定元素 $('.one + div')

4:~选择器---获取选择元素之后的所有元素,区别4,应该是获取多个元素,$('two~div')

其中,1和2比较常用,而3,4可以使用其他进行代替,如next()方法
$(".one + div") 等同于 $(".one").next("div")

也可以使用nextall()代替~选择器

siblings()方法,可以获取到同级的所有指定元素
如 $("#prev").siblings("div"),可以获取与prev同级的所有div元素

三: 过滤选择器

1:基本过滤选择器

:first 选择第一个元素
:last 选取最后一个元素
:not(selector) 去除所有给定选择器匹配的元素,其中selector为选择器,如$("input:not(.myClass)"),选取class不是
myClass的
:even 选取索引是偶数的所有元素,索引从0开始, 如$("input:even")
: odd 选取索引是奇数的所有元素,索引从0开始, 如$("input:odd")
:eq(index) 返回索引为index的元素,如$("input:gt(1)")
:gt(index) 选取索引大于index的元素,但不包括index,选择大于1的元素
:lt(index) 选择索引小于index的元素,但不包括index,如:$("input:lt(1)")
:header 选择所有的标题元素,$("header")选取网页中所有的<h1>,<h2>等元素
:animated 选取当前正在执行动画的所有元素,如$("div:animated"),选择正在执行动画的div元素


2:内容过滤选择,主要体现在所包含的子元素和文本内容上

:contains(text) 包含指定的text内容文本
:empty 选择不包含子元素和文本的空元素
:has(selector) 选择含有选择器匹配的元素的元素
:parent 选择含有子元素或文本的元素

3:可见性过滤选择,基于元素的可见与不可见状态,包括hidden的input与style中的display和visable属性

:hidden 不可见的元素
:visable 可见的元素

4:属性过滤选择,根据html标签中的属性进行元素的选择,可作为其他选择器进行代替使用

[attribute] 选择拥有此属性的元素
[attribute=value] 选择属性值为value的元素
[attribute!=value] 选择属性值不为value的元素
[attribute^=value] 选择属性值开头为value的元素...类似正则
[attribute$=value] 选择属性值结尾为value的元素
[attribute*=value] 选择属性值包含value的元素

注意:上面的选择器,可以组合使用[..][..][..]

5:子元素过滤选择器,用于过滤选择子元素

:nth-child(index/even/odd/equation) 选择指定元素的指定子元素
:first-child 选择每个指定元素的第一个子元素,如$("ul li:first-child"),选择每个ul中第一个li
:last-child 选择每个指定元素的最后一个子元素
: only-child 选择每个指定元素中只有唯一子元素的子元素,$("ul li:only-child") 选择只有一个子元素的ul中的li

上述的选择器,注意是用于指定元素下符合条件的子元素

6:表单对象属性过滤选择器,根据表单内,常见元素里面一些特有的属性进行过滤

:enabled 选择所有可用的元素
:disable 选择所有不可用的元素
:checked 选择所有被选中的元素(单选,复选)
:selected 选择所有被选中的选项元素

例子为:$("#form1 :enabled") $("input: checked") $("select :selected")
上述选择器更多的是使用特别属性,对表单内元素进行选择

7:表单元素,对表单内不同类型的元素进行选择

:input 所有的input,textarea,select,button
:text 所有的单行文本框
:password: 所有的密码框
:radio 所有的单选框
:checkbox 所有的多选框
:submit 所有的提交按钮
:image 所有的图像按钮
:reset 所有的重置按钮
:button 所有的按钮
:file 所有的上次域
:hidden 所有的不可见元素

上述一般都配合form进行使用 如$("#form1 :input")


8:其他 :
1:注意使用 \\对特殊符号进行过滤
2:注意空格的问题,在选择器中,有无空格可能造成两种不同的效果

其他一些常用的jQuery方法
show() 显示组件
css('key','value') 设置指定样式属性
text(string) 设置所有匹配元素的文本内容
filter(expr) 筛选出与指定表达式匹配的元素集合
addClass(class) 为指定元素添加指定的类名,应该不会修改掉原有的样式
removeclass(class) 进行移除
is(":visable")判断是否可视

toggle(fun1,fun2) 用于点击时执行切换触发的事件