jQuery学习笔记--选择器

#id

$("#myDiv");

说明：通过id值指定

 

element

$("div");

 说明：通过元素名称指定

 

.class

$(".myClass");

 说明：通过class值指定

*

$("*");

 说明：指定所有元素

 

selector1,selector2,selectorN

$("div,span,p.myClass")

 说明：多重选择，用逗号分开

ancestor descendant

$("form input")

 说明：所有后代选择，在form下指定所有input

parent > child

$("form > input")

 说明：子级元素指定，在form子级中指定input（在同级和同级子代中）

prev + next

$("label + input")

 说明：匹配所有紧接在 label 元素后的 input元素（label元素之后的同级元素）

prev ~ siblings

$("form ~ input")

说明：匹配所有与form元素同辈的input元素

:first

$('li:first');

 说明：获取第一个元素

:last()

$('li:last')

 说明：获取最后个元素

:not(selector)

$("input:not(:checked)")

 说明：反向选择，查找所有不包含checked的 input 元素

:even

$("tr:even")

 说明：匹配所有索引值为 偶数 的元素，从 0 开始计数

:odd

$("tr:odd")

 说明：匹配所有索引值为 奇数 的元素，从 0 开始计数

:eq(index)

$("tr:eq(1)")

 说明：匹配一个给定索引值的元素，从 0 开始计数。在tr元素中找到值含1的元素

:gt(index)

$("tr:gt(0)")

 说明：匹配所有大于给定索引值的元素

 

:lt(index)

$("tr:lt(2)")

 说明：匹配所有小于给定索引值的元素

:header

$(":header").css("background", "#EEE");

 说明：匹配页面上所有的<h1>至<h2>，并通过css样式改变它们的背景色

:animated

$("div:not(:animated)").animate({ left: "+=20" }, 1000);

 说明：只有对不在执行动画效果的元素执行一个动画特效

:focus

$("*:focus")

 说明：匹配所有获得焦点的元素。

:contains(text)

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

 说明：匹配包含给定文本的元素

:empty

$("td:empty")

 说明：匹配所有不包含子元素或者文本的空元素

:has(selector)

$("div:has(p)").addClass("test");

说明：匹配含有选择器所匹配的元素的元素，如果div元素包含p元素，则为其添加Class属性，并赋值"test"

:parent

$("td:parent")

 说明：匹配含有子元素或者文本的元素，查找所有含有子元素或者文本的 td 元素

:hidden
示例：$("tr:hidden")
说明：匹配所有不可见元素，或者type为hidden的元素。查找隐藏的 tr元素

:visible

$("tr:visible")

 说明：匹配所有的可见元素

[attribute]

$("div[id]")

 说明：匹配包含给定属性的元素,指定具有id属性的div元素

[attribute=value]

$("input[name='newsletter']").attr("checked", true);

 说明：查找所有 name 属性是 newsletter 的 input 元素，并为其增加checked属性，赋值true

[attribute!=value]

$("input[name!='newsletter']").attr("checked", true);

 说明：与上一条相反

[attribute^=value]

$("input[name^='news']").attr("checked", true);

 说明：查找 name 属性开头是 news 值的 input 元素

[attribute$=value]

$("input[name$='letter']").attr("checked", true);

 说明：查找 name 属性结尾是 letter 值的 input 元素

[attribute*=value]

$("input[name*='slet']").attr("checked", true);

 说明：查找 name 属性含 slet 值的 input 元素

[selector1][selector2][selectorN]

$("input[id][name$='man']")

 说明：复合属性选择器，需要同时满足多个条件时使用。

:nth-child

$("ul li:nth-child(2)")

 说明：匹配其父元素下的第N个子或奇偶元素，:eq()是从0开始
还可以使用：
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

:first-child

$("ul li:first-child")

 说明：指定所有ul下的第一个li

:last-child

$("ul li:last-child")

 说明：指定所有ul下的最后一个li

:only-child

$("ul li:only-child")

 说明：如果某个元素是父元素中唯一的子元素，那将会被匹配。如果父元素中含有其他元素，那将不会被匹配。

:input

$(":input")

 说明：匹配所有 input, textarea, select 和 button 元素

:text

$(":text")

 说明：匹配所有的单行文本框

:password

$(":password")

 说明：匹配所有密码框

:radio

$(":radio")

 说明：匹配所有单选按钮

:checkbox

$(":checkbox")

 说明：匹配所有复选框

:submit

$(":submit")

 说明：匹配所有提交按钮

:image

$(":image")

 说明：匹配所有图像域

:reset

$(":reset")

 说明：匹配所有重置按钮

:button

$(":button")

 说明：匹配所有按钮

:file

$(":file")

 说明：匹配所有文件域

:hidden

$("tr:hidden")
$("input:hidden")

说明1：查找隐藏的 tr
说明2：匹配type为hidden的元素

:enabled

$("input:enabled")

 说明：匹配所有disabled属性为可用的元素

:disabled

$("input:disabled")

 说明：匹配所有disabled属性为不可用的元素

:checked

$("input:checked")

 说明：查找所有选中的复选框元素

:selected

$("select option:selected")

 说明：查找所有选中的选项元素