Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jquery $()的参数和选择器
Blogger Information
Blog 43
fans 0
comment 0
visits 30463
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery $()的参数和选择器
橙絮圆
Original
844 people have browsed it

jquery $()的参数和选择器

作业标题：0719作业
作业内容：1、下载并引用jQuery 2、JavaScript 和 jQuery 对比。 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"));
    144.  //3.class选择器
    145.  $(".title").css("color", "green");
    146.  console.log($(".title"));
    147.  $(".title").css("color", "red");
    148.  console.log(document.getElementsByClassName("title"));
    150.  //4.dom树选择
    151.  console.log($("table tbody tr th"));
    152.  $("table tbody tr th").css("color", "#d4edda");
    154.  $("#tableId td").css("background-color", "#f8d7da");
    155.  $(".width thead th").css("background-color", "blue");
    156.  //可以选择多个标签，多个ID、多个class,用,逗号隔开
    157.  $("h3,th").css("background-color","#d1ecf1");
    158.  $("h3,th").css("background-color", "#d1ecf1");
    159.  $("#tableId,#titleId").css("background-color", "#d1ecf1");
    160. </script>
    161. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post