JQiery选择器中的表单元素

无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素。
表单选择器这么方便，让我们来看一下都可以怎么使用吧：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 (′:password′)==(':password') == (‘[type=password]’)

下面我们用一个例子来进行更深一步的了解：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><style> input{display: block;margin: 10px;padding:10px;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><h2>子元素筛选选择器</h2><h3>input、text、password、radio、checkbox</h3><h3>submit、image、reset、button、file</h3><div class="left first-div"><form><input type="text" value="text类型"/><input type="password" value="password"/><input type="radio"/> <input type="checkbox"/><input type="submit" /><input type="image" /><input type="reset" /><input type="button" value="Button" /><input type="file" /></form></div><script type="text/javascript">//查找所有 input, textarea, select 和 button 元素//:input 选择器基本上选择所有表单控件$(":input").css("border", "1px groove red"); </script><script type="text/javascript">//匹配所有input元素中类型为text的input元素$("input:text").css("background", "#A2CD5A");</script><script type="text/javascript">//匹配所有input元素中类型为password的input元素$("input:password").css("background", "yellow");</script><script type="text/javascript">//匹配所有input元素中的单选按钮,并选中$("input:radio").attr('checked','true');</script><script type="text/javascript">//匹配所有input元素中的复选按钮,并选中$("input:checkbox").attr('checked','true'); </script><script type="text/javascript">//匹配所有input元素中的提交的按钮,修改背景颜色$("input:submit").css("background", "#C6E2FF");</script><script type="text/javascript">//匹配所有input元素中的图像类型的元素,修改背景颜色$("input:image").css("background", "#F4A460");</script><script type="text/javascript">//匹配所有input元素中类型为按钮的元素$("input:button").css("background", "red");</script><script type="text/javascript">//匹配所有input元素中类型为file的元素$("input:file").css("background", "#CD1076");</script></body></html>

执行结果如下：

好好练习，一句古话说的好：好记性不如烂笔头。在编程上面，好记性不如敲键盘啊！

除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选

如下表格了解：

注意：
1.选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
2.在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素。

让我们那个例子练练手吧：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><style>input {display: block;margin: 10px;padding: 10px;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><h2>子元素筛选选择器</h2><h3>enabled、disabled</h3><form><input type="text" value="未设置disabled" /><input type="text" value="设置disabled" disabled="disabled" /><input type="text" value="未设置disabled" /></form><script type="text/javascript">//查找所有input所有可用的（未被禁用的元素）input元素。$("input:enabled").css("border", "2px groove red");</script><script type="text/javascript">//查找所有input所有不可用的（被禁用的元素）input元素。$("input:disabled").css("border", "2px groove blue");</script><h3>checked、selected</h3><form><input type="checkbox" checked="checked"><input type="checkbox"><input type="radio" checked>       <input type="radio"><select name="garden" multiple="multiple"><option>imooc</option><option selected="selected">慕课网</option><option>aaron</option><option selected="selected">博客园</option></select></form><script type="text/javascript">//查找所有input所有勾选的元素(单选框,复选框)//删除这个勾选的元素$("input:checked").removeAttr('checked')</script><script type="text/javascript">//查找所有option元素中,有selected属性被选中的选项//删除这个选中的元素$("option:selected").removeAttr('selected')</script></body></html>

JQiery选择器中的表单元素相关推荐

table中加表单元素怎么验证_el-table嵌入表单元素注意事项（验证规则prop写法与数据初始化）...
场景:在el-table表格中嵌入表单元素绑定数据: table : :data="planFormData.allocationPlan" el-form-item: v-mo ...
html语言中的表单元素,HTML5中的表单元素有哪些
摘要腾兴网为您分享:HTML5中的表单元素有哪些,指南针,之了课堂,云端学习,易视云3等软件知识,以及挣钱花,猎豹浏览器本,移动彩铃,豆瓣音乐,mine,dnf雪人像素头补丁,偶像来了,许鲜网,长治 ...
table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...
html中表单元素_HTML中的表单元素
html中表单元素 1)<input>元素 (1) The <input> Element) The <input> element is used to get ...
table中加表单元素怎么验证_045、DOM编程实例和表单
1.DOM编程实例1 JavaScript this 关键词指的是它所属的对象. 它拥有不同的值,具体取决于它的使用位置: 在方法中,this 指的是所有者对象. 单独的情况下,this 指的是全局对 ...
table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题！
实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...
reac笔记_13 form表单元素中 input/defaultValue + useState/useRef
目录原生html元素 input属性示例1 示例2 react中受控组件与非受控组件属性 error - input标签value属性使用示例 - useState 示例 - input标签 ...
html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...

JQiery选择器中的表单元素

JQiery选择器中的表单元素相关推荐

最新文章

热门文章