Jquery 常用选择器总结

Posted 2021-04-08 程序员之家

Jquery的选择器可谓之强大无比，用过很多次总是记不得，于是选择总结一下，顺便分享给大家。

基本选择器

$("*") 选取页面所有元素

$("p,div") 选取p,div标签元素

$(".con")选取class="con"的元素

$("#one") 选取id="one"的元素

层次选择器

parent>child 选取直系子元素。

prev+next 选取下一个兄弟元素，相当于next();

prev~siblings 选取prev的所有兄弟元素，等同于nextAll();

基础过滤选择器

$("p:first") 选取匹配的第一个元素

$("p:last") 选取匹配的最后一个元素

$("p:not('div')")去除与给定选择器匹配的元素

$("tr:event")匹配索引值为偶数的元素，从0开始计数；

$("tr:odd") 匹配索引值为奇数的元素，从0开始计数；

$("tr:eq()")匹配一个给定索引值的元素，从0开始计数；

$("tr:gt(0)")匹配所有大于给定索引值的元素，从0开始计数；

$("tr:lt(0)")匹配所有小于给定索引值的元素，从0开始计数；

$(":header") 匹配如h1,h2,h3之类的标题元素；

内容过滤选择器

$("div:contains('hello')")匹配包含给定文本的元素；

$("td:empty")匹配所有不包含子元素或者文本的空元素；

$("div:has(p)")匹配含有选择器匹配的元素的元素；

$("td:parent")匹配含有子元素或者文本的元素；

属性过滤选择器

$("input[name='news']")匹配name=news的元素；

$("input[name!='news']")匹配name不等于news的元素；

$("input[name^='news']")匹配name值以news开头的元素；

$("input[name$='news']")匹配name值以news结尾的元素；

$("input[name*='news']")匹配name值包含news的元素；

$("input[id][name$='news']")匹配属性id,属性name以news结尾的元素

子元素过滤选择器

$("ul li:nth-child(2)")匹配其父元素下的第二个字元素;

$("ul li:first-child")匹配第一个子元素；

$("ul li:last-child")匹配最后一个子元素；

$("ul li:only-child")匹配某个父元素中唯一的子元素；

表单元素选择器

$(":input")匹配所有input,textarea,select,和button元素；

$("input:text")匹配所有的单行文本框；

$("input:password")匹配所有密码框；

$("input:checked")匹配所有被选中的元素；

$("input:radio")匹配所有单选按钮；

$("input:checkbox")匹配所有复选框；

$("input:submit")匹配所有提交按钮；

$("input:image")匹配所有图像域；

$("input:reset")匹配所有重置按钮；

$("input:button")匹配所有按钮；

$("input :file")匹配所有文件域；

$("input:hidden")匹配所有不可见元素；

编辑 | 码哥

图片源于网络，版权归原作者所有