search

博客列表 >dom操作演示、选择器操作演示、鼠标事件演示

dom操作演示、选择器操作演示、鼠标事件演示

橙絮圆
橙絮圆原创
2021年07月26日 10:45:20436浏览

dom操作演示、选择器操作演示、鼠标事件演示

作业标题：0721作业
作业内容：
1、dom 操作演示
2、选择器操作演示
3、鼠标事件演示

  • dom操作演示
    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>Document</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    9. </head>
    10. <body>
    11.   <ul class="list">
    12.     <li class="item">item1</li>
    13.     <li class="item">item2</li>
    14.     <li class="item">item3</li>
    15.     <li class="item">item4</li>
    16.     <li class="item">item5</li>
    17.     <li class="item">item6</li>
    18.     <li class="item">item7</li>
    19.     <li class="item">item8</li>
    20.     <li class="item">item9</li>
    21.     <li class="item">item10</li>
    22.   </ul>
    23.   <p>这是p标签</p>
    24.   <p>这是p标签</p>
    25.   <button>按钮</button>
    26. </body>
    27. <script>
    28.   //dom元素：添加、更新、删除
    29.   //1、append()
    30.   //选择父元素、在它里面追加一个元素，元素结尾追加内容
    31.   // $("button").click(function () {
    32.   //   $(".list").append('<li class="item">item11</li>');
    33.   // });
    34.   //2、prepend元素的开头插入指定内容
    35.   //$(".list").prepend('<li class="item">item0</li>');
    36.   //3、after()元素后插入指定的内容
    37.   // $(".list").after("<li style='color:red'>item11</li>");
    38.   // //4、before()元素之前插入指定内容
    39.   // $(".list").before("<li>item12</li>");
    40.   //5.replaceWith()用新的内容替换匹配的元素
    41.   $("button").click(function () {
    42.     //$("p").replaceWith("<li class='item'>item11</li>");
    43.     //6.replaceAll()用匹配的元素替换所有匹配的元素
    44.     $("<li class='item'>item11</li>").replaceAll("p");
    45.     //11、remove()删除元素，包括文本和子节点
    46.     $("p").remove();
    47.   });
    48. </script>
    49. </html>

  • 选择器操作演示

    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>Document</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    10.   <style>
    11.     * {
    12.       text-align: center;
    13.       font-size: 20px;
    14.     }
    15.     .title {
    16.       text-align: center;
    17.     }
    18.     .width {
    19.       width: 1200px;
    20.     }
    21.     tr {
    22.       height: 50px;
    23.     }
    24.     button {
    25.       width: 600px;
    26.       color: #fff;
    27.       background-color: #28a745;
    28.       border-color: #28a745;
    29.       margin-top: 30px;
    30.     }
    31.   </style>
    32. </head>
    33. <body>
    34.   <h3 class="title" id="titleId">php中文网名单</h3>
    35.   <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    36.     <thead>
    37.       <tr>
    38.         <th>编号</th>
    39.         <th>姓名</th>
    40.         <th>邮箱</th>
    41.         <th>电话</th>
    42.         <th>省份</th>
    43.         <th>城市</th>
    44.         <th>年龄</th>
    45.       </tr>
    46.     </thead>
    47.     <tbody>
    48.       <tr>
    49.         <th>1</th>
    50.         <td>天蓬</td>
    51.         <td>tianpeng@php.cn</td>
    52.         <td>13854381111</td>
    53.         <td>安徽</td>
    54.         <td>合肥</td>
    55.         <td>40</td>
    56.       </tr>
    57.       <tr>
    58.         <th>2</th>
    59.         <td>欧阳克</td>
    60.         <td>ouyangke@php.cn</td>
    61.         <td>13854382222</td>
    62.         <td>安徽</td>
    63.         <td>马鞍山</td>
    64.         <td>40</td>
    65.       </tr>
    66.       <tr>
    67.         <th>3</th>
    68.         <td>灭绝师太</td>
    69.         <td>miejue@php.cn</td>
    70.         <td>13854383333</td>
    71.         <td>安徽</td>
    72.         <td>滁州</td>
    73.         <td>18</td>
    74.       </tr>
    75.       <tr>
    76.         <th>4</th>
    77.         <td>裘千丈</td>
    78.         <td>qiuqianzhang@php.cn</td>
    79.         <td>13854384444</td>
    80.         <td>安徽</td>
    81.         <td>蚌埠</td>
    82.         <td>40</td>
    83.       </tr>
    84.       <tr>
    85.         <th>5</th>
    86.         <td>钟老师</td>
    87.         <td>zhonglaoshi@php.cn</td>
    88.         <td>13854385555</td>
    89.         <td>安徽</td>
    90.         <td>淮南</td>
    91.         <td>30</td>
    92.       </tr>
    93.       <tr>
    94.         <th>6</th>
    95.         <td>小编1</td>
    96.         <td>xiaobian1@php.cn</td>
    97.         <td>13854386661</td>
    98.         <td>安徽</td>
    99.         <td>安庆</td>
    100.         <td>18</td>
    101.       </tr>
    102.       <tr>
    103.         <th>7</th>
    104.         <td>小编2</td>
    105.         <td>xiaobian2@php.cn</td>
    106.         <td>13854386662</td>
    107.         <td>安徽</td>
    108.         <td>亳州</td>
    109.         <td>18</td>
    110.       </tr>
    111.       <tr>
    112.         <th>8</th>
    113.         <td>小编3</td>
    114.         <td>xiaobian3@php.cn</td>
    115.         <td>13854386663</td>
    116.         <td>安徽</td>
    117.         <td>淮北</td>
    118.         <td>18</td>
    119.       </tr>
    120.       <tr>
    121.         <th>9</th>
    122.         <td>小编4</td>
    123.         <td>xiaobian4@php.cn</td>
    124.         <td>13854386664</td>
    125.         <td>安徽</td>
    126.         <td>阜阳</td>
    127.         <td>18</td>
    128.       </tr>
    129.       <tr>
    130.         <th>10</th>
    131.         <td>小编5</td>
    132.         <td>xiaobian5@php.cn</td>
    133.         <td>13854386665</td>
    134.         <td>安徽</td>
    135.         <td>六安</td>
    136.         <td>18</td>
    137.       </tr>
    138.     </tbody>
    139.   </table>
    140.   <ul class="list">
    141.     <li class="item">item1</li>
    142.     <li class="item">item2</li>
    143.     <li class="item">item3</li>
    144.     <li class="item">item4</li>
    145.     <li class="item">item5</li>
    146.     <li class="item">item6</li>
    147.     <li class="item">item7</li>
    148.     <li class="item">item8</li>
    149.     <li class="item">item9</li>
    150.     <li class="item">item10</li>
    151.   </ul>
    152.   <!-- <button id="up">上一页</button> -->
    153.   <button id="per">下一页</button>
    154. </body>
    155. <script>
    156.   $("button").click(function () {
    157.     //选择器
    158.     //节点选择，但是不能单独中其中1条
    159.     //1、：first选择第一个元素
    160.     // $("tbody tr:first").css("color", "lightpink");
    161.     //2、：last选择最后一个元素
    162.     //   $("tr:last").css("color", "red");
    163.     //   //3、:even选择偶数，从0开始，0，2，4，6，8，10
    164.     //   $("tr:even").css("color", "red");
    165.     //   //4、:odd选择奇数，从1开始
    166.     //   $("tr:odd").css("color", "lime");
    167.     //5、:first-child选择你元素的第一个元素
    168.     // $("li:first-child").css("color", "red");
    169.     //6、first-of-type 选择父元素的第一个元素
    170.     // $("li:first-of-type").css("background-color", "yellow");
    171.     //7、:last-child选择父元素里的最后一个元素
    172.     //8、:last-of-type选择父元素里的最后一个元素
    173.     $("li:last-child").css("color", "red");
    174.     $("li:last-of-type").css("background-color", "blue");
    175.   });
    176. </script>
    177. </html>

  • 鼠标事件演示

    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>
    10.   <style>
    11.     * {
    12.       background-color: #d4edda;
    13.       text-align: center;
    14.       font-size: 20px;
    15.     }
    16.     .form-control {
    17.       width: 500px;
    18.       padding: 0.375rem 0.75rem;
    19.       font-size: 1rem;
    20.       font-weight: 400;
    21.       line-height: 1.5;
    22.       color: #495057;
    23.       background-color: #fff;
    24.       background-clip: padding-box;
    25.       border: 1px solid #ced4da;
    26.       border-radius: 0.25rem;
    27.       transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    28.     }
    29.     button {
    30.       width: 600px;
    31.       color: #fff;
    32.       background-color: #28a745;
    33.       border-color: #28a745;
    34.     }
    35.     .select {
    36.       width: 265px;
    37.       height: 47px;
    38.     }
    39.   </style>
    40. </head>
    41. <body>
    42.   <h2 class="title">注册</h2>
    43.   <form action="" onsubmit="return false;">
    44.     <p>
    45.       账户:
    46.       <input type="text" class="form-control" id="account" />
    47.     </p>
    48.     <p>
    49.       密码:
    50.       <input type="password" class="form-control" id="password" />
    51.     </p>
    52.     <p>
    53.       省市:
    54.       <select id="prov" class="form-control select">
    55.         <option value="">请选择</option>
    56.         <option value="1">安徽</option>
    57.         <option value="2">江苏</option>
    58.         <option value="3">河南</option>
    59.       </select>
    60.       <select id="city" class="form-control select">
    61.         <option value="">请选择</option>
    62.       </select>
    63.     </p>
    64.     <button>注册</button>
    65.   </form>
    66. </body>
    67. <script>
    68.   //1、click点击事件
    69.   // $("button").click(function () {
    70.   //   let account = $("#account").val();
    71.   //   if (!account) {
    72.   //     alert("请输入账户");
    73.   //     return false;
    74.   //   }
    75.   //   alert("成功");
    76.   // });
    77.   // 2、必须快速，连续点击2次，这个事件才触发dblclick()双击事件
    78.   // $("button").dblclick(function () {
    79.   //   alert("双击事件");
    80.   // });
    81.   //3、mouseenter()鼠标放到元素上，就触发
    82.   // $("#account").mouseenter(function () {
    83.   //   let account = $("#account").val();
    84.   //   if (!account) {
    85.   //     alert("请输入账户");
    86.   //     return false;
    87.   //   }
    88.   //   alert("成功");
    89.   // });
    90.   //4、mouseleave()鼠标移开元素，就触发
    91.   // $("#account").mouseleave(function () {
    92.   //   alert("鼠标移开触发");
    93.   // });
    94.   //5、hover()鼠标触碰和移开，都会触发
    95.   // $("button").hover(
    96.   //   function () {
    97.   //     console.log("鼠标放到按钮上了");
    98.   //   },
    99.   //   function () {
    100.   //     console.log("鼠标从按钮上移开了");
    101.   //   }
    102.   // );
    103.   $("button").click(function () {
    104.     let account = $("#account").val();
    105.     if (!account) {
    106.       alert("请输入账户");
    107.       return false;
    108.     }
    109.     if (account == "admin" || account == "php中文网") {
    110.       alert("该账户不能使用");
    111.       return false;
    112.     }
    113.     let password = "#password".val();
    114.     if (!password) {
    115.       alert("请输入密码");
    116.       return false;
    117.     }
    118.     if (password.length <= 6) {
    119.       alert("请输入大于6位的密码");
    120.       return false;
    121.     }
    122.     alert("成功"); //代表把数据提交给数据库了
    123.   });
    124. </script>
    125. </html>
上一条：第十九课 表单事件&键盘事件&GET方法下一条：07-13作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多