<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单.html</title>
<style>
.orange{
background: orange;
}
.widthsize{
width: 100px;
}
.size{
font-size: 100px;
}
</style>
</head>
<body>
<table>
<tr>
<td>昵称</td>
<td><input type="text" placeholder="请输入昵称"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" checked="checked" name="aa">男
<input type="radio" name="aa">女
</td>
</tr>
<tr>
<td>喜好</td>
<td><input type="checkbox" name="bb">打架
<input type="checkbox" name="bb">防火
<input type="checkbox" name="bb">救灾
</td>
</tr>
<tr>
<td><input type="reset" value="重置"></td>
<td><input type="submit" value="提交"></td>
</tr>
<tr>
<td>
<input type="file">
</td>
</tr>
<tr>
<td>
<select name="" id="" multiple="multiple">
<option value="">张三</option>
<option value="">李四</option>
<option value="">王五</option>
<option value="">赵六</option>
</select>
<td>
<input type="button" value="hide" id="bvc">
</td>
</td>
</tr>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
$(":input").addClass("orange");//选中所有的input元素
$(":text").addClass("widthsize");//选中所有文本类型的input元素
$(":password").addClass("widthsize");//选中所有密码类型的input元素
$(":radio").addClass("size");//选中所有的单选按钮
$(":checkbox").addClass("size");//选中所有的复选框元素
$(":submit").addClass("orange");//选中所有的提交按钮
$(":image").addClass("orange");//选中所有的图片按钮
$(":reset").addClass("orange");//选中所有的重置按钮
$(":button").addClass("orange");//选中所有的button元素
$(":file").addClass("orange");//所有的的文件选择器
$("bvc").on("click",function(){
$(":selected").hide();//下拉列表中的所有被选中的列表项
})
</script>
</body>
</html>
网友评论