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. HDU 4193

    本题思路:用sum[]数组维护前缀和, 当然这里需要把原数组扩大为原来的两倍. 然后对于任意一个长度为n的区间 k.....k+n-1,如果有该区间内的最小值大于等于sum[k-1]那么该种情况就符合 ...

  2. day20 BBS前奏

    Django的ORM操作 1.FK 2.M2M 3.O2O 4.CURD 5.aggregate聚合 6.F 7.Q FORM表单 Django form model form views介绍 adm ...

  3. 【NS2】How to remove Cygwin completely from Windows

    How to remove Cygwin completely from Windows 9th September 2012. 31243 views. Software Remember need ...

  4. JPA中id前面有空格导致的"Column 'id' not found"问题

    问题背景 昨晚有个同事发生了一个神奇的问题,一如既往的问题,一如既然的用我写的BEJSON-JAVA代码生成器生成,却发现一直提示Column 'id' not found.这就很TM神奇了 2018 ...

  5. part12.5-定时器去抖

  6. SDUT-2449_数据结构实验之栈与队列十:走迷宫

    数据结构实验之栈与队列十:走迷宫 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 一个由n * m 个格子组成的迷宫,起 ...

  7. Vue电商后台管理系统项目第1天-基本环境搭建&登录功能

    基本环境搭建完成 安装npm包:npm -S i vue vue-router axios element-ui 配置Eslint: 打开设置,搜索Eslint拓展,然后将下面代码覆盖进去即可 { , ...

  8. linux centos 一键安装环境

    phpStudy for Linux 支持Apache/Nginx/Tengine/Lighttpd, 支持php5.2/5.3/5.4/5.5切换 已经在centos-6.5,debian-7.4. ...

  9. BigData NoSQL —— ApsaraDB HBase数据存储与分析平台概览

    一.引言 时间到了2019年,数据库也发展到了一个新的拐点,有三个明显的趋势: 越来越多的数据库会做云原生(CloudNative),会不断利用新的硬件及云本身的优势打造CloudNative数据库, ...

  10. JS高级第1天

    阶段目标 主要学习 JS 的面向对象编程思想. 对象 概念 在编程领域,任何 事 和 物都可以概括成对象. 对象概念练习 用编程思想抽象出你心仪对象的属性和方法. 对象由属性和方法组成,属性和方法都可 ...