jquery选择器

[size=medium]jquery选择器

[color=red]基本选择器[/color]

* id选择器
$("#id") 等价与 js的getElementById("id");

$("#id")获取的永远是对象，即使页面是没有id是“id”的元素
所以$("#id").css("color","green")永远不会报错
如果要检测所选对象是否存在时，可以用
if($("#id").length>0) || if($("#id")[0])
* class选择器
$(".test") 选取所有class为test的元素
* element选择器
$("element") exmaple：$("p"),$("div"),$("tr")
* 选择所有 $("*")
* $("selector1,selector2,selector3,...")
多个选择器用,隔开，结果为并集 如：$("#id,span,.one")


[color=red] 层次选择器[/color]

* $("acestor descendant") (1)
选择acestor下的所有descendant
--$("body div") 选择body下的所有div
* $("parent>child") (2)
选择parent下的所有子
--$("body > div") 选取所有父节点是body的div

（1），（2）的区别（1）是所有后代可以包含多级子，（2）是选择直接子

* $("prev+next")
选取紧跟在prev后的next元素，只选一个
-- $(".one+div")选取class为one的下一个div
* $("prev+siblings")
选取prev后的所有siblings元素
--$("#one~div")选取id位one的元素后的所有<div>兄弟节点


[color=red]过滤选择器[/color](以tr为例)

:first--$("tr:first")选取第一个匹配的元素
--$("script:first").attr("src");
:last-- $("tr:last")选取最后一个匹配的元素
:not(selector)
--$("tr:not(.one)")选取class属性不是one的所有tr
:even--$("tr:even")偶数行
: odd--$("tr:odd")奇数行
:eq(index)--$("tr:eq(2)") 第3行
:gt(index)--$("tr:gt(2)")第3行后的所有行
:lt(index)--$("tr:lt(2)") 1~2行

even,odd,eq,gt,lt的index都是从0开始，gt，lt不包括当前给定下标元素

$(":header")选择所有的标题元素，如h1,h2,...
$(":animated")选取正在执行动画的所有元素


[color=red]子元素过滤选择器[/color]

:nth-child(index/even/odd/equation)
选取每个父元素的索引/奇/偶/表达式 下子元素
--$("div:nth-child(2)")
--$("div:nth-child(even/odd)")
上面的索引从1开始

--$("div:nth-child(3n)") 选取div下index是3的倍数的元素
--$("div:nth-child(3n+1)")
n从0开始
:first-child 选取每个父元素下的第一个元素
--$("ul li:first-child") 选取所有ul下的第一li
:last-child
: only-child 如果某个元素是他父元素中的唯一子元素，将会匹配
--$("ul li:only-child") 选取只包含一个li的ul中的li


[color=red]内容过滤选择器[/color]

:contains(text)选取文本内容为“text”的元素
--$("div:contains('aa')")选取所有内容包含aa的div
:has(selector)选取含有selector所匹配的元素
--$("div:has(span)") 含有span标签的div

:empty 选取空元素（不包含子元素也没有文本元素）
--$("div:empty")
:parent 与empty相反
--$("div:parent")含有子元素的div

:hidden 选取所有不可见元素
--$(":hidden"),选取包括 <input type="hidden">,
<div style="display:none">,<div style="visibility:hidden">
--$("input:hidden")
:visible 选取所有可见元素
--$("div:visible")


[color=red]属性过滤器[/color]

[attr]拥有attr属性的元素
--$("div[id]")拥有属性id的div
[attr=value] 属性为特定值
--$("div[name=one]") name属性为one的div
[attr!=value] 属性 != 给定值

[attr^=value] 属性以给定值开头
--$("div[title^=hel]") title属性以hel开头的div
[attr$=value] 属性以给定值结尾
[attr*=value] 属性值含有给定值



[color=red]表单对象过滤器[/color]

:input,:text,:password,:radio,:checkbox,:submit,
:image,:reset,:button,:file,:hidden


:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框）
--$(input:checked)
--$(input[type=radio]:checked)
:selected 选取所有被选中的元素（下拉列表）
--$("select :selected")
[/size]


*选择器选择是如果要匹配的属性含有特殊字符（'.', '#', '(', ']'），需要转义\\
--$("div.one\\#")

ps：设置选择器环境

$("div.foo").click(function() {
  $("span", this).addClass("bar");//在当前对象中查询span
});