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')

Jquery查找元素的方法汇总相关推荐

JQuery获取元素的方法总结
jQuery定位元素的方法有两种,一种是通过jQuery 选择器来选择元素,可以直接获取单个或批量的元素:另一种是通过jQuery 遍历相关来选择元素,这种方法常用在获取层级较复杂的页面中的元素. W ...
HTML DOM文档对象查找元素的方法
一.HTML DOM 节点在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点. 所有的HTML元素都是元素节点. 所有 HTML ...
Linux查看目录wenjia,jQuery获取元素的方法总结
一.说明获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器选择器实例说明 #Id $('#myId') ...
jquery查找元素方法示例
$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class=& ...
jQuery 追加元素的方法如append、prepend、before
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 1 $("p").append("Some appende ...
DOM查找元素的方法总结
按HTML查找: 优点:范围可大可小,可设置条件: 包括五种方式: 1.按id查找: 2.按标签名查找:var elems = parent.getElementsByTagName(''); 3.按 ...
jQuery 追加元素的方法如append、prepend、before、after
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的 ...
jQuery 查找元素节点
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children(e ...
jquery学习之路jquery之一：jquery选择元素的方法，太神了 2012.8.2
1.css选择器例子: a 匹配所有连接<a>标签 #sss 所有id为sss的元素 a#sss.yangshi 所有id为sss并且有yangshi类的a元素 p a.sss ...

Jquery查找元素的方法汇总

Jquery查找元素的方法汇总

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

通过属性查找、模糊查找

通过内容查找

可视化过滤

表单元素查找

过滤器

遍历函数

Jquery查找元素的方法汇总相关推荐

最新文章

热门文章