基于CSS规范选择元素

id选择器

$('#id')

class选择器

$('.class')//相当于原生：document.getElementsByClassName('class')

元素选择器(直接传入html标签)

$(div | p | span | input ...)//相当于原生：document.getElementsByTagName('div');

通配符选择器

$('*')//相当于原生：document.getElementsByTagName('*');

层级选择器

$('parent > child')//选择parent节点下的child节点，child节点只能是直接节点，如果是child下的child节点则获取不到
 
$('parent child')//选择parent节点下的所有child节点
 
$('current + dom')//选择与current节点同级的下一个dom节点（有且仅有一个）
 
$('current ~ other')//选择与current节点同级的所有other节点

基于DOM进行选择元素

    $('div:first')    //匹配第一个元素
    $('div:last')    //匹配最后一个元素
    $('div:not(selector)')    //匹配所有，但不匹配selector
    $('div:eq(index)')    //返回指定index元素的jquery对象
    $('div:lt|gt(index)')    //返回小于或大于指定index元素的集合
    $('div:[ odd | even ]')    //返回索引为 奇数 或者 偶数 的元素集合
    $('div:header')    //返回所有h1 ~ h6的集合
    $('div:root')    //返回根节点元素
    $('div:animated')    //返回所有动画元素
    $('div:has(span)')    //返回div下包含的所有span元素
    $('div:parent')    //返回div下所有包含子元素或者文本节点的元素
    $('div:empty')    //返回div下所有没子元素或者文本节点的元素

基于内容选择元素

$('div:contains(匹配的文本)')

基于隐藏或显示状态的元素

$('dom:visible')    //返回所有显示的元素
$('dom:hidden')    //返回所有隐藏的元素，其中包含display=none,visibility=show,opacity=0,隐藏表单

表单选择器

$(':input')    //匹配所有input radio checkbox textarea button select元素
$(':text')    //匹配所有文本框元素
$(':password')    //匹配所有密码框元素
$(':radio')    //匹配所有单选框元素
$(':checkbox')    //匹配所有复选框元素
$(':image')    //匹配所有图像域
$(':submit')    //匹配所有提交按钮
$(':reset')    //匹配所有重置按钮
$(':file')    //匹配所有文本域
$('dom:enabled')    //匹配所有可用元素
$('dom:disabled')    //匹配所有禁用元素
$('dom:checked')    //匹配所有选中的input元素
$('dom:selected')    //匹配所有选中的option元素

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！