四、表单选择器
:input：取input元素
:text：取单行文本框元素
:password：取密码框元素
:radio：取单选框元素
:checkbox：取复选框元素
:file：取上传域元素
:images：取图片按钮元素
:button：取所有的按钮元素
:submit：取提交按钮元素
:reset：取重置按钮元素
这里我们写了一个注册界面的布局来使用表单选择器
<body>
<fieldset style="width: 200px;height: 500px;"><a href=""></a>
<legend>注册表单</legend>
<form>
<p>用户名：<input type="text" name="username"/></p>
<p>密码：<input type="password" name="pwd"/></p>
<p>确认密码：<input type="password" name="repwd"/></p>
<p>性别：
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<p>个人爱好：
<input type="checkbox" name="hobby" value="跑步"/>跑步
<input type="checkbox" name="hobby" value="读书"/>读书
<input type="checkbox" name="hobby" value="爬山"/>爬山
<input type="checkbox" name="hobby" value="其他"/>其他
</p>
<p>选择资料：
<input type="file"/>
</p>
<p>
<input type="image">
<br/>
<button>上传图片</button>
</p>
<input type="submit" value="提交表单"/>
<input type="reset" value="重置表单">
<br/>
</form>
</fieldset>
</body>
界面效果：
使用表单选择器来修改htm元素的样式
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(":input").css("background","red");
$(":text").attr("value","账号");
$(":password").attr("value","密码");
$(":radio:eq(0)").attr("checked","true");
$(":checkbox").attr("checked","true");
$(":file").css("background","red");
$(":image").attr("src","1.png");
$(":button").css("background","green");
$(":submit").css("background","green");
$(":reset").css("background","red");
});
</script>
运行后的效果
扫一扫
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
