2-Jquery层次选择器

一、选择题

1. 要选择ID为parent的元素下的所有直接子元素<div>，应使用哪个选择器？
A. $("#parent > div")
B. $("#parent div")
C. $("#parent .div")
D. $("#parent + div")

答案： A

2. 若要选取ID为first的元素后面紧跟的第一个<p>兄弟元素，应使用哪个选择器？
A. $("#first p")
B. $("#first > p")
C. $("#first + p")
D. $("#first ~ p")

答案： C

3. 要选择ID为content的元素内的所有<p>元素（包括后代元素），应使用哪个选择器？
A. $("#content p")
B. $("#content > p")
C. $("#content .p")
D. $("#content + p")

答案： A

4. 下列哪个选择器可以选择ID为header的元素的所有同级<div>元素？
A. $("#header div")
B. $("#header > div")
C. $("#header ~ div")
D. $("#header + div")

答案： C

5. 要选择类名为box的所有元素的直接子元素<a>，应使用哪个选择器？
A. $(".box a")
B. $(".box > a")
C. $(".box + a")
D. $(".box ~ a")

答案： B

---

二、判断题

1. $("#parent > div")选择器会选择ID为parent的元素内的所有<div>元素，无论它们是直接子元素还是后代元素。

答案： 错误

2. $("#item + span")选择器会选择ID为item的元素后的所有<span>兄弟元素。

答案： 错误

3. $("#list ~ li")选择器会选择ID为list的元素的所有同级<li>元素。

答案： 正确

4. $("#container div")选择器会选择ID为container的元素内的所有直接子元素<div>。

答案： 错误

5. 子元素选择器（>）和后代选择器（空格）在功能上是一样的。

答案： 错误

---

三、填空题

1. 要选择ID为header的元素内的所有直接子元素<a>，并为它们添加一个类external，应使用jQuery代码 ___________。

答案： $("#header > a").addClass("external");

2. 若要隐藏ID为content的元素后的所有<p>兄弟元素，应使用jQuery代码 ___________。

答案： $("#content ~ p").hide();

3. 选择ID为start的元素之前的所有<div>兄弟元素，应使用jQuery代码 ___________。

答案： $("#start").prevAll("div");

4. 要给ID为menu的元素内的所有<li>元素的第一个子元素<a>添加一个first-item类，应使用jQuery代码 ___________。

答案： $("#menu li:first-child a").addClass("first-item");

5. 选择类名为highlight的元素的所有同级<span>元素，并设置它们的文本颜色为红色，应使用jQuery代码 ___________。

答案： $(".highlight ~ span").css("color", "red");

---

四、简答题

1. 简述jQuery中后代选择器和子元素选择器的区别。

答案： 后代选择器选择指定元素的所有后代元素（包括直接子元素和更深层的后代元素），而子元素选择器只选择指定元素的直接子元素。

2. 解释jQuery中相邻兄弟选择器和一般兄弟选择器的用途及区别。

答案： 相邻兄弟选择器（+）用于选择紧接在另一元素后的元素，且二者有相同的父元素。它仅选择单个元素。一般兄弟选择器（~）用于选择某元素后面的所有兄弟元素，无论它们之间有多少其他元素。它可以选择多个元素。