游戏攻略网
当前位置: 首页 游戏攻略

jquery有哪几种基础选择器(jQuery选择器总结)

时间:2023-05-20 作者: 小编 阅读量: 1 栏目名: 游戏攻略

jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法$("#myELement")选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div")选择所有的div标签元素,返回div元素数组$(".myClass")选择使用myClass类的css的所有元素$("*")选择文档中的所有的元素,可以运用多种的

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

$("div") 选择所有的div标签元素,返回div元素数组

$(".myClass") 选择使用myClass类的css的所有元素

$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")


层叠选择器:

$("form input") 选择所有的form元素中的input元素

$("#main > *") 选择id值为main的所有的子元素

$("labelinput") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:

$("tr:first") 选择所有tr元素的第一个

$("tr:last") 选择所有tr元素的最后一个

$("input:not(:checked)span")

过滤掉:checked的选择器的所有的input元素

$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素

$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素

$("td:gt(4)") 选择td元素中序号大于4的所有td元素

$("td:ll(4)") 选择td元素中序号小于4的所有的td元素

$(":header")

$("div:animated")

内容过滤选择器:

$("div:contains('John')") 选择所有div中含有John文本的元素

$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组

$("div:has(p)") 选择所有含有p标签的div元素

$("td:parent") 选择所有的以td为父节点的元素数组

可视化过滤选择器:

$("div:hidden") 选择所有的被hidden的div元素

$("div:visible") 选择所有的可视化的div元素

属性过滤选择器:

$("div[id]") 选择所有含有id属性的div元素

$("input[name='Newsletter']") 选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']") 选择所有的name属性以'news'开头的input元素

$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素

$("input[name*='man']") 选择所有的name属性包含'news'的input元素

$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n1)")

$("div span:first-child") 返回所有的div元素的第一个子节点的数组

$("div span:last-child") 返回所有的div元素的最后一个节点的数组

$("div button:only-child") 返回所有的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元素或表单的隐藏域


表单元素过滤选择器:

$(":enabled") 选择所有的可操作的表单元素

$(":disabled") 选择所有的不可操作的表单元素

$(":checked") 选择所有的被checked的表单元素

$("select option:selected") 选择所有的select 的子元素中被selected的元素


选取一个 name 为”S_03_22″的input text框的上一个td的text值

$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”开始,并且不是以”_R”结尾的

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)

一个名为 radio_01的radio所选的值

$(”input[@ name =radio_01][@checked]“).val();


$("A B") 查找A元素下面的所有子节点,包括非直接子节点

$("A>B") 查找A元素下面的直接子节点

$("A B") 查找A元素后面的兄弟节点,包括非直接子节点

$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点

1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点

例子:找到表单中所有的 input 元素


HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

2. $("A>B") 查找A元素下面的直接子节点

例子:匹配表单中所有的子级input元素。

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

3. $("A B") 查找A元素后面的兄弟节点,包括非直接子节点

例子:匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("labelinput")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点

例子:找到所有与表单同辈的 input 元素

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none" /> ]

    推荐阅读
  • 梦见别人怀孕生子(梦见别人怀孕生子意思是什么)

    职员梦见别人怀孕生子,你认为你不应该安于现状,觉的自己才华没有表现出来,得不到好的机会表现自己。商人梦见别人怀孕生子,生意受到他人打击,很可能自己的投资变成了他人的利益。少女梦见别人怀孕生子,渴望得到爱情,希望能够有人爱护自己,但是现实不如意,往往得不到好的归宿。老人梦见别人怀孕生子,家人能够平平安安,并且能够享受天伦之乐,会子孙满堂。

  • 护肤品oem加工厂哪里的好(OEM护肤品加工厂的选择标准是什么)

    公司的设计团队走访世界各地,密切把握潮流风向,新产品的研发和设计成为行业佼佼者。公司具备自由进出口资质,并获得多国的自由销售证书。成功协助国内外上百个化妆品品牌的面市,并进入欧美的大型商业连锁销售,取得了良好的市场反响和持续的合作。严格执行化妆品105项及国际标准生产,严密的质量检验监测管理系统,安全为先、质量为先、诚信为先是公司秉承的经营理念。

  • 锦心似玉一共多少集(锦心似玉一共有几集)

    下面更多详细答案一起来看看吧!锦心似玉一共多少集《锦心似玉》一共有45集。《锦心似玉》是由温德光、杨小波执导,钟汉良、谭松韵领衔主演,何泓姗、唐晓天主演的古装剧。该剧改编自吱吱小说《庶女攻略》,讲述了明朝中期永平侯大将军徐令宜和庶女十一娘先婚后爱、携手成长的励志爱情故事。该剧于2021年2月26日在腾讯视频首播,泰国、日本、韩国、菲律宾、印尼、西班牙、越南同步播出。

  • lol西部魔影皮肤什么时候结束(西部魔影新皮肤上线)

    这几款皮肤中,特效最有意思的应该是图奇了,在他开大后,会长出一双黑色的翅膀。这个改动会在12.10版本正式上线,这或许会在一定程度上改变目前整个英雄联盟的伤害输出体系。

  • 遥望星空作文(遥望星空作文范文)

    如今,高速发展的世界让“快节奏”逐渐成为生活的代名词。当月亮变成一镰弯月时,又好似一个诚挚微笑,昭示着宇宙对人类的友好。那点点繁星犹如被冲上沙滩的贝壳,只不过在月光的洗涤下变得更加璀璨夺目,似一个个调皮的小孩,争相炫耀着自己手中最闪亮的那一颗。看那繁星点点,让我不由自主的想到了人生,其实那一粒粒璀璨夺目的“贝壳”不就如同那许许多多的人生一样吗?

  • pep六年级英语上册一单元知识总结(人教PEP版英语六年级上册期中知识点)

    而走路用“on”例如onfoot.2.国家名字,地方名字第一个字母要大些:例如:Canada加拿大,China中国,America美国,England英国,Australia澳大利亚3.频度副词是表示做的次数多少的词语。这两个词是一对反义词。这大部分的国家都是靠右行驶的:driversdriveontherightsideoftheroad.记住EnglandandAustralia,driversdriveontheleftsideoftheroad.英国和澳大利亚,司机是靠左行驶的。

  • 斯玛特为什么是最佳防守球员(最值得敬佩的运动员)

    多哈世锦赛男子100米决赛的赛场上科尔曼以9秒76获得冠军,贾斯汀·加特林跑出9秒89获得亚军。贾斯汀·加特林是一个饱受争议的运动员,也是田径历史上唯一一个小半个职业生涯都处在禁赛中的运动员。2001年加特林被查出服用禁药,禁赛两年。贾斯汀·加特林也是唯一复出后仍能保持禁赛前成绩的运动员,在博尔特时代也能和其一比高下。赛后35岁老将加特林用跪拜的方式致敬老对手“博尔特”。世间很难再有第二个加特林,向传奇老将致敬!

  • 邹忌讽齐王纳谏有哪些启示(邹忌讽齐王纳谏)

    《战国策》为西汉刘向编订的国别体史书,原作者不明,一般认为非一人之作。西汉时期,刘向进行整理后,删去其中明显荒诞不经的内容,按照国别,重新编排体例,定名为《战国策》。此所谓战胜于朝廷。城北徐公,远近闻名,是齐国最美的男子。田齐桓公去世后,齐威王即位。齐威王马上来了兴趣,立即下令召见。只见一位身材修长,相貌堂堂的男子腋下夹了把琴,匆匆进了大厅。邹忌提出了一整套治国安邦的措施。

  • 33w原装快充充电器(高性能的移速充电器)

    每个充电头的证明都印有移速的品牌Logo和PD20W的标识。包装盒里仅有移动电源本体,和一条短短的Type-C充电线。3移速Lighting转Type-C的数据线,适用于苹果的各种设备,背面也是印有参数规格和防伪标签。这条Lighting转Type-C的数据线,长1.2米,支持2.4A电流。手上的电子设备挺多的,先给两部手机和两个移动电源充满电。

  • 正宗炝锅面条最好吃的家常做法(大厨教你炝锅面)

    炝锅面是一道家常面食,以面条为主要食材,配上猪肉,豆芽,青菜,小葱等辅料制作而成,面条劲道,口味鲜香,越吃越过瘾。首先我们准备一下食材:1.准备二细的面条一斤左右备用。