jQuery选择器详解

一，基本选择器



<strong>/*分别是id选择器，元素选择器，类选择器，匹配所有元素，合并选择器*/

$(function(){
    $("#id").html("hello world");   //print 等同innerHTML
})
$(function(){
    $("div p").html("hello world");
})
$(function(){
    $(".class").html("hello world");
})
$(function(){
    $("*").html("hello world");
})
$(function(){
    $("#id,p").html("hello world");
})</strong>


二，层次选择器

$("#id p") //匹配后代元素。即id的后代（无论多少代） $("#id->p") //id的子元素。仅一代 $("#id+p") $("#id").next() //下一个相邻的元素 $("#id").nextAll() $("#id").prevAll() $("#id").prev() $("#id").preUntil(elemnet) //区间 $("#id").nextUntil(element) $("#id~p") //之后的所有兄弟元素 $("#id").siblings //所有的兄弟元素，不论前后

三，简单过滤选择器


$("li:first") //获取第一个元素 $(“li”).first() $("li:last") //最后一个 $("li:not(.NotClass)") //NotClass是一个类名，去除NotClass的其他元素 $("li:even") //偶数，注意li索引值是从0开始 $("li:odd") //奇数 $("li:eq(1)") //指定索引值为1的 $("li:gt(1)") //大于1 $("li:lt(4)") //小于4 $(":header") //选择标题类元素 $("#spanMove:animated") //选择id为spanMove的元素。获取正在执行动画效果的元素。选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt(),然后执行该函数，选择器才能获取动画效果元素。

四，内容过滤选择器

:contains(text)

获取包含给定文本的元素

:empty

获取所有不包含子元素或者文本的空元素

:has(selector)(span,.classname,#idname)

获取含有选择器所匹配的元素的元素

:parent

获取含有子元素或者文本的元素

.filter(selector)

获取含有选择器所匹配的元素的元素

.not(selector)

跟上面的相反

 

五，可见性过滤选择器

:hidden

获取所有不可见元素，或者type为hidden的元素

:visible

获取所有可见元素

 

六，属性过滤选择器

[attribute]

包含给定属性的元素

[attribute=value]

等于给定元素

[attribute!=value]

不等于

[attribute^=value]

开头是

[attribute$=value]

结尾是

[attribute*=value]

含有

[selector1][selector2][selector3]

同时满足1,2,3

 

七，子元素过滤选择器

a:nth-child(eq|even|odd|index)

获取每个父元素下的特定位置元素，索引号从1开始

:first-child

 

:last-child

 

:only-child

获取每个父元素下的仅有一个子元素

P.S这里是指a的父元素

 

八，表单对象属性过滤选择器

:enabled

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

:disabled

不可用

:checked

被选中  这个是checkbox的

:selected

被选中option的元素   这个是select里面的option

P.S：表单对象就是那些input，select之类啥的，让你输入让你选择的那些

例子：

$(“#form1 input:enable”)

$(“select option:selected”)

 

九，表单选择器

:input

获取所有input，textarea，select

:text

所有单行文本框

:password

密码框

:radio

单选框

:checkbox

复选框

:submit

提交按钮

:image

图像域  <input type=”image” title=”Image” src=””/>

:reset

重置按钮

:button

按钮

:file

文件域  <input type=”file” />我们上传东西那个预览