jQuery DOM
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 DOM</title>
8. <style>
9. .red-div{
10. background-color: red;
11. color: white;
12. padding: 10px;
13. }
14. </style>
15. </head>
16. <body>
17. <div id="box" name="boxName" class="red-div"></div>
18. <div></div>
19.
20. <script src="jquery.js"></script>
21. <script>
22. // 得到的是HTMLElement对象
23. // var box = document.getElementById('box')
24. // box.innerText ='getElementById'
25. // jQuery对象是一个标签元素的盒子 是一个类似数组的对象
26. // $相当于jQuery
27. // jQuery('#box').text('jQuery #ID')
28. // box.innerText = '111'
29. // 不使用getElementById就可以直接使用id变量
30.
31. // 得到HTMLCollection
32. // var boxTag = document.getElementsByTagName('div')[0]
33. // console.log(boxTag)
34. // 得到jquery对象
35. // $('div').text('jquery div')
36.
37. // 得到的是NodeList对象
38. // boxTag = document.querySelectorAll('div')[0]
39.
40. // getElementsClassName
41. // $('.red-div') 得到的是jquery对象
42.
43. // getElementsByName
44.
45. // $('[name=boxName]') 得到的是Jquery对象
46.
47. // HTMLAllCollection
48. // var all = document.all
49. // // NodeList
50. // all = document.querySelectorAll('*')
51. // // 得到的是jQuery对象
52. // all = $('*')
53.
54. // console.log($('div')[1])
55.
56. </script>
57. </body>
58. </html>
jQuery 对象
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>jquery 对象</title>
9. <style>
10. li{
11. font-size: 2rem;
12. color: blue;
13. }
14. .ul li{
15. font-size: 1.5rem;
16. color: red;
17. }
18. </style>
19. </head>
20. <body>
21. <ul>
22. <li>1</li>
23. <li>2</li>
24. <li>3</li>
25. <li>4</li>
26. </ul>
27. <ul class="ul">
28. <li>21</li>
29. <li>22</li>
30. <li>23</li>
31. <li id="ff">24</li>
32. </ul>
33.
34. <script>
35. // $('筛选器')是最常用的jQuery对象的方法
36. // $()创建一个没有标签元素的jquery对象
37. // console.dir($())
38. // 会将两个筛选器合并
39. // console.log($('li','.ul',document.body))
40.
41. // 將标签元素转换成jQuery对象
42. // var li = document.querySelector('li')
43. // console.dir($(li).text())
44.
45. // 将NodeList\HTMLCollection 转换成jquery对象
46. // var li = document.querySelectorAll('li')
47. // console.log($(li).text())
48.
49. // jquery对象的大部分方法会在内部循环处理每一个元素 少部分只处理
50. // jQuery对象中的第一个元素
51.
52. // jQuery对象的属性
53.
54. // console.log($('li').size()) 已被废弃
55.
56. // console.log($('li').length)
57. // console.log($('li:nth-child(2)').length)
58.
59.
60. console.log($('li:gt(1)').get(0))
61. var li3 = $('li:nth-child(3)')
62. // 得到的是jquery对象
63. var a = li3.get(0)
64. console.log(a)
65. // 得到的是标签元素
66.
67. console.log($('li:gt(1)').index(a))
68. // jQuery对象是jQuery('筛选器')方法的返回值
69. // 这个返回值是一个对象
70. // jQuery对象相当于一个容器或盒子
71. // 内部存放的时候通过筛选器找到的标签元素
72. // 它是一个【类似数组的结构】
73. // jQuery对象提供了循环处理内部每一个标签元素的方法
74. // .each方法规定为每个匹配元素规定运行的函数
75. $('li:odd').each(function(i){
76. console.log(i)
77. console.log($(this).text())
78. })
79.
80. </script>
81. </body>
82. </html>
jQuery筛选器
1. <body>
2. <ul>
3. <li>第1项</li>
4. <li>第2项</li>
5. <li>第3项</li>
6. <li>第4项</li>
7. <li>第5项</li>
8. <li>第6项</li>
9. <li>第7项</li>
10. </ul>
11. <hr>
12. <ol>
13. <li>HTML</li>
14. <li>CSS</li>
15. <li>JavaScript</li>
16. </ol>
17. <script src="jquery.js"></script>
18. <script>
19. // 整个页面上第一个li标签
20. // $('li:first').css({'color':'blue','font-size':'24px'})
21.
22. // 全局索引是偶数
23. // $('li:even').css('color','red')
24. // // 全局索引是奇数
25. // $('li:odd').css('color','blue')
26.
27. // 全局索引大于3
28. // $('li:gt(3)').css('color','yellow')
29. // 索引值为4 从0开始
30. $('li:eq(4)').css('color','red')
31.
32. // 任意标签的倒数第x个子标签
33. $('li:nth-last-child(1)').css('color','blue')
34. </script>
35. </body>