jquery选择器找子元素

生活 2019-02-27 08:24:16  459

本文收集整理关于jquery选择器找子元素的相关议题，使用内容导航快速到达。

内容导航：

Q1:简单讲解jQuery中的子元素过滤选择器
Q2:jQuery子元素过滤选择器用法示例
Q3:jQuery选择器之子元素选择器详解
Q4:jquery 选择器选择table中的所有input 元素
Q5:jquery层次选择器中子元素和后代元素的区别

Q1：简单讲解jQuery中的子元素过滤选择器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

$(li:first-child).css(background, #ccc); //每个父元素第一个li 元素$(li:last-child).css(background, #ccc); //每个父元素最后一个li 元素$(li:only-child).css(background, #ccc); //每个父元素只有一个li 元素$(li:nth-child(odd)).css(background, #ccc); //每个父元素奇数li 元素$(li:nth-child(even)).css(background, #ccc); //每个父元素偶数li 元素$(li:nth-child(2)).css(background, #ccc); //每个父元素第三个li 元素

我们知道使用

:first

过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用

:first-child

子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用

: first-child<body>

该百年额米格“蔬菜水果”中第一行的文字颜色

芹菜
茄子
萝卜
大白菜
西红柿

橘子
香蕉
葡萄
苹果
西瓜

在浏览器中显示的效果：

通过

$("li:first-child")

选择器代码，获取了两个

元素，并使用
css()
方法修改了它们在页面中显示的文字颜色。
WwW▶.yijITaO.cOM

Q2：jQuery子元素过滤选择器用法示例

本文实例讲述了jQuery子元素过滤选择器用法。分享给大家供大家参考，具体如下：

子元素过滤选择器.

id为one,class为one的div

class为mini

id为two,class为one,title为test的div.

class为mini,title为other

class为mini,title为test

class为mini

class为mini,title为tesst

包含input的type为"hidden"的div

正在执行动画的span元素.

效果图如下：

更多关于jQuery感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

Q3：jQuery选择器之子元素选择器详解

本文实例为大家分享了jQuery子元素选择器，供大家参考，具体内容如下

子元素筛选选择器

:first-child、:last-child、:only-child

:first-child 第二个元素 :last-child

:first-child

:first-child 第二个元素 :last-child

:nth-child、:nth-last-child

:first-child 第二个元素第三个元素 :last-child

:first-child 第二个元素

:first-child 第二个元素第三个元素 :last-child

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Q4：jquery 选择器选择table中的所有input 元素

jquery选择器很强大，可以实现多种多样的查询选择，使用$()函数

1$("tableinput");//选择所有的table元素中的input元素

jquery 选择器的其他用法如下

123456789$("#myELement")//选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div")//选择所有的div标签元素，返回div元素数组$(".myClass")//选择使用myClass类的css的所有元素$("tr:first")//选择所有tr元素的第一个$("tr:last")//选择所有tr元素的最后一个$("div:contains(John)")//选择所有div中含有John文本的元素$("td:empty")//选择所有的为空（也不包括文本节点）的td元素的数组$("div:has(p)")//选择所有含有p标签的div元素$("td:parent")//选择所有的以td为父节点的元素数组

Q5：jquery层次选择器中子元素和后代元素的区别

标题1

标题2

后代选择器：$("#one h1")会匹配id="one"内部所有的h1标记，而不管它是子元素还是后代元素，只要在其内部均会找到。上述代码中会找到两个h1

子元素选择器：$("#one>h1")会匹配id="one"内部所有的子元素中的h1标记，必须是父子关系，直接嵌套。上述代码中只会找到第一个h1，引起它俩是父子关系。

相关文章: jquery在body添加div2019-02-20; jquery中ajax完整例子2019-02-27; jquery mobile是什么2019-04-10; angular怎么用jquery2019-04-21; 头发发白应该检查缺少什么元素吗2018-11-27; 补充微量元素吃什么药2019-01-24; 常见的表单元素有哪些2019-02-02; 人体含量最多的元素是什么2019-02-07; 地下城元素师刷图加点2019-02-25; java如何向数组里添加元素2019-02-26