JQ中的选择器与过滤器

一：选择器 选择符($)

id选择器：$("#id")

多个id选择器：$("#id1,#id2")

标签选择器：$(“a”)

css选择器：$(".class")

多个css选择器：$(".class,.class1")

选择所有html元素：$("*")

选择多个html元素：$(“a,div”)

祖父后代选择器：$(“div a”)

父子选择器：$(“div > a”)

元素后面紧跟的选择器：$(“div + a”)

兄弟选择器：$(“div ~ a”)

二. 过滤器
选取类名为class的第一个元素：$(".class:first")

选取类名为class的最后一个元素：$(".class:last")

选取input中类名不为class的元素：$(“input:not(.class)”)

选取input中序号是双数的元素：$(“input:even”) 注：序号都是0开始

选取input中序号是单数的元素：$(“input:odd”)

选取input中指定序号的元素：$(“input:eq(number)”)

选取input中小于指定序号的元素：$(“input:lt(number)”)

选取input中大于指定序号的元素：$(“input:gt(number)”)

选取所有h1到h6的标签：$(":header")

三. 内容过滤器
选取元素中包含指定文本的元素：$(“div:contains(文本)”)

选取元素中为空或不包含子元素的元素：$(“td:empty()”)

选取元素中不为空或包含子元素的元素：$(“td:parent()”)

选取元素中包含指定子元素的元素：$(“div:has§”)

四. 可见性过滤器
选取指定元素的可见元素：$(“div:visible”) 注：元素默认是可见的

选取指定元素的不可见元素：$(“div:hidden”)

五. 属性过滤器

选取指定元素包含属性的元素：

$(“div[id]”) -->div中有id属性的元素

$(“div[id=id1]”) -->div中有id属性且为id1的元素

$(“div[id!=id1]”) -->div中有id属性但不为id1的元素

$(“div[id^=i]”) -->div中有id属性且为i开头的元素

$("div[id$=i]") -->div中有id属性且为i结尾的元素

$(“div[id*=i]”) -->div中有id属性且属性值中包含i的元素

复合属性过滤器

$(“div[id*=i][class!=class]”) -->就是可以多选几个条件

六. 子元素过滤器

$(“input:nth-child(even)”) -->选取input中的偶数子元素

$(“input:first-child”) -->选取input中第一个子元素、

$(“input:first-last”) -->选取input中最后一个子元素

$(“div p:only-child”) -->选取div中只有一个p元素且只有一个子元素的元素