sublings()，next()、find()、eq()查找元素用法区别

先来一个代码再画个图
代码:

<div>
	<p>Hello</p>
	<p class="selected">Hello Again</p>
	<p><span>And Again</span></p>
<div>

该代码亲戚图为:

本质都是围绕这个亲戚图

siblings():返回所有兄弟姐妹

$("p").siblings().css("background", "yellow");
//若siblings()后面添加参数，例如增加一个".selected"，就是在siblings()返回的基础上再次筛选找class="selected"的<p>标签
//$("p").siblings(".selected").css("background", "yellow");

next():返回后面生出的兄弟姐妹

$("p").next().css("background", "yellow");
//若next()后面添加参数，例如增加一个".selected"，就是在next()返回的基础上再次筛选找class="selected"的<p>标签
//$("p").next(".selected").css("background", "yellow");

.find(selector):直接查找兄弟姐妹

$("p").find("span").css('color','red');
//若是find()不加参数则默认没得查

$(":eq(index)"):跟find一样返回精准查找，但用的是下标，下标从0开始，下标0就是大儿子，下标2就是二儿子…

$("p:eq(0)").css("background-color","yellow");