jquery文本操作、样式属性操作、效果学习 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<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>
  </form>
</body>

<!-- <div>小猪佩奇</div> -->
    
<script>
    // $()参数 有四种
    // 选择器四种
    // 属性操作 有css attr removeAttr
    // 点击事件
    // val()获取，设置，元素的值
    // val()获取
    // val(param)设置
    // val(callback)
    // console.log($("#title").val());

    $("button").click(function(){
        // 获取
    //     console.log($("#title").val());
    //     // console.log($("#price").val());
    //     // console.log($("#type").val());


    //     console.log(document.getElementById("title").value);
    //     let title=$("#title").val();
    //     if(!title){
    //     alert("商品标题不能为空");
    //     return false;
    //   }
     // 设置
     $("#title").val("php实战指南");
     document.getElementById("title").value="小明今天不睡觉";

     //回调方法
     $("#title").val(()=>"小哥哥好瘦呀");
})

</script>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<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(){
        // test（）获取，设置，文本
        // text和val有区别
        console.log($("div").text());
        // $("div").text("我是欧阳克");
    });


    
</script>
</html>

　　

posted @ 2024-06-20 23:38  豹纹守宫  阅读(15)  评论(0)    收藏  举报