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

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" /> ]

    推荐阅读
  • 银耳的功效与作用(银耳的功效与作用禁忌和食用方法)

    含有大量胡萝卜素,有助于维持皮肤细胞组织正常机能,刺激皮肤新陈代谢,保持皮肤润泽细嫩。适宜与久病体虚或是虚劳的补益。含钙,钙是脑代谢不可缺少的重要物质。

  • 注销不了和平精英的账号怎么办(一言不合就注销账号)

    昨天晚上在玩《和平精英》的时候,开麦和队友说"你们先进圈,我打个电池",寝室一阵哄笑。作为最近刷屏各大网络媒体资讯的腾讯新手游,《和平精英》在一波又一波玩家的初体验之后,水涨船高。相比较彩蛋,在玩家看重的玩法方面,《和平精英》也交出了满意的答卷。最搞笑的是,有人把《和平精英》作为蹭流量的工具,还能不能愉快玩耍了?又说了,《和平精英》卸载量2.5亿。

  • 干松茸要不要冷藏(干松茸要冷藏吗)

    下面更多详细答案一起来看看吧!干松茸要不要冷藏松茸和其他的蘑一样,也是可以用来干制的,只需要将松茸切成片,然后放在阳光下晒干,再用干燥的盒子装好,与花椒和陈皮等吸水性好的食物放在一起,这样的保存方法可以保存1-3年不会变质。干松茸已经就是经过加工,干制,最后成型,自然也就不必担心会变质腐败,只需要找一个干燥并且避光的位置存放即可。

  • 最新款路虎汽车大全(最便宜路虎新款曝光)

    最新款路虎汽车大全复活的路虎卫士光芒四射,以致让同场发布的新款路虎发现神行黯然失色,不少人忽略了它的存在。而这次车型的改款,路虎似乎也发现了自己的不足,对新款发现神行来了一次全方位的升级。同时,前保险杠也作出了调整,虽然整体设计更为简约,但简约的设计却为新款发现神行营造出更高的视觉好感度。

  • 作文好词好句抄一下(背好词好句能写好作文吗)

    积累好词好句是无论什么时候老师都挂在嘴边的,这没有错只是我们用的方法不对。语言类的学习和表达都是以应用为目的的。即使把它背下来也很难做到无缝衔接,说不定前后还不通造成矛盾!最后让孩子去仿写这个是很关键的。用别人好的方法写出你生活中的内容,只有通过这样的方法才能把别人的好东西消化成为自己的。每个星期练习两篇,句子仿写应用多了,自然也就开窍了,写起文章来会轻松有趣很多!

  • 手机qq怎么转发消息记录 手机qq怎么转发聊天记录?

    手机qq转发消息记录的方法如下:1、打开手机QQ,选择需要转发聊天记录的好友。QQ是腾讯公司借鉴于ICQ开发的一款基于Internet的即时通信软件,于1999年2月推出,是中国的社交软件巨头。QQ支持在线聊天、视频通话、点对点断点续传文件、共享文件、网络硬盘、自定义面板、QQ邮箱等多种功能,并可与多种通讯终端相连。

  • 包饺子擀饺皮用英语怎么说(饺子是dumpling那饺子馅)

    包饺子擀饺皮用英语怎么说VixueTalk英语口语头条号独家整理文章,未经允许请勿转载、二次修改或截取片段盗用,违权必究。说起饺子的英文,大多数伙伴一定首先想到dumpling,或者是它的汉语拼音Jiaozi了。dumpling其实在词典中,dumpling泛指蒸或煮的小面团,或水果馅的点心。像是粽子、包子、汤圆、青团等,其实都可以说成dumpling,它并不能专指饺子哦。boil表示烹饪方法中“煮”,尤其是用沸水煮。

  • 2022无锡鼋头渚樱花节景区可以飞无人机吗?

    2022无锡鼋头渚樱花节景区可以飞无人机吗?禁止私自携带无人机进入景区飞行。

  • 丈夫出轨被抓后妻子终于爆发(妻子出轨丈夫被拘留)

    同时制定了对国有企业职工买断工龄,统一解除劳动合同的政策。张薛民和李凌娟的女儿今年8岁,刚上小学一年级。能租到这套房子,还得益于李凌娟厂里的人事部长刘胜。李凌娟向马路上一招手,一辆出租车停在面前,夫妻俩把刘胜扶到车上送到了家。夫妻俩一夜无话。张薛民似乎感觉妻子有些不对劲,每次他要求与妻子温存的时候,李凌娟都会找理由拒绝。张薛民经常用醉酒解愁,如此一来,夫妻俩更疏远了。

  • 陈亮跟廖嫣然是什么电视剧(下面为大家解答)

    张继红在生下女儿之后不幸离世,临终前将丈夫廖文辉和女儿廖嫣然托付给江月明,从此方皓和廖嫣然的命运紧紧连接在一起。二十年后,已长大成人的方皓就读于北京某医科大学。青梅竹马的廖嫣然也追随其来到北京,方皓同父异母的弟弟方子杰随即赶来。与此同时,感情失意的廖嫣然在工作上努力认真并小有成就,面对方子杰始终如一的不懈追求,最终被方的真诚所打动,两个人终于走在了一起。