1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>jQuery对象-同级标签</title>
8. <style>
9. /* article{
10. position: relative;
11. }
12. section{
13. position: relative;
14. } */
15. </style>
16. </head>
17. <body>
18. <!-- <ul>
19. <li>第1项</li>
20. <li>第2项</li>
21. <li><a href="">第3项</a></li>
22. <li><span>第<strong>4</strong>项</span></li>
23. <li>第5项</li>
24. <li>第6项</li>
25. <li><strong>第7项</strong></li>
26. </ul> -->
27. <!-- <article>
28. <h1>这是标签</h1>
29. <section>
30. 123
31. <p>这是段落<strong>这是段落</strong>这是段落</p>
32. </section>
33. </article> -->
34.
35. <!-- jquery对象回到前一个jQuery对象 -->
36. <ul>
37. <li>第1项</li>
38. <li>第2项</li>
39. <li>第3项</li>
40. <li>第4项</li>
41. <li>第5项</li>
42. <li>第6项</li>
43. <li>第7项</li>
44. </ul>
45. <script src="jquery.js"></script>
46. <script src="index.js"></script>
47. </body>
48. </html>
** JavaScript**
1. // $('li:nth-child(4)').prev().css('color','red')
2. // $('li:nth-child(4)').prevAll().css('color','red')
3. // $('li:nth-child(5)').prevAll(':gt(1)').css('color','red')
4. // prevAll时 jQuery对象中的元素是从后向前排的
5.
6. // $('li:nth-child(4)').siblings().css('color','blue')
7.
8. // $('li:nth-child(4)').next().css('color','blue')
9. // $('li:nth-child(4)').nextAll().css('color','blue')
10. // $('li:nth-child(3)').nextAll(':lt(3)').css('color','blue')
11.
12. // 找出下级
13. // $('li').find('strong').css('color','red')
14. // $('li').children().css('font-size','1.5rem')
15. // console.log($('li').contents())
16. // 查找匹配元素内部所有的子节点
17.
18.
19. // 找出上级
20. // $('strong').parent().css('color','red')
21. // $('strong').parent().parent().parent().css('color','red')
22.
23. // $('article').find('strong').parent().css('color','red')
24. // parentsUntil查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
25. // $('strong').parentsUntil('article').css('border','1px solid blue')
26.
27. // $('strong').closest('strong').css('border','1px solid blue')
28. // $('strong').closest('*').css('border','1px solid blue')
29. // $('strong').closest('section').css('border','1px solid blue')
30.
31. // 返回第一个匹配元素用于定位的父节点。
32. // $('strong').offsetParent().css({
33. // 'background-color':'red',
34. // 'color':'white'
35. // })
36.
37.
38.
39. // jquery对象回到前一个jQuery对象
40.
41. var chain = $('li:nth-child(4)').prev().prev().nextAll().last()
42. // chain.css('color','red')
43. // chain.end().css('color','red')
44. // chain.end().end().css('color','red')
45. // chain.end().end().end().css('color','red')
46. chain.end().end().end().end().css('color','red')