jquery选择器常用查找方式

三大基础选择器

ID选择器：

$("#myid")

类选择器：

$(".myclass")

标签选择器：

$("input") 

伪元素

伪元素input：

$(":input") //input+textarea+select

伪元素header：

$(":header") //h1+h2+...

伪元素animated：

$(":animated") //暂时不清楚取的是哪些元素，可能是html5里的动画相关，前端菜鸡不太懂。

伪元素hidden：

$(":hidden") //所有隐藏的元素，display:none和type="hidden"

伪元素visible：

$(":visible") //所有显示的元素

查找父元素

获取上一级父元素：

$("input[name='colors']").parent()

查找父元素：

$("input[name='colors']").parents("div[name='myparentdiv']")
//或者
$('div[name=\'myparentdiv\']:has("input[name=\'colors\']")')

查找子元素

获取所有一级子元素：

$("div[name='mydiv']").children()
$("div[name='mydiv'] > input[name='myinput']")

查找所有层级子元素：

$("div[name='mydiv']").find("input[name='myinput']")
//或者加空格也是一样的效果
$("div[name='mydiv'] input[name='myinput']")

获取指定位置的子元素：

$("div[name='mydiv']:nth-child(5)") 

获取第一个子元素：

$("div[name='mydiv']:first-child")

获取最后一个子元素：

$("div[name='mydiv']:last-child")

获取独生子女：

$("div[name='mydiv']:only-child")

查找兄弟元素

获取所有兄弟元素：

$("div[name='mydiv']").siblings()

查找后面第一个兄弟元素：

$("div[name='mydiv']").next() //查跟在div后面的第一个兄弟元素
$("div + input") //查跟在div后面的一个input兄弟元素

查找后面所有的兄弟元素：

$("div[name='mydiv']").nextAll() //查跟在div后面的所有兄弟元素
$("div ~ input") //查跟在div后面的所有input兄弟元素

获取前面第一个兄弟元素：

$("div[name='mydiv']").prev()

获取前面所有的兄弟元素：

$("div[name='mydiv']").prevAll()

多元素：

$("input,textarea,select") 

查找指定索引元素

获取指定索引元素：

$("input:eq(0)")//获取第一个元素
//或者
$($("input")[0])
//或者
$($("input").get(0))

获取所有大于给定索引值的元素：

$("input:gt(5)")

获取所有小于给定索引值的元素：

$("input:lt(5)")

第一个元素：

$("input:first")

最后一个元素：

$("input:last")

奇数元素：

$("input:odd")

偶数元素：

$("input:even")

查找指定属性的元素

查找有指定属性的元素：

$("input[myattr]") 
$("input[myattr1][myattr2]") 

属性等于匹配：

$("input[myattr='xxx']")  //xxx上的引号可以省略
$("input[myattr1='xxx'][myattr2='yyy']")

属性不等于匹配：

$("input[myattr!='xxx']") 

属性前缀匹配：

$("input[name^='color']")

属性后缀匹配：

$("input[name$='color']")

属性包含匹配：

$("input[name*='color']")

属性不包含匹配：

$("input").not("[name*='color']")

其他

文本查找

文本内容包含匹配：

$("div:contains('mytext')")

文本内容为空并且无子元素匹配：

$("div:empty")

文本内容非空或者有子元素匹配：

$("div:parent")

复选框

选中的复选框：

$(":input[name='colors']:checked")

未选中的复选框：

$(":input[name='colors']:not(:checked)")

下拉框

选中的下拉框：

$(":input[name='colors']:selected")

未选中的下拉框：

$(":input[name='colors']:not(:selected)")

有效无效

有效的元素：

$("input:enabled")

无效的元素：

$("input:disabled")