JQuery find()方法和children()方法的区别

        find() 方法定义:它是获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。find()方法要注意的地方:find()方法是在当前元素集合内部查找,不包括自己。

        实例:

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript"
	src="lib/jquery/jquery-1.9.1.js"></script>
<style>
body {
	font-size: 16px;
	font-weight: bolder;
}
p {
	margin: 5px 0;
}
</style>
</head>
<body>
	<div>
		<span>Hello</span> <span>
			<p class="selected">test</p> </span>
		<p>And One Last Time</p>
		<p class="selected">again</p>
	</div>
	<p class="selected">Hello Again</p>
	<script>$("div").find(".selected").css("color", "blue");</script>
</body>
</html>

        运行结果:

        children()方法,表面意思就是:孩子,儿童,子女的意思,一般理解为子女或儿子。为什么这样理解?下面先看一下children的定义吧。

        children()方法定义:它是获得匹配元素集合中每个元素的所有子元素(不包括自己,只能在儿子辈(第一层)查找)。
        我理解是children是匹配集合中每个元素的“儿子辈”的子元素。find()除了儿子辈,还包括孙子辈,即只要是它的后代就行。

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript"
	src="lib/jquery/jquery-1.9.1.js"></script>
<style>
body {
	font-size: 16px;
	font-weight: bolder;
}
p {
	margin: 5px 0;
}
</style>
</head>
<body>
	<div>
		<span>Hello</span> <span>
			<p class="selected">test</p> </span>
		<p>And One Last Time</p>
		<p class="selected">again</p>
	</div>
	<p class="selected">Hello Again</p>
	<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>

        运行结果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值