jquery $()的参数和选择器

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

下载并引用jQuery

JavaScript 和 jQuery 对比。

//js
document
     .querySelectorAll(".item")
     .forEach((item) => (item.style.color = "green"));
//jquery
   $(".item").css("color", "red");

列出 $() 的参数
选择器包装器 html文本回调

列出选择器，并查看效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>$() 选择器</title>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
 <style>
   * {
     font-size: 20px;
   }
   .title {
     text-align: center;
   }
   .width {
     width: 1200px;
   }
   tr {
     height: 50px;
   }
 </style>
</head>
<body>
 <h3 class="title h3" id="titleId">用户列表</h3>
 <table class="width" id="tableId" border="1" align="center" cellspacing="0">
   <thead>
     <tr>
       <th>编号</th>
       <th>姓名</th>
       <th>邮箱</th>
       <th>电话</th>
       <th>省份</th>
       <th>城市</th>
       <th>年龄</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>1</th>
       <td>天蓬</td>
       <td>tianpeng@php.cn</td>
       <td>13854381111</td>
       <td>安徽</td>
       <td>合肥</td>
       <td>40</td>
     </tr>
     <tr>
       <th>2</th>
       <td>欧阳克</td>
       <td>ouyangke@php.cn</td>
       <td>13854382222</td>
       <td>安徽</td>
       <td>马鞍山</td>
       <td>40</td>
     </tr>
     <tr>
       <th>3</th>
       <td>灭绝师太</td>
       <td>miejue@php.cn</td>
       <td>13854383333</td>
       <td>安徽</td>
       <td>滁州</td>
       <td>18</td>
     </tr>
     <tr>
       <th>4</th>
       <td>裘千丈</td>
       <td>qiuqianzhang@php.cn</td>
       <td>13854384444</td>
       <td>安徽</td>
       <td>蚌埠</td>
       <td>40</td>
     </tr>
     <tr>
       <th>5</th>
       <td>钟老师</td>
       <td>zhonglaoshi@php.cn</td>
       <td>13854385555</td>
       <td>安徽</td>
       <td>淮南</td>
       <td>30</td>
     </tr>
     <tr>
       <th>6</th>
       <td>小编1</td>
       <td>xiaobian1@php.cn</td>
       <td>13854386661</td>
       <td>安徽</td>
       <td>安庆</td>
       <td>18</td>
     </tr>
     <tr>
       <th>7</th>
       <td>小编2</td>
       <td>xiaobian2@php.cn</td>
       <td>13854386662</td>
       <td>安徽</td>
       <td>亳州</td>
       <td>18</td>
     </tr>
     <tr>
       <th>8</th>
       <td>小编3</td>
       <td>xiaobian3@php.cn</td>
       <td>13854386663</td>
       <td>安徽</td>
       <td>淮北</td>
       <td>18</td>
     </tr>
     <tr>
       <th>9</th>
       <td>小编4</td>
       <td>xiaobian4@php.cn</td>
       <td>13854386664</td>
       <td>安徽</td>
       <td>阜阳</td>
       <td>18</td>
     </tr>
     <tr>
       <th>10</th>
       <td>小编5</td>
       <td>xiaobian5@php.cn</td>
       <td>13854386665</td>
       <td>安徽</td>
       <td>六安</td>
       <td>18</td>
     </tr>
   </tbody>
 </table>
</body>
<script>
 //1.标签选择器
 console.log($("table"));
 $("table").css("color", "red");
 console.log(document.getElementsByTagName("h3"));
 // 2.id选择器 #代表id
 //jquery获取的id,是一个对象，里面有0下标
 console.log($("#titleId"));
 $("#titleId").css("background-color", "blue");
 //js获取的id,是html代码
 console.log(document.getElementById("titleId"));
 //3.class选择器
 $(".title").css("color", "green");
 console.log($(".title"));
 $(".title").css("color", "red");
 console.log(document.getElementsByClassName("title"));
 //4.dom树选择
 console.log($("table tbody tr th"));
 $("table tbody tr th").css("color", "#d4edda");
 $("#tableId td").css("background-color", "#f8d7da");
 $(".width thead th").css("background-color", "blue");
 //可以选择多个标签，多个ID、多个class,用,逗号隔开
 $("h3,th").css("background-color","#d1ecf1");
 $("h3,th").css("background-color", "#d1ecf1");
 $("#tableId,#titleId").css("background-color", "#d1ecf1");
</script>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0628第1节课

2021-06-28 22:48:00