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. <script src="jquery.js"></script>
8. <title>jQuery2</title>
9. </head>
10. <body>
11. <ol>
12. <li>第1项</li>
13. <li><i>33333333333333333333</i>第2项</li>
14. <li>第3项</li>
15. <li>第4项</li>
16. <li>第5项</li>
17. <li>第6项</li>
18. <li>第7项</li>
19. </ol>
20. <ul>
21. <li>A</li>
22. <li>B</li>
23. <li>C</li>
24. </ul>
25. <script>
26. // 1.jQuery对象是一个容器 内部可以有多个标签元素
27. // 2.在jQuery对象上调用某些方法时会对jQuery对象中的每个标签元素都起作用
28. // 3.jQuery对象的某些方法会返回jQuery对象本身 所以可以链式调用
29. // 链式调用的原理:对象方法能返回对象本身
30.
31. // 使用筛选器过滤
32. // $('li').filter(':nth-child(2n)').css('color','blue')
33.
34. // var lis = $('li')
35. // var filters = lis.filter(':nth-child(2n)')
36. // filters.css('color','blue')
37.
38. // $('ul>li').filter(document.querySelectorAll('li:nth-child(2n)')).css('color','red')
39.
40. // 包含指定元素
41. // $('li').has('i').css('color','blue')
42. // 排除掉一部分 not()从匹配元素集合中删除元素
43. // $('ol>li:odd,ul>li:odd').not('ol>li').css('color','blue')
44. // 切片
45. // $('li').slice(3,9).css('color','red')
46. // 合并两个jQuery对象 生成jQuery对象
47. // $('ol>li:odd').add('ul>li:even').css('color','red')
48. // console.log($('ol>li:odd').add('ul>li:even'))
49. // 第3项
50. // $('ol>li:nth-child(4)').prev().nextAll(':odd').addBack().css('color','red')
51. </script>
52. </body>
53. </html>