search

博客列表 >演示文本操作、演示样式属性操作 、演示 效果操作、演示节点功能操作

演示文本操作、演示样式属性操作 、演示 效果操作、演示节点功能操作

橙絮圆
橙絮圆原创
2021年07月25日 15:23:05595浏览

演示文本操作、演示样式属性操作 、演示 效果操作、演示节点功能操作

作业标题：0720作业
作业内容：
1、演示文本操作3个功能
2、演示样式属性操作3个功能
3、演示 效果操作 3个功能
4、什么是节点，演示节点功能操作

  • 演示文本操作3个功能

    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.   </style>
    36. </head>
    37. <body>
    38.   <h2 class="title">添加商品</h2>
    39.   <form onsubmit="return false;">
    40.     <p>
    41.       商品标题:
    42.       <input type="text" id="title" name="title" class="form-control" />
    43.     </p>
    44.     <p>
    45.       商品价格:
    46.       <input type="number" id="price" name="price" class="form-control" />
    47.     </p>
    48.     <p>
    49.       商品类别:
    50.       <select
    51.         id="type"
    52.         name="type"
    53.         class="form-control"
    54.         style="width: 530px; height: 47px"
    55.       >
    56.         <option value="">请选择</option>
    57.         <option value="1">男装</option>
    58.         <option value="2">女装</option>
    59.         <option value="3">母婴童装</option>
    60.         <option value="4">美妆护肤</option>
    61.         <option value="5">内衣配饰</option>
    62.         <option value="6">家具家装</option>
    63.         <option value="7">书籍</option>
    64.       </select>
    65.     </p>
    66.     <button>按钮</button>
    67.     <div style="color: red; margin-top: 20px">我是天蓬</div>
    68.   </form>
    69. </body>
    70. <script>
    71.   $("button").click(function () {
    72.     console.log($("#title").val());
    73.    $("div").html("<p style='color:green;'>我是欧阳克</p>");
    74.     $("div").text("我是欧阳克");
    75.   });
    76. </script>
    77. </html>
  • 演示样式属性操作3个功能
    1. // 2、removeClass() 删除元素上的 类
    2.     // jq 删除类
    3.     //   $("#title").removeClass("form-control");
    4.     // js 删除类
    5.     //   document.querySelector("input").classList.remove("form-control");
    6.     // jq 删除多个input
    7.     //   $("input").removeClass("form-control");
    8.     // 3、toggleClass() 检查元素上是否有类，有的话删除，没有的话添加
    9.     $("input").toggleClass("form-color-width");
    10.   });
  • 演示 效果操作3个功能
    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.     .form-color-width {
    35.       width: 200px;
    36.     }
    37.   </style>
    38. </head>
    39. <body>
    40.   <h2 class="title">添加商品</h2>
    41.   <form onsubmit="return false;">
    42.     <p>
    43.       商品标题:
    44.       <input type="text" id="title" name="title" class="form-control" />
    45.     </p>
    46.     <p>
    47.       商品价格:
    48.       <input type="number" id="price" name="price" class="form-control" />
    49.     </p>
    50.     <p id="type_p">
    51.       商品类别:
    52.       <select
    53.         id="type"
    54.         name="type"
    55.         class="form-control"
    56.         style="width: 265px; height: 47px"
    57.       >
    58.         <option value="">请选择</option>
    59.         <option value="1">男装</option>
    60.         <option value="2">女装</option>
    61.         <option value="3">母婴童装</option>
    62.         <option value="4">美妆护肤</option>
    63.         <option value="5">内衣配饰</option>
    64.         <option value="6">家具家装</option>
    65.         <option value="7">书籍</option>
    66.       </select>
    67.       <select
    68.         id="type_two"
    69.         name="type"
    70.         class="form-control"
    71.         style="width: 265px; height: 47px"
    72.       >
    73.         <option value="">请选择</option>
    74.       </select>
    75.     </p>
    76.     <button>按钮</button>
    77.     <div style="color: red; margin-top: 20px">我是天蓬</div>
    78.   </form>
    79. </body>
    80. <script>
    81.   $("button").click(function () {
    82.     // 备：是隐藏和显示 html代码，不是删除html代码
    83.     // 1、hide() 可以把html代码隐藏
    84.     // jq 的方式
    85.     $("#type_p").hide();
    86.     //   2、show() 可以把html代码显示
    87.     // jq 的方式
    88.     $("#type_p").show();
    89.     //   3、toggle() 切换hide和 show 这2个方法
    90.     $("#type_p").toggle();
    91.   });
    92. </script>
    93. </html>
  • 什么是节点，演示节点功能操作
    • 什么是节点
      在编写HTNL代码时，在标签中添加的属性就是属性节点
      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. <h1>h1</h1>
      12. <h2>h2</h2>
      13. <h3>h3</h3>
      14. <h4>h4</h4>
      15. <h5>h5</h5>
      16. <h6>h6</h6>
      17. <h7>h7</h7>
      18. <h8>h8</h8>
      19. <h9>h9</h9>
      20. <h10>h10</h10>
      21. <button>按钮</button>
      22. </body>
      23. <script>
      24. //1、children获取后代
      25. //console.log($("ul").children());
      26. //$("ul .item").css("color", "red");
      27. //$("ul").children().css("color", "red");
      28. //$("ul").find("span").css("color", "red");
      29. //$("li").siblings().css("color", "red");
      30. $("button").click(function () {
      31.  $("h3").nextUntil().css("color", "red");
      32. });
      33. </script>
      34. </html>
      节点
上一条：Ajax 添加删除修改下一条：微信JSSDK签名
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多