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

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

    推荐阅读
  • 宝宝辅食丝瓜的做法(爱丝瓜的朋友一起跟着做吧)

    下面希望有你要的答案,我们一起来看看吧!宝宝辅食丝瓜的做法丝瓜面用料:丝瓜一根、蟹味菇50g、鲜切面一人份、盐1小匙。丝瓜切成小滚刀块,蟹味菇切掉末端。锅烧热下少许油,下入一片姜炒香,接着入蟹味菇和切好的丝瓜翻炒,加盐调味让丝瓜出水,炒至丝瓜翠绿炒熟即可。另起锅烧开一锅水,下鲜面煮熟捞出,装入碗中加适量煮面汤,然后将炒好的丝瓜浇在上面做卤即可。

  • 锅巴土豆的家常做法(锅巴土豆的做法)

    锅巴土豆的家常做法材料:土豆250克、小辣椒两根调料:盐3克、葱花5克、辣椒粉5克、孜然粉3克、花椒粉2克。土豆洗净去皮,切成块后盖上保鲜膜,入蒸锅蒸熟,小米辣用剪刀剪成碎粒。炒锅中放入油,烧至六成热,放入土豆用小火煸炒,一直炒到外皮变得焦黄,香脆。土豆煎得差不多的时候,将锅里多余的油倒出不用。将除葱花与小辣椒外的所有调料放入炒匀后即可出锅,装盘时在表面撒上葱花与小米辣就可以食用了。

  • 汽油真假的鉴别(如何辨认汽油的真假)

    有的人甚至去买私人的汽油,殊不知私人汽油卖假汽油的比较多,今天小德就跟大家聊一聊真假汽油。普遍的小毛病便是毁坏车子发动机、过滤器及其喷油器,而采用时间久了以后,车子运行都成为了难题。上面介绍的两种汽油,便是非常普遍的“假汽油”,尽管也能用,但是也很伤车。那样如果你实在记不得假汽油怎么区分的话,还可以记一下假汽油该怎么分辨。以上便是小德整理的真假汽油的相关资料,希望对大家有所帮助。

  • 苹果手机录音删了怎么恢复(苹果手机录音误删如何恢复)

    苹果手机录音删了怎么恢复删除的录音被被转移到“语音备忘录”列表的“最近删除”文件夹中,默认该录音会保留30天,想要恢复删除的录音,可以通过最近删除文件夹找到需要恢复的录音点击恢复。通过苹果手机的设置->语音备忘录->清除已删除的项目可以修改录音在删除之后的保留时间,大家可以按照自己的需要来修改保存时间,推荐选择7天后或30天后,让误删除的语音备忘录可以有时间恢复。

  • 今年头伏是哪一天(入伏7月16日)

    今年头伏是哪一天今年头伏是7月16日。“夏至三庚数头伏”,这是确立初伏的依据。这里的“庚日”是指古代的“干支纪日法”中带有“庚”字头的那一天。第四个庚日到第五个庚日为中伏,立秋后的第一个庚日到第二个庚日为末伏。每一个庚日相隔10天,中伏天数不固定,夏至到立秋之间有4个庚日时,中伏为10天,有5个庚日时中伏为20天。

  • 孕妇有鼻炎怎么治 孕妇鼻炎咋办

    不当用药造成不可预测的后果孕妇患了鼻炎,如果服用药物不当,后果难以预料。因为目前治疗鼻炎的药物大多含有麻黄素,孕妇服用了这些药物,药物会通过胎盘进入胎儿体内,很可能造成流产或导致胎儿发育畸形。孕妇鼻炎的原因这是因为女性鼻黏膜对雌激素反应较敏感。

  • 李现电视剧片酬(李才和徐子雯相认)

    结果婚礼当天,刘一手因为非法集资被警察带走,别墅也被查封。马得路和小白投资了刘一手的日洛集团,这意味着他们的资金全都打水漂,二人闻讯当场晕了过去。李貌向徐子雯讲述她的设计初衷,徐子雯特别欣赏李貌的设计,当场宣布新围城工作室中标,马上去美国考察两周。法院开庭审理此案件,李貌上交了家里的监控视频还尚晋清白。

  • 洗碗布清洗妙招(有下面两个方法)

    在锅里烧好热水,等水开了之后,将洗碗布放入锅里,接着加入两勺食用碱,家里有小苏打也可以用它来代替。然后盖上盖子继续煮10分钟。碱具有杀菌消毒和清除油污的作用,在开水里面高温消毒10分钟,能够杀死洗碗布上大量的细菌。浸泡好之后,用清水洗净晾晒在通风处即可。大家每次洗完碗之后,尽量让洗碗布风干或者晒干,这样能够减少细菌的繁殖。并且定期用以上2个方法为洗碗布杀菌或者是勤更换洗碗布。

  • 猪笼草的家庭养殖方法及注意事项(猪笼草的家庭养殖方法及注意事项的介绍)

    但气温过低时,猪笼草停止生长,冬季为避免猪笼草受冻,要做好保护措施,保证室内温度不低于10℃。在夏天时注意防晒,通常的做法是搭遮光网。温度较低时,适当减少浇水次数,保持土壤湿润即可。适当的施加有机肥,不过施肥后要及时浇水。不过猪笼草要养伤几年才会开花,不用担心。

  • 凌霄殿是什么地方(凌霄宝殿是干什么的地方)

    凌霄宝殿是天庭宝殿之首,玉帝面见朝臣的地方。是进入南天门后的第一殿。玉皇大帝被视为众神之领袖,在道教神阶中威望极高,神权最大。其居住昊天金阀弥罗宫,相传天庭位于三十六重天之中的最高天位,最高处乃是弥罗宫。