jQuery,表单选择器

学习要点:

  1.常规选择器

  2.表单选择器

  3.表单过滤器

表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素。

一.常规选择器

我们可以使用 id、类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name 属性,还可以结合属性选择器来精确定位。

$('input').val(); //元素名定位,默认获取第一个
$('input').eq(1).val(); //同上,获取第二个
$('input[type=password]').val(); //选择 type 为 password 的字段
$('input[name=user]').val(); //选择 name 为 user 的字段

那么对于 id 和类(class)用法比较类似,也可以结合属性选择器来精确的定位,在这里我 们不在重复。对于表单中的其他元素名比如:textarea、select 和 button 等,原理一样,不在 重复。

二.表单选择器

虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多 变的需求。所以,jQuery 为表单提供了专用的选择器。

:input 选取所有 input、textarea、select 和 button 元素 集合元素

:text 选择所有单行文本框,即 type=text 集合元素

:password 选择所有密码框,即 type=password 集合元素

:radio 选择所有单选框,即 type=radio 集合元素

:checkbox 选择所有复选框,即 type=checkbox 集合元素

:submit 选取所有提交按钮,即 type=submit 集合元素

:reset 选取所有重置按钮,即 type=reset 集合元素

:image 选取所有图像按钮,即 type=image 集合元素

:button 选择所有普通按钮,即 button 元素 集合元素

:file 选择所有文件按钮,即 type=file 集合元素

:hidden 选择所有不可见字段,即 type=hidden 集合元素

$(':input').size(); //获取所有表单字段元素
$(':text).size(); //获取单行文本框元素
$(':password').size(); //获取密码栏元素
$(':radio).size(); //获取单选框元素
$(':checkbox).size(); //获取复选框元素
$(':submit).size(); //获取提交按钮元素
$(':reset).size(); //获取重置按钮元素
$(':image).size(); //获取图片按钮元素
$(':file).size(); //获取文件按钮元素
$(':button).size(); //获取普通按钮元素
$(':hidden).size(); //获取隐藏字段元素

注意:这些选择器都是返回元素集合,如果想获取某一个指定的元素,最好结合一下属 性选择器。比如:

$(':text[name=user]).size(); //获取单行文本框 name=user 的元素

三.表单过滤器

jQuery 提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过 滤。

:enabled 选取所有可用元素 集合元素

:disabled 选取所有不可用元素 集合元素

:checked 选取所有被选中的元素,单选和复选字段 集合元素

:selected 选取所有被选中的元素,下拉列表 集合元素

$(':enabled').size(); //获取可用元素
$(':disabled).size(); //获取不可用元素
$(':checked).size(); //获取单选、复选框中被选中的元素
$(':selected).size(); //获取下拉列表中被选中的元素

第一百六十八节,jQuery,表单选择器的更多相关文章

  1. 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  2. jquery表单选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

  4. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  5. 第一百六十五节,jQuery,过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  6. 第一百六十九节,jQuery,基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  7. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  8. 第一百六十四节,jQuery,常规选择器

    jQuery,常规选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名. ...

  9. 第一百二十二节,JavaScript表单处理

    JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...

随机推荐

  1. 项目管理利器——Maven阅读目录

    阅读目录 一.Maven介绍及环境搭建 二.构建Maven版的Hello World 三.Maven常见构建命令 四.自动创建目录骨架 五.Maven中的坐标和仓库 六.在eclipse中安装Mave ...

  2. ACboy needs your help-分组背包模板题

    id=17676" target="_blank" style="color:blue; text-decoration:none">ACboy ...

  3. Yii2系列教程二:MVC,Forms和Layouts

    上一篇文章我们简单地实现了Yii2框架安装和Hello World,而在这一篇文章当中,我们会带着好奇之心去探索一下在Yii2中的几个重要的元素组成:MVC,Forms和Layouts. 本文的目标是 ...

  4. shareToQQ,qq 4.1.1 for android,闪退

    用shareToQQ函数分享图文消息,在qq 4.1.1 for android版本下打开联系人列表数秒后会闪退!在更高版本的V4.5.2.1,V4.2.1下则没有这个问题(证明各种设置没问题),各位 ...

  5. 在windows下部署laravel项目的步骤

    laravel版本:5.4 php版本:7.1以上,我用的php7.2.7 1.代码库下载laravel源码,放在你自己的运行目录下 2.配置hosts域名及 apache域名配置 3.安装compo ...

  6. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  7. 恼人的The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved...错误,无奈用Struts的bean:write替代了JSTL的C:out

    一个应用中有两个页面使用了JSTL的c:out输出,就类似这么简单三句 <c:if test="${!empty error}">       <h2>&l ...

  8. TMS320F28335项目开发记录1_CCS的使用介绍

    CCS使用介绍 一.前言 本系列文章记录本人实际项目开发时对ti的DSP28335,以及CCS开发环境等的学习与记录,相对于2812来说,28335的资料还是比較少的,只是原理是相通的,28335说白 ...

  9. C#秘密武器之泛型

    一.简介: 很多初学者在刚开始接触泛型的时候会比较难理解泛型,在这里先把 “泛型”当作一个形容词,这样就方便理解了,因为很多东西都可以是泛型的!比如:“泛型的类”,“泛型的方法”,“泛型的接口”,“泛 ...

  10. 让C#可以像Javascript一样操作Json DynamicJson

    http://blog.csdn.net/lisenyang/article/details/52535314