Community Learn Tools Library Leisure
search
English
Home > List of blog posts > dom操作演示、选择器操作演示、鼠标事件演示
Blogger Information
Blog 43
fans 0
comment 0
visits 30443
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
dom操作演示、选择器操作演示、鼠标事件演示
橙絮圆
Original
441 people have browsed it

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>
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