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>
    9. <style>
    10. * {
    11. text-align: center;
    12. font-size: 20px;
    13. }
    14. .title {
    15. text-align: center;
    16. }
    17. .width {
    18. width: 1200px;
    19. }
    20. tr {
    21. height: 50px;
    22. }
    23. button {
    24. width: 600px;
    25. color: #fff;
    26. background-color: #28a745;
    27. border-color: #28a745;
    28. margin-top: 30px;
    29. }
    30. </style>
    31. </head>
    32. <body>
    33. <h3 class="title" id="titleId">php中文网名单</h3>
    34. <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    35. <thead>
    36. <tr>
    37. <th>编号</th>
    38. <th>姓名</th>
    39. <th>邮箱</th>
    40. <th>电话</th>
    41. <th>省份</th>
    42. <th>城市</th>
    43. <th>年龄</th>
    44. </tr>
    45. </thead>
    46. <tbody>
    47. <tr>
    48. <th>1</th>
    49. <td>天蓬</td>
    50. <td>tianpeng@php.cn</td>
    51. <td>13854381111</td>
    52. <td>安徽</td>
    53. <td>合肥</td>
    54. <td>40</td>
    55. </tr>
    56. <tr>
    57. <th>2</th>
    58. <td>欧阳克</td>
    59. <td>ouyangke@php.cn</td>
    60. <td>13854382222</td>
    61. <td>安徽</td>
    62. <td>马鞍山</td>
    63. <td>40</td>
    64. </tr>
    65. <tr>
    66. <th>3</th>
    67. <td>灭绝师太</td>
    68. <td>miejue@php.cn</td>
    69. <td>13854383333</td>
    70. <td>安徽</td>
    71. <td>滁州</td>
    72. <td>18</td>
    73. </tr>
    74. <tr>
    75. <th>4</th>
    76. <td>裘千丈</td>
    77. <td>qiuqianzhang@php.cn</td>
    78. <td>13854384444</td>
    79. <td>安徽</td>
    80. <td>蚌埠</td>
    81. <td>40</td>
    82. </tr>
    83. <tr>
    84. <th>5</th>
    85. <td>钟老师</td>
    86. <td>zhonglaoshi@php.cn</td>
    87. <td>13854385555</td>
    88. <td>安徽</td>
    89. <td>淮南</td>
    90. <td>30</td>
    91. </tr>
    92. <tr>
    93. <th>6</th>
    94. <td>小编1</td>
    95. <td>xiaobian1@php.cn</td>
    96. <td>13854386661</td>
    97. <td>安徽</td>
    98. <td>安庆</td>
    99. <td>18</td>
    100. </tr>
    101. <tr>
    102. <th>7</th>
    103. <td>小编2</td>
    104. <td>xiaobian2@php.cn</td>
    105. <td>13854386662</td>
    106. <td>安徽</td>
    107. <td>亳州</td>
    108. <td>18</td>
    109. </tr>
    110. <tr>
    111. <th>8</th>
    112. <td>小编3</td>
    113. <td>xiaobian3@php.cn</td>
    114. <td>13854386663</td>
    115. <td>安徽</td>
    116. <td>淮北</td>
    117. <td>18</td>
    118. </tr>
    119. <tr>
    120. <th>9</th>
    121. <td>小编4</td>
    122. <td>xiaobian4@php.cn</td>
    123. <td>13854386664</td>
    124. <td>安徽</td>
    125. <td>阜阳</td>
    126. <td>18</td>
    127. </tr>
    128. <tr>
    129. <th>10</th>
    130. <td>小编5</td>
    131. <td>xiaobian5@php.cn</td>
    132. <td>13854386665</td>
    133. <td>安徽</td>
    134. <td>六安</td>
    135. <td>18</td>
    136. </tr>
    137. </tbody>
    138. </table>
    139. <ul class="list">
    140. <li class="item">item1</li>
    141. <li class="item">item2</li>
    142. <li class="item">item3</li>
    143. <li class="item">item4</li>
    144. <li class="item">item5</li>
    145. <li class="item">item6</li>
    146. <li class="item">item7</li>
    147. <li class="item">item8</li>
    148. <li class="item">item9</li>
    149. <li class="item">item10</li>
    150. </ul>
    151. <!-- <button id="up">上一页</button> -->
    152. <button id="per">下一页</button>
    153. </body>
    154. <script>
    155. $("button").click(function () {
    156. //选择器
    157. //节点选择,但是不能单独中其中1条
    158. //1、:first选择第一个元素
    159. // $("tbody tr:first").css("color", "lightpink");
    160. //2、:last选择最后一个元素
    161. // $("tr:last").css("color", "red");
    162. // //3、:even选择偶数,从0开始,0,2,4,6,8,10
    163. // $("tr:even").css("color", "red");
    164. // //4、:odd选择奇数,从1开始
    165. // $("tr:odd").css("color", "lime");
    166. //5、:first-child选择你元素的第一个元素
    167. // $("li:first-child").css("color", "red");
    168. //6、first-of-type 选择父元素的第一个元素
    169. // $("li:first-of-type").css("background-color", "yellow");
    170. //7、:last-child选择父元素里的最后一个元素
    171. //8、:last-of-type选择父元素里的最后一个元素
    172. $("li:last-child").css("color", "red");
    173. $("li:last-of-type").css("background-color", "blue");
    174. });
    175. </script>
    176. </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>
    9. <style>
    10. * {
    11. background-color: #d4edda;
    12. text-align: center;
    13. font-size: 20px;
    14. }
    15. .form-control {
    16. width: 500px;
    17. padding: 0.375rem 0.75rem;
    18. font-size: 1rem;
    19. font-weight: 400;
    20. line-height: 1.5;
    21. color: #495057;
    22. background-color: #fff;
    23. background-clip: padding-box;
    24. border: 1px solid #ced4da;
    25. border-radius: 0.25rem;
    26. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    27. }
    28. button {
    29. width: 600px;
    30. color: #fff;
    31. background-color: #28a745;
    32. border-color: #28a745;
    33. }
    34. .select {
    35. width: 265px;
    36. height: 47px;
    37. }
    38. </style>
    39. </head>
    40. <body>
    41. <h2 class="title">注册</h2>
    42. <form action="" onsubmit="return false;">
    43. <p>
    44. 账户:
    45. <input type="text" class="form-control" id="account" />
    46. </p>
    47. <p>
    48. 密码:
    49. <input type="password" class="form-control" id="password" />
    50. </p>
    51. <p>
    52. 省市:
    53. <select id="prov" class="form-control select">
    54. <option value="">请选择</option>
    55. <option value="1">安徽</option>
    56. <option value="2">江苏</option>
    57. <option value="3">河南</option>
    58. </select>
    59. <select id="city" class="form-control select">
    60. <option value="">请选择</option>
    61. </select>
    62. </p>
    63. <button>注册</button>
    64. </form>
    65. </body>
    66. <script>
    67. //1、click点击事件
    68. // $("button").click(function () {
    69. // let account = $("#account").val();
    70. // if (!account) {
    71. // alert("请输入账户");
    72. // return false;
    73. // }
    74. // alert("成功");
    75. // });
    76. // 2、必须快速,连续点击2次,这个事件才触发dblclick()双击事件
    77. // $("button").dblclick(function () {
    78. // alert("双击事件");
    79. // });
    80. //3、mouseenter()鼠标放到元素上,就触发
    81. // $("#account").mouseenter(function () {
    82. // let account = $("#account").val();
    83. // if (!account) {
    84. // alert("请输入账户");
    85. // return false;
    86. // }
    87. // alert("成功");
    88. // });
    89. //4、mouseleave()鼠标移开元素,就触发
    90. // $("#account").mouseleave(function () {
    91. // alert("鼠标移开触发");
    92. // });
    93. //5、hover()鼠标触碰和移开,都会触发
    94. // $("button").hover(
    95. // function () {
    96. // console.log("鼠标放到按钮上了");
    97. // },
    98. // function () {
    99. // console.log("鼠标从按钮上移开了");
    100. // }
    101. // );
    102. $("button").click(function () {
    103. let account = $("#account").val();
    104. if (!account) {
    105. alert("请输入账户");
    106. return false;
    107. }
    108. if (account == "admin" || account == "php中文网") {
    109. alert("该账户不能使用");
    110. return false;
    111. }
    112. let password = "#password".val();
    113. if (!password) {
    114. alert("请输入密码");
    115. return false;
    116. }
    117. if (password.length <= 6) {
    118. alert("请输入大于6位的密码");
    119. return false;
    120. }
    121. alert("成功"); //代表把数据提交给数据库了
    122. });
    123. </script>
    124. </html>

更多相关文章

  1. jquery $()的参数和选择器
  2. 演示文本操作3个功能+演示样式属性操作 3个功能+演示 效果操作 3
  3. $.get,$.post,$ajax与Vue基本术语
  4. 个人信息表的网页
  5. 1.理解 box-sizing功能并实例演示; 2. 理解相对定位与绝对定位,并
  6. 实例演示dom元素的增删改查操作
  7. 字体图标的引用及页面布局盒模型常用属性
  8. 字体图标的用法 盒模型的演示 box-sizing的用法
  9. css_0701作业

随机推荐

  1. Android Bluetooth How To--Based on And
  2. Android和。net加密。
  3. Android中高效的显示图片之三——缓存图
  4. Android Studio(四):Android Studio集成Ge
  5. 安卓如何限制横屏和竖屏
  6. Android 学习网站汇总
  7. Android去掉头部标题
  8. android大屏设备中的经典应用--MIQI卡片
  9. Android:configChanges 属性
  10. android自定义属性 format类型