基本选择器
id选择器
id 选择器,根据 id查询标签对象
var obj = $("#id");
标签名选择器
标签名选择器,根据指定的标签名查询标签对象
var obj = $("p");
类选择器
类选择器,根据指定的类名名查询标签对象
var obj = $(".gender");
属性名选择器
属性名选择器,根据指定的属性名查询标签对象
var obj = $("[name=email]");
层级选择器
-
在给定的祖先元素下匹配所有的后代元素
form 中 所有input标签
$("form input")
-
在给定的父元素下匹配所有的子元素
form 中 所有子级input元素
$("form > input")
-
匹配所有紧接在 prev 元素后的 next 元素
匹配所有跟在 label 后面的 input 元素
$("label + input")
-
匹配 prev 元素之后的所有 siblings 元素
找到所有与表单同辈的 input 元素
$("form ~ input")
过滤选择器
基本过滤器
-
:frist
获取匹配的第一个元素
$('li:first')
; -
:last
获取匹配的最后个元素
$('li:last');
-
:not
查找所有未选中的 input 元素
$("input:not(:checked)")
-
:even
查找表格的1、3、5…行(即索引值0、2、4…)
$("tr:even")
-
:odd
查找表格的2、4、6行(即索引值1、3、5…)
$("tr:odd")
-
:eq
查找第二行
$("tr:eq(1)")
-
:gt
查找第二第三行,即索引值是1和2,也就是比0大
$("tr:gt(0)")
-
:lt
查找第一第二行,即索引值是0和1,也就是比2小
$("tr:lt(2)")
-
:header
匹配如 h1, h2, h3之类的标题元素
给页面内所有标题加上背景色
$(":header").css("background", "#EEE");
-
:animated
匹配所有正在执行动画效果的元素
只有对不在执行动画效果的元素执行一个动画特效
$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });
-
:focus
触发每一个匹配元素的focus事件。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。
当页面加载后将 id 为 ‘login’ 的元素设置焦点:
$("#login:focus");
内容过滤器
-
:contains(text)
匹配包含给定文本的元素
查找所有包含“John”的div元素
$("div:contains('John')")
-
:empty
匹配所有不包含子元素或者文本的空元素
查找所有不包含子元素或者文本的空元素
$("td:empty")
-
:has(selector)
匹配含有选择器所匹配的元素的元素
给所有包含p元素的div元素添加一个text类
$("div:has(p)".addClass("test"));
-
:parent
匹配含有子元素或者文本的元素
查找所有含有子元素或者文本的 td 元素
$("td:parent");
表单过滤器
-
:input
匹配所有 input, textarea, select 和 button 元素
查找所有的input元素,下面这些元素都会被匹配到。
$(":input")
-
:text
匹配所有的单行文本框
查找所有文本框
$(":text");
-
:password
匹配所有密码框
查找所有密码框
$(":password");
-
:radio
匹配所有单选按钮
查找所有单选按钮
$(":radio");
-
:checkbox
匹配所有复选框
查找所有复选框
$(":checkbox");
-
:submit
匹配所有提交按钮
查找所有提交按钮
$(":submit");
-
:image
匹配所有图像域
$(":image");
-
:reset
匹配所有重置按钮
$(":reset");
-
:button
匹配所有按钮
$(":button");
-
:file
匹配所有文件域
$(":file");
-
:hidden
匹配所有不可见元素,或者type为hidden的元素
$("input:hidden")
表单对象属性
-
:enabled
匹配所有可用元素
$("input:enabled")
-
:disabled
匹配所有不可用元素
$("input:disabled")
-
:checked
匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
$("input:checked")
-
:selected
匹配所有选中的option元素
$("select option:selected")