jquery中获取当前dom元素的子元素的方法有很多，常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素，find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
工具原料：jQuery、编辑器、浏览器
一、使用children()方法获得子元素
1、使用该方法获取子元素并设置子元素的字体为蓝色，代码如下：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>$("div")children("selected")css("color", "blue");</script>
</body>
</html>
2、运行的效果如下图：
二、使用find()方法获取子元素
1、使用fand()方法获取子元素并且进行选择器的筛选，代码如下图：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
</head>
<body>
<p><span>Hello</span>, how are you</p>
<p>Me I'm <span>good</span></p>
<script>
$("p")find("span")css('color','red');
</script>
</body>
</html>
2、运行的结果如下图：
这是因为next()是找紧挨着的弟弟元素，find()则是找子元素，两者是不同的。
也就是说： $(this)parent()next(); 是找父亲的弟弟，也就是叔叔，而 $(this)parent()find("div"); 则是在父亲的所有儿子中找名为div的兄弟元素（也可能就是this）。
parent() 获取 父节点
children() 获取所有子节点
parent()children() 就是，获取父节点下的所有子节点
$(this)parent()children()removeClass("db");就是 删除当前节点的父节点下的所有字节点的名为db的class属性，即：删除所有在同一父节点下的同级节点的名为db 的class属性
$("div")//选取div
$("div>p")//选取div的子元素p
jQuery 选择器大全
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素，返回div元素数组
$("myClass") 选择使用myClass类的css的所有元素
$("") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,myclass")
层叠选择器：
$("form input") 选择所有的form元素中的input元素
$("#main > ") 选择id值为main的所有的子元素
$("label + input") 选择所有的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(3n + 1)")
$("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 代码:
$("label + input")
结果:
[ <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" /> ]
Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。
children()方法：获取该元素下的直接子集元素
find()方法：获取该元素下的所有子集元素
分别以以下HTML代码为例：<ul><li>list1<ul><li>list1-1</li><li>list1-2</li></ul></li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li><li>list3<ul><li>list3-1</li><li>list3-2</li></ul></li></ul>
children()方法获取ul下面直接子集元素li：$("ul")children("li")
需要注意的是，如果li元素下还有li元素，children方法将不会被获取。我们可以用length来测试获取的个数“$("ul")children("li")length”，最后输出结果为3
find()方法获取ul下所有元素li：$("ul")find("li")
需要注意的是，find方法会无限循环查找ul标签节点下的li，一直找到没有为止，用length来测试获取个数“$("ul")find("li")length”，最后输出结果为9
children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止。
这些jquery的一些查找方法：可以看看
jQueryparent(expr) //找父元素
jQueryparents(expr) //找到所有祖先元素，不限于父元素
jQuerychildren(expr) //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙
jQuerycontents() //查找下面的所有内容，包括节点和文本。
jQueryprev() //查找上一个兄弟节点，不是所有的兄弟节点
jQueryprevAll() //查找所有之前的兄弟节点
jQuerynext() //查找下一个兄弟节点，不是所有的兄弟节点
jQuerynextAll() //查找所有之后的兄弟节点
jQuerysiblings() //查找兄弟节点，不分前后
jQueryfind(expr) //跟jQueryfilter(expr)完全不一样，jQueryfilter(expr)是从初始的
jQuery对象集合中筛选出一部分，而jQueryfind()的返回结果，不会有初始集中
筛选出一部分，而jQueryfind()的返回结果，不会有初始集合中的内容，比如：
$("p")find("span")是从元素开始找，等于$("p span")
<div id="isSon"></div>
<script>
$(document)ready(function(){
if ($("#isSon")children()length>0) {
alert("有子节点！");
}else{
alert("没有子节点了！");
}
})
</script>
刚开始我在if里面用的判断条件是，是否为空，结果一直跳出有节点，后来发现这么一句话： jQuery选择器获取页面的element时，无论element是否存在，都会返回一个object对象
才豁然开朗，才用现在的这个条件，也谢谢你的这个提问，让我多涨了知识，与君共勉。
以上就是关于jquery中如何获取当前DOM对象里的子元素全部的内容，包括:jquery中如何获取当前DOM对象里的子元素、jquery拿到父节点找不到子节点、jquery,有段代码（不全），$(this).parent().children().removeClass("db"); $(this).addClass("db");等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）