微信号:programmer_club

介绍:程序员第一自媒体,与你探讨码农人生路上遇到的各类泛技术话题,定期为你推荐码农人生思考、感悟以及启迪!

Jquery 常用选择器总结

2017-10-07 20:30 程序员之家

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")匹配所有不可见元素;


编辑 | 码哥

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

 
程序员之家 更多文章 幽默?愤怒!!辱华游戏"肮脏的中餐馆"在网上炸了! 马云又亮大招?阿里将建首个智能加油站,自动识别车主淘宝ID 意大利女程序员没新郎 办“单身婚礼”嫁给自己 欧洲刮起性爱机器人风:用户体验称比真人舒服 2017互联网月饼哪家强?腾讯、阿里、百度、网易等21家中秋月饼盘点
猜您喜欢 深度学习、信息论与统计学 Yahoo H5游戏高峰论坛 白鹭张翔:扬帆出海,共建生态 百度贴吧王伟冰:跳出历史技术栈,谨慎寻找最佳优化思路 用户体验设计 IxDA 香港交流会 - 腾讯ISUX ❲知多少❳再见,CSRF:讲解set-cookie中的SameSite属性