JQ表单选择器和CSS3表单选择器
JQ表单选择器和CSS3表单选择器
JQ表单选择器
为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素。表单选择器的介绍如图:

我们要着重强调的是:input, :submit, :reset, :button, :hidden选择器。因为有一些细节需要我们特别注意(并不能顾名思义)。
测试HTML代码:
<input type="text" name="text" value="">
<input type="radio" name="radio" value="">
<input type="checkbox" name="checkbox" value="">
<input type="hidden" name="hidden" value="">
<input type="text" name="textHidden" hidden>
<input type="text" name="textVisility" style="visibility: hidden">
<input type="text" name="textDisplay" style="display: none">
<input type="submit" name="submit" value="submit">
<input type="button" name="button" value="button">
<input type="reset" name="reset" value="reset">
<button type="button">buttonBtn</button>
<textarea>textarea</textarea>
<select name="section">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
19 <button type="submit">submitBtn</button>
20 <button type="reset">resetBtn</button>
首先是:input 选择器选取所有的<input>, <textarea>, <select>, <button>元素。JQ代码:
$(':input').css('border', '1px solid red'); 测试效果如图:

结果: 所有的<input>, <textarea>, <select>, <button>元素都被添加边框。
接着测试:submit选择器, JQ代码: $(':submit').css('border', '1px solid red'); 测试效果如图:

结果: 不管是<input>,还是<button>元素,type值等于"submit",就会被添加边框。
接着测试:reset选择器, JQ代码: $(':reset').css('border', '1px solid red'); 测试效果图:

结果: 不管是<input>,还是<button>元素,type值等于"reset",就会被添加边框。
接着测试:button选择器, JQ代码: $(':button').css('backgroundColor', 'orange'); 测试效果图:

结果: 我们发现只有<button>元素以及是<input>且type值等于"button"的元素才被添加背景色为橙色。
最后测试的是:hidden 选择器, JQ代码: $(':hidden').css('backgroundColor' 'green'); 测试效果图:

结果: 只有<input>且type值是"hidden", 具有HTML5属性 hidden的, display: none的元素才会被添加背景色为绿色,注意visibility: hidden的元素并不会被设置背景色。JQ有一个:visible选择器,可以扩展下。地址
CSS3表单选择器
CSS3新增的表单选择器有三个 :enabled 选择每个启用的 <input> 元素。, :disabled 选择每个禁用的 <input> 元素, :checked 选择每个被选中的<input> 元素。特别注意:这三个表单选择器只针对<input>元素,而且:checked选择器只有欧朋浏览器支持。具体的移步W3C底部。
JQ表单选择器和CSS3表单选择器的更多相关文章
- jQ not()选择器 与 css3 :not( selector )选择器
1.jQ not() 2.css3 not w3c在线演示地址 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...
- 8款最新CSS3表单 环形表单很酷
当我们在网站上注册登录还是提交评论,都需要用到表单,今天我们来分享8款最新CSS3表单,有几个效果很酷很特别,有些也非常实用,一起来看看. 1.CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单 ...
- 精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...
- JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
- 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件
模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...
- 10款精美的HTML5表单登录联系和搜索表单
1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...
- js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...
- html 表单 dom 注意跟表单的name值一致
html 表单 dom 注意跟表单的name值一致 <script type="text/javascript"> function checkForm() { var ...
随机推荐
- Effective Modern C++:06lambda表达式
lambda表达式实际上是语法糖,任何lambda表达式能做到的,手动都能做到,无非是多打几个字.但是lambda作为一种创建函数对象的手段,实在太过方便,自从有了lambda表达式,使用复杂谓词来调 ...
- 如何在云上使用confd+ACM管理敏感数据
在前面的一些文章中,我们介绍了如何在云上安全的存放配置数据,但是上面的方法都是有代码侵入性的,也就是说需要修改应用程序,本文会讲解如何使用 confd+ACM 在不修改代码的情况下动态修改应用所需的配 ...
- USACO93网络流入门Drainage Ditches 排水渠(DCOJ 5130)
题目描述 (传送门:http://poj.org/problem?id=1273翻译 by sxy(AFO的蒟蒻)) 每次约翰的农场下雨,Bessie的水池里的四叶草就会被弄破.这就意味着,这些四叶草 ...
- bzoj4033 树上染色
Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并 将其他的N-K个点染成白色.将所有点染色后,你会获得黑点两两之间的距 ...
- Linux 下的python操作redis
python操作redis Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).se ...
- css的两栏布局
经典的实现左边固定宽度,右边宽度自适应的几种方法 利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; ...
- UVa-10986_Sending email (向前星+Dijkstra)
题意:给你点.边,求起点到终点的最短距离. 题解:由于题目的数据量特别大,所以需要用邻接表来存边,之后对Dijkstra算法稍微魔改一下就可以了,本来以为会超时,做好了打堆优化的准备,结果卡时间过了, ...
- mysql数据库之工作流程
MySQL架构总共四层,在上图中以虚线作为划分. 首先,最上层的服务并不是MySQL独有的,大多数给予网络的客户端/服务器的工具或者服务都有类似的架构.比如:连接处理.授权认证.安全等. 第二层的架构 ...
- SVN更换新的svn链接
输入新的SVN地址即可:
- HDU-6703-array-2019CCPC选拔赛
我TM真是一个弟弟... 题意: 给出一串1-N的数字 你每次可以把某个位置的值+1000000 或者找一个值,所有a[1]...a[r]序列的数都不能等于这个值,并且这个值>w 当时比赛觉得肯 ...