今天给大家带来jqurey查找类元素的方法汇总,有需要的同学可以收藏哦~
通过内容查找
$('span:contains("详情")')
$("td:empty") // 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") // 所有含有p标签的div元素
$("td:parent") // 所有的以td为父节点的元素数组
通过属性查找、模糊查找
$('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的元素
通过具体的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元素
表单元素查找
$(":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的元素
可视化过滤
$("div:hidden") // 所有的被hidden的div元素
$("div:visible") // 选择所有的可视化的div元素
过滤器
$('#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')
好啦,以上便是jqurey查找类元素,最全方法汇总的全部内容,更多内容干货可关注慕课网~