Jquery查找元素的方法汇总

通过具体的class，id,标签查找

$('div')                   // 所有div元素
$('.item')                 // class为item的元素
$('#main')                 // id为main的元素
$('#main span, .item')     // id为main内的span 或 class为item的元素
$('*')                     // 文档中所有元素
$('#main > *')             // id为main的所有的子元素
$("label + input")         // label元素的下一个input元素
$("#main ~ div")           // 同胞选择器, id为main的同一个父元素的div元素

通过属性查找、模糊查找

$ ， ！ ， * ， @ ， ^

$('div[name]')         // 有属性name的div元素
$('div[name="item"]')  // 属性name 等于 item的div元素
$('[name!="item"]')    // 属性name 不等于 item的元素
$('[name*="box_"]')    // 属性name 包含 box_的元素
$('[name$="_item"]')   // 属性name以_item 结尾 的元素
$('[name^="item_"]')   // 属性name以item_ 开始 的元素

$('a[href*="/detail/"]')               // href包含/detail/的a标签
$('a[href*="/detail/"][name="item"]') // href包含/detail/的a标签 且name 等于 item的元素

通过内容查找

$('span:contains("详情")')
$("td:empty")         // 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)")       // 所有含有p标签的div元素
$("td:parent")        // 所有的以td为父节点的元素数组

可视化过滤

$("div:hidden") // 所有的被hidden的div元素
$("div:visible") // 选择所有的可视化的div元素

表单元素查找

$(":input")       // 选择所有的表单输入元素，包括input, textarea, select 和 button\
$(":text")       //  选择所有的text input元素
$(":password")   //  选择所有的password input元素
$(":radio")      //  选择所有的radio input元素
$(":checkbox")   //  选择所有的checkbox input元素
$(":submit")     //  选择所有的submit input元素
$(":image")      //  选择所有的image input元素
$(":reset")      //  选择所有的reset input元素
$(":button")     //  选择所有的button input元素
$(":file")       //  选择所有的file input元素
$(":hidden")     //  选择所有类型为hidden的input元素或表单的隐藏域

$(”input[name='first']:checked”)
$("input:not(:checked) + span")  
$(":enabled")               //  选择所有的可操作的表单元素
$(":disabled")              // 选择所有的不可操作的表单元素
$(":checked")               //  选择所有的被checked的表单元素
$("select option:selected") // 选择所有的select 的子元素中被selected的元素

过滤器

$('#id a:last')
$("tr:first")                // 选择所有tr元素的第一个
$('.list:nth-child(2) a:first')
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child")   // div元素的第一个子节点的数组
$("div span:last-child")    // div元素的最后一个节点的数组
$("div button:only-child")  // div中只有唯一一个子节点的所有子节点的数组

$("tr:even")                // tr元素的第0，2，4... ...个元素
$("tr:odd")
$("td:eq(2)")               // 序号为2的那个td元素
$("td:gt(4)")               // 序号大于4的所有td元素
$("td:ll(4)")               // 序号小于4的所有的td元素

$(":header")
$("div:animated")

遍历函数

$('#id').contents()

$("div").find("p").andSelf().addClass("border") // div以及p,把堆栈中之前的元素集添加到当前集合中

$("p").is()                       // return boolean

$("p").map(() => {})
$("p").each(() => { 
  if ($('p').is(".center")) {.....}
})

$("p").slice(5,7)                 // 将匹配元素集合缩减为指定范围的子集
$("p").filter('.center')          // 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素

$('#id a').eq(2)                  // 将匹配元素集合缩减为位于指定索引的新元素
$('#id a').first()                // 将匹配元素集合缩减为集合中的第一个元素
$('#id a').last()                 // 将匹配元素集合缩减为集合中的最后一个元素

$('#id').closest('tr')            // 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
$('#id').find('tr')
$('#id').has('tr')                // 将匹配元素集合缩减为包含特定元素的后代的集合
$('.class').not('tr')             // 从匹配元素集合中删除元素
 
$('#id a').next()                 // 获得匹配元素集合中每个元素紧邻的同辈元素。
$('#id a').next('.red')
$('#id a').nextAll()              // 每个#id a之后的所有同辈元素
$('#id a').nextUntil()            // 每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止

$('#id a').prev()                 // 元素紧邻的前一个同辈元素
$('#id a').prev('.red')
$('#id a').prevAll()              // 元素之前的所有同辈元素
$('#id a').prevUntil()            // 之前所有的同辈元素，直到遇到匹配选择器的元素为止

$('#id a').partent()               // 每个#id a的父元素
$('#id a').partent('.item')        // 每个#id a带有class item的父元素
$('#id a').partents()              // 每个元素的祖先元素
$('#id a').partentsUntil('.table') // 每个元素的祖先元素，直到遇到匹配选择器的元素为止
$('#id a').offsetParent()          // 获得用于定位的第一个父元素

$('.list').children()
$('.list').children('.item')      // 获得匹配元素集合中每个元素的所有子元素

$('.list').siblings()             // 获得匹配元素集合中所有元素的同辈元素，由选择器筛选
$('.list').siblings('.item')