jquery梳理之經常使用選擇器

基於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元素