jQuery之表单域选择器学习笔记
2014-12-19 19:58
621 查看
表单域选择器：
专门用于从文档中选择表单域，均以：开头
表单域指：input,textarea,select,button元素
Input具有各种各样的type属性值：text,password,radio,checkbox等。
1】:input选择器:用于选择所有input,textarea,select,button元素
语法：$(“:input”)
2】:text选择器:用于选择所有单行文本框（<input type=”text”/>）
语法：$(“:text”)
3】:password选择器:用于选择所有密码框（<input type=”password”/>）
语法：$(“:password”)
4】:radio选择器：用于选择所有单选按钮（<input type=”radio”/>）
语法：$(“:radio”)
5】:checkbox选择器:用于选择所有复选框（<input type=”checkbox”/>）
语法：$(“:checkbox”)
6】:file选择器：用于选择所有的文本域（<input type=”file”/>）
语法：$(“:file”)
7】:image选择器:用于选择所有的图像域（<input type=”image”/>）
语法：$(“:image”)
8】:hidden选择器:用于选择所有不可见元素（css display属性值为none）以及隐藏域（<input type=”hidden”/>）
语法：$(“:hidden”)
9】:button选择器:用于选择所有的按钮（<input type=”button”/>）
语法：$(“:button”)
10】:subm
bd8f
it选择器:用于选择所有的提交按钮（<input type=”submit”/>）
语法：$(“:submit”)
11】:reset选择器:用于选择所有的重置按钮（<input type=”reset”/>）
语法：$(“:reset”)
注：button元素同时属于$(“:button”) 和
$(“:submit”)
综合例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="F://jQuery_study/jquery-1.11.1.min.js"></script>
</head>
<body>
<table width="645" height="145" border="1" >
<tr>
<td width="89" height="23" >文本框</td>
<td width="194"><input type="text"/></td>
<td width="74" >密码框</td>
<td width="260" ><input type="password"/></td>
</tr>
<tr>
<td height="24" >单选按钮</td>
<td> <input type="radio" /> <input type="radio" /></td>
<td>复选框</td>
<td> <input type="checkbox" /> <input type="checkbox" /></td>
</tr>
<tr>
<td height="36">图像</td>
<td> <input type="image" /></td>
<td>文件域</td>
<td> <input type="file" /></td>
</tr>
<tr>
<td height="23">隐藏域</td>
<td> <input type="hidden" />（不可见）</td>
<td>下拉列表</td>
<td>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
</td>
</tr>
<tr>
<td height="25">提交按钮</td>
<td> <input type="submit" /></td>
<td>重置按钮</td>
<td> <input type="reset" /></td>
</tr>
<tr>
<td valign="top">文本区域：</td>
<td colspan="3"><textarea cols="70" rows="3"></textarea></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$(":text").attr("value","文本框");
$(":password").attr("value","密码框");
$(":radio:eq(0)").attr("checked","true");
$(":checkbox").attr("checked","true");
$(":image").attr("src","IOC.IOC");
$(":file").css("width","200px");
$(":hidden").attr("value","已保存的值");
$("select").css("background","#FCF");
$(":submit").attr("id","btn1");
$(":reset").attr("name","btn");
$("textarea").attr("value","文本区域");
})
</script>
</body>
</html>
效果图：
专门用于从文档中选择表单域，均以：开头
表单域指：input,textarea,select,button元素
Input具有各种各样的type属性值：text,password,radio,checkbox等。
1】:input选择器:用于选择所有input,textarea,select,button元素
语法：$(“:input”)
2】:text选择器:用于选择所有单行文本框（<input type=”text”/>）
语法：$(“:text”)
3】:password选择器:用于选择所有密码框（<input type=”password”/>）
语法：$(“:password”)
4】:radio选择器：用于选择所有单选按钮（<input type=”radio”/>）
语法：$(“:radio”)
5】:checkbox选择器:用于选择所有复选框（<input type=”checkbox”/>）
语法：$(“:checkbox”)
6】:file选择器：用于选择所有的文本域（<input type=”file”/>）
语法：$(“:file”)
7】:image选择器:用于选择所有的图像域（<input type=”image”/>）
语法：$(“:image”)
8】:hidden选择器:用于选择所有不可见元素（css display属性值为none）以及隐藏域（<input type=”hidden”/>）
语法：$(“:hidden”)
9】:button选择器:用于选择所有的按钮（<input type=”button”/>）
语法：$(“:button”)
10】:subm
bd8f
it选择器:用于选择所有的提交按钮（<input type=”submit”/>）
语法：$(“:submit”)
11】:reset选择器:用于选择所有的重置按钮（<input type=”reset”/>）
语法：$(“:reset”)
注：button元素同时属于$(“:button”) 和
$(“:submit”)
综合例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="F://jQuery_study/jquery-1.11.1.min.js"></script>
</head>
<body>
<table width="645" height="145" border="1" >
<tr>
<td width="89" height="23" >文本框</td>
<td width="194"><input type="text"/></td>
<td width="74" >密码框</td>
<td width="260" ><input type="password"/></td>
</tr>
<tr>
<td height="24" >单选按钮</td>
<td> <input type="radio" /> <input type="radio" /></td>
<td>复选框</td>
<td> <input type="checkbox" /> <input type="checkbox" /></td>
</tr>
<tr>
<td height="36">图像</td>
<td> <input type="image" /></td>
<td>文件域</td>
<td> <input type="file" /></td>
</tr>
<tr>
<td height="23">隐藏域</td>
<td> <input type="hidden" />（不可见）</td>
<td>下拉列表</td>
<td>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
</td>
</tr>
<tr>
<td height="25">提交按钮</td>
<td> <input type="submit" /></td>
<td>重置按钮</td>
<td> <input type="reset" /></td>
</tr>
<tr>
<td valign="top">文本区域：</td>
<td colspan="3"><textarea cols="70" rows="3"></textarea></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$(":text").attr("value","文本框");
$(":password").attr("value","密码框");
$(":radio:eq(0)").attr("checked","true");
$(":checkbox").attr("checked","true");
$(":image").attr("src","IOC.IOC");
$(":file").css("width","200px");
$(":hidden").attr("value","已保存的值");
$("select").css("background","#FCF");
$(":submit").attr("id","btn1");
$(":reset").attr("name","btn");
$("textarea").attr("value","文本区域");
})
</script>
</body>
</html>
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 学习笔记（二）——jQuery 选择器、jQuery事件
- jQuery 学习笔记之八 (jQuery 表单操作)
- jQuery学习笔记6：表单选择器
- jQuery学习笔记5 表单验证
- JQuery学习笔记-表单选择器
- jQuery学习笔记— jQuery对表单、表格的操作以及更多应用
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
- JQuery学习笔记-属性选择器
- jquery-mobile 学习笔记之二（表单创建）
- jquery学习笔记-购物车表单简单实现
- 菜鸟的jquery学习笔记，jquery输入框添加默认值，jquery提交表单，jquery获取字符串长度，并截取字符串
- jquery 学习笔记——选择元素
- jQuery学习笔记2——表单操作
- JQuery学习笔记之属性选择器
- jQuery学习笔记之三-----常规选择器
- jQuery学习之表单选择
- jquery.validate 学习笔记（验证form表单工具）
- JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
- “jquery于each方法和选择”学习笔记
- JQuery学习笔记-可见性选择器