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表单选择器的更多相关文章

  1. jQ not()选择器 与 css3 :not( selector )选择器

    1.jQ  not() 2.css3 not  w3c在线演示地址  http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...

  2. 8款最新CSS3表单 环形表单很酷

    当我们在网站上注册登录还是提交评论,都需要用到表单,今天我们来分享8款最新CSS3表单,有几个效果很酷很特别,有些也非常实用,一起来看看. 1.CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单 ...

  3. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  4. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  5. JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  6. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

  7. 10款精美的HTML5表单登录联系和搜索表单

    1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...

  8. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

  9. html 表单 dom 注意跟表单的name值一致

    html 表单 dom 注意跟表单的name值一致 <script type="text/javascript"> function checkForm() { var ...

随机推荐

  1. [idea]idea配置tomcat 标签: tomcatidea 2017-03-12 22:12 402人阅读 评论(19)

    我们在使用idea的时候,一定会遇到的一步,就是使用tomcat来发布我们的项目,那么,如何在idea中设置tomcat呢?下面就随小编来一起学习一下吧. 设置tomcat 打开设置界面 Run-&g ...

  2. 【JZOJ4889】【NOIP2016提高A组集训第14场11.12】最长公共回文子序列

    题目描述 YJC最近在学习字符串的有关知识.今天,他遇到了这么一个概念:最长公共回文子序列.一个序列S,如果S是回文的且分别是两个或多个已知序列的子序列,且是所有符合此条件序列中最长的,则 S 称为已 ...

  3. hdu 1728 逃离迷宫 BFS加优先队列 DFS()

    http://acm.hdu.edu.cn/showproblem.php?pid=1728 题意就是能否在规定的转弯次数内从起点走到终点.刚走时那步方向不算. 只会bfs(),但想到这题需要记录转弯 ...

  4. 阿里云OSS同城冗余存储技术解析

    一.背景 近年来,面对数字化转型带来的挑战,越来越多的企业开始将关键业务系统上云,也有更多的业务创新在云上,帮助企业实现业务增长,这些数据已经成为企业最重要的资产.资源.对于企业来说,如何确保宝贵的数 ...

  5. 17.使用android_studio开发libgdx

    以前用eclipse开发libgdx,由于每次开机都会自检一遍安卓环境,觉得慢,就把安卓项目包给关掉了,结果再打开资源目录发生了变化,导致安卓打包不了,所以决定尝试使用as开发 首先安装as,导入gd ...

  6. day10-12_线程queue(了解)

    queue队列 :使用import queue,用法与进程Queue一样 queue is especially useful in threaded programming when informa ...

  7. *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbackParameters 0x1d4442e50> setNilValueForKey]: could not set nil as the value for the key rate.'

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbac ...

  8. Xcode编译报错:< Apple Mach-O Linker Warning > clang: error: no such file or directory: 'xxxx'

    Xcode编译报错概述: clang: error: no such file or directory: 'CoreGraphics' 一般原因是链接库内容导入丢失,这种的排查下target - B ...

  9. oracle函数 TO_MULTI_BYTE(c1)

    [功能]将字符串中的半角转化为全角 [参数]c1,字符型 [返回]字符串 [示例] SQL> select to_multi_byte('高A') text from dual; test -- ...

  10. P2P需集齐四大证照

    今后做P2P需集齐四大证照 比牌照制还严 2016-09-05 11:53:24 分类:热点观察 作者:汪祖刚 8月24日,P2P网贷监管细则在千呼万唤中始出来,整个行业内外的关注热度可谓史无前例.有 ...