<!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>
标签：jquery,console,val,title,color,background,操作,文本,border From： https://www.cnblogs.com/QWD7986/p/18259694