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

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

演示文本操作3个功能

<!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>
    * {
      background-color: #d4edda;
      text-align: center;
      font-size: 20px;
    }
    .form-control {
      width: 500px;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    button {
      width: 600px;
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
  </style>
</head>
<body>
  <h2 class="title">添加商品</h2>
  <form onsubmit="return false;">
    <p>
      商品标题:
      <input type="text" id="title" name="title" class="form-control" />
    </p>
    <p>
      商品价格:
      <input type="number" id="price" name="price" class="form-control" />
    </p>
    <p>
      商品类别:
      <select
        id="type"
        name="type"
        class="form-control"
        style="width: 530px; height: 47px"
      >
        <option value="">请选择</option>
        <option value="1">男装</option>
        <option value="2">女装</option>
        <option value="3">母婴童装</option>
        <option value="4">美妆护肤</option>
        <option value="5">内衣配饰</option>
        <option value="6">家具家装</option>
        <option value="7">书籍</option>
      </select>
    </p>
    <button>按钮</button>
    <div style="color: red; margin-top: 20px">我是天蓬</div>
  </form>
</body>
<script>
  $("button").click(function () {
    console.log($("#title").val());
   $("div").html("<p style='color:green;'>我是欧阳克</p>");
    $("div").text("我是欧阳克");
  });
</script>
</html>

演示样式属性操作3个功能

// 2、removeClass() 删除元素上的 类
    // jq 删除类
    //   $("#title").removeClass("form-control");
    // js 删除类
    //   document.querySelector("input").classList.remove("form-control");
    // jq 删除多个input
    //   $("input").removeClass("form-control");
    // 3、toggleClass() 检查元素上是否有类，有的话删除，没有的话添加
    $("input").toggleClass("form-color-width");
  });

演示效果操作3个功能

<!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>
    * {
      background-color: #d4edda;
      text-align: center;
      font-size: 20px;
    }
    .form-control {
      width: 500px;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    button {
      width: 600px;
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
    .form-color-width {
      width: 200px;
    }
  </style>
</head>
<body>
  <h2 class="title">添加商品</h2>
  <form onsubmit="return false;">
    <p>
      商品标题:
      <input type="text" id="title" name="title" class="form-control" />
    </p>
    <p>
      商品价格:
      <input type="number" id="price" name="price" class="form-control" />
    </p>
    <p id="type_p">
      商品类别:
      <select
        id="type"
        name="type"
        class="form-control"
        style="width: 265px; height: 47px"
      >
        <option value="">请选择</option>
        <option value="1">男装</option>
        <option value="2">女装</option>
        <option value="3">母婴童装</option>
        <option value="4">美妆护肤</option>
        <option value="5">内衣配饰</option>
        <option value="6">家具家装</option>
        <option value="7">书籍</option>
      </select>
      <select
        id="type_two"
        name="type"
        class="form-control"
        style="width: 265px; height: 47px"
      >
        <option value="">请选择</option>
      </select>
    </p>
    <button>按钮</button>
    <div style="color: red; margin-top: 20px">我是天蓬</div>
  </form>
</body>
<script>
  $("button").click(function () {
    // 备：是隐藏和显示 html代码，不是删除html代码
    // 1、hide() 可以把html代码隐藏
    // jq 的方式
    $("#type_p").hide();
    //   2、show() 可以把html代码显示
    // jq 的方式
    $("#type_p").show();
    //   3、toggle() 切换hide和 show 这2个方法
    $("#type_p").toggle();
  });
</script>
</html>

什么是节点，演示节点功能操作

什么是节点
在编写HTNL代码时，在标签中添加的属性就是属性节点

<!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>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h7>h7</h7>
<h8>h8</h8>
<h9>h9</h9>
<h10>h10</h10>
<button>按钮</button>
</body>
<script>
//1、children获取后代
//console.log($("ul").children());
//$("ul .item").css("color", "red");
//$("ul").children().css("color", "red");
//$("ul").find("span").css("color", "red");
//$("li").siblings().css("color", "red");
$("button").click(function () {
 $("h3").nextUntil().css("color", "red");
});
</script>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

0628第1节课

2021-06-28 22:48:00

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

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