jQuery的选择器(五)
来源:互联网 发布:乔任梁死因分析知乎 编辑:程序博客网 时间:2024/06/05 21:03
四、表单选择器
: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>
运行后的效果
- jQuery的选择器(五)
- jquery(五)大话jquery选择器
- jquery ui(五)日期选择器 datepicker
- jQuery选择器代码详解(五)——实例说明tokenize的解析过程
- jQuery的选择器(一)
- jQuery的选择器(二)
- jQuery的选择器(三)
- jQuery的选择器(四)
- jQuery学习<五> — — 选择器(下)
- jQuery选择器 过滤选择器(五.子元素过滤选择器)
- Jquery学习五-1---jQuery常用选择器
- jQuery 的选择器 元素选择器
- Jquery选择器的基本选择器
- Jquery选择器的层次选择器
- Jquery-选择器-简单的选择器
- jQuery选择器之全选择器(*选择器)
- jQuery选择器之全选择器(*选择器)
- jQuery选择器之全选择器(*选择器)
- ds 6.1 brothers
- 【Codeforces Beta Round #48】 Codeforces 51F Caterpillar
- ROS机器人Diego 1#制作(十一)将letv xtion点云数据转换成激光数据
- 4 种方法识别Linux系统 USB 设备
- C++ Primer课后练习9.47
- jQuery的选择器(五)
- php实现页面静态化
- python 中 sort(), sorted(), argsort()
- java类的成员变量、静态成员变量、一般方法、静态方法
- c语言
- C++primer第4版第十二章类
- 微信公众号系统
- Mac安装MySql报错
- API 25 (Android 7.1.1 API) Manifest.permission——权限