选择器

1. 基本

$("#box")  // id选择器
$("div")  // 标签选择器
$(".box")  // 类名选择器
$("*")  // 匹配所有元素
$("#box1,#box2,#box3")  // 匹配多个指定元素

2. 层级

$(".outterBox .innerBox")  // 在给定的祖先元素下匹配所有的后代元素
$(".parent>.child")  // 在给定的父元素下匹配所有的子元素
$(".prev + .next")  // 匹配所有紧接在 prev 元素后的 next 元素
$(".prev ~ .siblings")  // 匹配所有同级的兄弟结点

3. 基本筛选器

常用的：

$("i:first") // 获取匹配的第一个元素
$("li:not(.selected)")  // 获取去除类名为selected的li的其它li
$("li:even")  // 匹配所有索引值为偶数的元素，从 0 开始计数
$("li:odd")  // 匹配所有索引值为奇数的元素，从 0 开始计数
$("li:eq(0)")  // 匹配一个给定索引值的元素，从 0 开始计数
$("li:gt(0)")  // 匹配所有大于给定索引值的元素，从 0 开始计数
$("li:lt(0)")  // 匹配所有小于给定索引值的元素，从 0 开始计数
$("li:last")  // 获取最后个元素

不常用的：

$("li:lang(en)")  //选择指定语言的所有元素
$(":header")  // 匹配如 h1, h2, h3之类的标题元素
$("div:animate")  // 匹配所有正在执行动画效果的元素
$("div:not(:animate)")  // 匹配所有未在执行动画效果的元素
$("input:focus")  // 匹配当前获取焦点的元素
$(":root")  // 选择该文档的根元素
$("p:target")  // 选择由文档URI的格式化识别码表示的目标元素

4. 内容

$("div:empty")  // 选择内容为空的相应元素
$("div:parent")  // 选择有文本内容或有子元素的元素
$("div:contains('我是div')")  // 找到包含指定文本内容的元素
$("div:has(#box)")  // 找到包含指定元素的元素

5. 可见性

$("div:hidden")  // 匹配所有不可见元素，或者type为hidden的元素
$("div:visible")  // 匹配所有的可见元素

6. 属性

$("div[id]")  // 匹配包含给定属性的元素
$("div[id='box1']")  // 匹配给定的属性是某个特定值的元素
$("div[id!='box1']")  // 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$("div[id^='box']")  // 匹配给定的属性是以某些值开始的元素
$("div[id$='1']")  // 匹配给定的属性是以某些值结尾的元素
$("div[id*='ox']")  // 匹配给定的属性是以包含某些值的元素
$("div[id='box1'][class='box']")  // 复合属性选择器，需要同时满足多个条件时使用

7. 子元素

$("ul li:first-child")  // 匹配所给选择器的第一个子元素
$("ul li:last-child")  // 匹配最后一个子元素
$("ul li:nth-child(0)")  // 匹配其父元素下的第N个子元素
$("ul li:nth-last-child(0)")// 匹配其父元素下的倒数第N个子元素

8. 表单

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

$(":input")  // 匹配所有input标签
$("input:text")  // 匹配所有type为text的input标签
// 后面的以此类推
$("input:password")
$("input:radio")
$("input:checkbox")
$("input:submit")
$("input:image")
$("input:reset")
$("input:button")
$("input:file")

9. 表单对象属性

$("input:enabled")  // 匹配所有可用的表单元素
$("input:disabled")  // 匹配所有不可用的表单元素
$("input:checked")  // 匹配所有被选中的表单元素
$("select option:selected")  // 匹配所有选中的option元素

常用筛选器

$().index()

// 返回所有兄弟中排行第几
$().index()

$().eq和$().get()

// 返回一个jQuery对象
$().eq(第几个)
// 返回元素本身
$().get(第几个)

$().siblings()

// 返回除找到的节点外的兄弟节点的jQuery对象
$().siblings()

$().children()

// 返回除找到的节点下的所有子节点
$().children()