jquery $()的参数和选择器

jquery $()的参数和选择器

作业标题:0719作业
作业内容:1、下载并引用jQuery 2、JavaScriptjQuery 对比。 3、列出 $() 的参数 4、列出选择器,并查看效果。

  1. 下载并引用jQuery
    jq引用
  2. JavaScript 和 jQuery 对比。
    1. //js
    2. document
    3. .querySelectorAll(".item")
    4. .forEach((item) => (item.style.color = "green"));
    5. //jquery
    6. $(".item").css("color", "red");
  3. 列出 $() 的参数
    选择器 包装器 html文本 回调

  4. 列出选择器,并查看效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title>$() 选择器</title>
    8. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    9. <style>
    10. * {
    11. font-size: 20px;
    12. }
    13. .title {
    14. text-align: center;
    15. }
    16. .width {
    17. width: 1200px;
    18. }
    19. tr {
    20. height: 50px;
    21. }
    22. </style>
    23. </head>
    24. <body>
    25. <h3 class="title h3" id="titleId">用户列表</h3>
    26. <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    27. <thead>
    28. <tr>
    29. <th>编号</th>
    30. <th>姓名</th>
    31. <th>邮箱</th>
    32. <th>电话</th>
    33. <th>省份</th>
    34. <th>城市</th>
    35. <th>年龄</th>
    36. </tr>
    37. </thead>
    38. <tbody>
    39. <tr>
    40. <th>1</th>
    41. <td>天蓬</td>
    42. <td>tianpeng@php.cn</td>
    43. <td>13854381111</td>
    44. <td>安徽</td>
    45. <td>合肥</td>
    46. <td>40</td>
    47. </tr>
    48. <tr>
    49. <th>2</th>
    50. <td>欧阳克</td>
    51. <td>ouyangke@php.cn</td>
    52. <td>13854382222</td>
    53. <td>安徽</td>
    54. <td>马鞍山</td>
    55. <td>40</td>
    56. </tr>
    57. <tr>
    58. <th>3</th>
    59. <td>灭绝师太</td>
    60. <td>miejue@php.cn</td>
    61. <td>13854383333</td>
    62. <td>安徽</td>
    63. <td>滁州</td>
    64. <td>18</td>
    65. </tr>
    66. <tr>
    67. <th>4</th>
    68. <td>裘千丈</td>
    69. <td>qiuqianzhang@php.cn</td>
    70. <td>13854384444</td>
    71. <td>安徽</td>
    72. <td>蚌埠</td>
    73. <td>40</td>
    74. </tr>
    75. <tr>
    76. <th>5</th>
    77. <td>钟老师</td>
    78. <td>zhonglaoshi@php.cn</td>
    79. <td>13854385555</td>
    80. <td>安徽</td>
    81. <td>淮南</td>
    82. <td>30</td>
    83. </tr>
    84. <tr>
    85. <th>6</th>
    86. <td>小编1</td>
    87. <td>xiaobian1@php.cn</td>
    88. <td>13854386661</td>
    89. <td>安徽</td>
    90. <td>安庆</td>
    91. <td>18</td>
    92. </tr>
    93. <tr>
    94. <th>7</th>
    95. <td>小编2</td>
    96. <td>xiaobian2@php.cn</td>
    97. <td>13854386662</td>
    98. <td>安徽</td>
    99. <td>亳州</td>
    100. <td>18</td>
    101. </tr>
    102. <tr>
    103. <th>8</th>
    104. <td>小编3</td>
    105. <td>xiaobian3@php.cn</td>
    106. <td>13854386663</td>
    107. <td>安徽</td>
    108. <td>淮北</td>
    109. <td>18</td>
    110. </tr>
    111. <tr>
    112. <th>9</th>
    113. <td>小编4</td>
    114. <td>xiaobian4@php.cn</td>
    115. <td>13854386664</td>
    116. <td>安徽</td>
    117. <td>阜阳</td>
    118. <td>18</td>
    119. </tr>
    120. <tr>
    121. <th>10</th>
    122. <td>小编5</td>
    123. <td>xiaobian5@php.cn</td>
    124. <td>13854386665</td>
    125. <td>安徽</td>
    126. <td>六安</td>
    127. <td>18</td>
    128. </tr>
    129. </tbody>
    130. </table>
    131. </body>
    132. <script>
    133. //1.标签选择器
    134. console.log($("table"));
    135. $("table").css("color", "red");
    136. console.log(document.getElementsByTagName("h3"));
    137. // 2.id选择器 #代表id
    138. //jquery获取的id,是一个对象,里面有0下标
    139. console.log($("#titleId"));
    140. $("#titleId").css("background-color", "blue");
    141. //js获取的id,是html代码
    142. console.log(document.getElementById("titleId"));
    143. //3.class选择器
    144. $(".title").css("color", "green");
    145. console.log($(".title"));
    146. $(".title").css("color", "red");
    147. console.log(document.getElementsByClassName("title"));
    148. //4.dom树选择
    149. console.log($("table tbody tr th"));
    150. $("table tbody tr th").css("color", "#d4edda");
    151. $("#tableId td").css("background-color", "#f8d7da");
    152. $(".width thead th").css("background-color", "blue");
    153. //可以选择多个标签,多个ID、多个class,用,逗号隔开
    154. $("h3,th").css("background-color","#d1ecf1");
    155. $("h3,th").css("background-color", "#d1ecf1");
    156. $("#tableId,#titleId").css("background-color", "#d1ecf1");
    157. </script>
    158. </html>