为了账号安全,请及时绑定邮箱和手机立即绑定

jqurey查找类元素,最全方法汇总

标签:
JQuery

    今天给大家带来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查找类元素,最全方法汇总的全部内容,更多内容干货可关注慕课网~


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消