第一百六十八节,jQuery,表单选择器
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,表单选择器的更多相关文章
- 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...
- jquery表单选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器
1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...
- 第一百六十节,封装库--JavaScript,ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- 第一百六十五节,jQuery,过滤选择器
jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...
- 第一百六十九节,jQuery,基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- 第一百六十四节,jQuery,常规选择器
jQuery,常规选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名. ...
- 第一百二十二节,JavaScript表单处理
JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...
随机推荐
- What is Continuous Integration?
什么叫持续集成? 原文: https://docs.microsoft.com/en-us/azure/devops/what-is-continuous-integration ---------- ...
- win7安装centos7双系统
采用硬盘安装 前景 打算用U盘安装,但是u盘是FAT32格式限制了文件4g大小,我官网下的iso镜像大于4g,只好采用硬盘安装. 其实U盘安装是最方便的,网上很多教程用UltraISO软件把U盘直接作 ...
- JAVA学习笔记 -- 多线程之共享资源
在多线程程序执行过程中,可能会涉及到两个或者多个线程试图同一时候訪问同一个资源.为了防止这样的情况的发生,必须在线程使用共享资源时给资源"上锁",以阻挡其他线程的訪问. 而这样的机 ...
- JAVA加解密 -- 数字签名算法
数字签名 – 带有密钥的消息摘要算法 作用:验证数据完整性.认证数据来源.抗否认(OSI参考模型) 私钥签名,公钥验证 RSA 包含非对称算法和数字签名算法 实现代码: //1.初始化密钥 KeyPa ...
- Tomcat:IOException while loading persisted sessions: java.io.EOFException 解决
转自:http://www.blogjava.net/apple0668/archive/2007/10/12/152383.html Tomcat启动时如下错误: 严重: IOException w ...
- linux下confstr与uname函数_获取C库与内核信息
#include <stdio.h> #include <sys/utsname.h> //uname int main(int argc, char **argv[]) { ...
- spring--百度百科
Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development a ...
- iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下:http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该怎 ...
- iOS-仿支付宝加载web网页添加进度条
代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...
- Pushlet后台推送
1.Pushlet 是一个开源的 Comet 框架,Pushlet 使用了观察者模型:客户端发送请求,订阅感兴趣的事件:服务器端为每个客户端分配一个会话 ID 作为标记,事件源会把新产生的事件以多播的 ...