jQuery教程10-表单元素选择器

无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素。

表单选择器的具体方法描述:
这里写图片描述

注意:

  • 除了input筛选选择器,几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如:
   $(':password') == $('[type=password]');

代码示例:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>子元素筛选选择器</title><style> input{display: block;margin: 10px;padding:10px;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><h2>子元素筛选选择器</h2><h3>input、text、password、radio、checkbox</h3><h3>submit、image、reset、button、file</h3><div class="left first-div"><form><input type="text" value="text类型"/><input type="password" value="password"/><input type="radio"/> <input type="checkbox"/><input type="submit" /><input type="image" /><input type="reset" /><input type="button" value="Button" /><input type="file" /></form></div><script type="text/javascript">//查找所有 input, textarea, select 和 button 元素//:input 选择器基本上选择所有表单控件$(':input').css("border", "1px groove red"); </script><script type="text/javascript">//匹配所有input元素中类型为text的input元素$('input:text').css("background", "#A2CD5A");</script><script type="text/javascript">//匹配所有input元素中类型为password的input元素$('input:password').css("background", "yellow");</script><script type="text/javascript">//匹配所有input元素中的单选按钮,并选中$('input:radio').attr('checked','true');</script><script type="text/javascript">//匹配所有input元素中的复选按钮,并选中$('input:checkbox').attr('checked','true'); </script><script type="text/javascript">//匹配所有input元素中的提交的按钮,修改背景颜色$('input:submit').css("background", "#C6E2FF");</script><script type="text/javascript">//匹配所有input元素中的图像类型的元素,修改背景颜色$('input:image').css("background", "#F4A460");</script><script type="text/javascript">//匹配所有input元素中类型为按钮的元素$('input:button').css("background", "red");</script><script type="text/javascript">//匹配所有input元素中类型为file的元素$('input:file').css("background", "#CD1076");</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在windows系统和linux系统中查询IP地址命令的不同

在linux和windows系统上查询IP地址的命令是不一样的。 在linux中的命令行模式下&#xff0c;输入ifconfig即可查询到IP。而在windows系统下要查询IP地址需要先打开dos命令行&#xff0c;然后输入ipconfig。回车即可。 注意&#xff0c;两个命令时不一样的&am…

JavaScript实现复选框的全选/全不选和批量选择

实现数据的批量选择以及全选/全部选功能的效果如下所示&#xff1a; 代码如下&#xff1a; <a class"btn btn-default" id"search_like" style"margin-right: 5px;">搜索</a> <a class"btn btn-success" id"s…

Python魔术世界 1 如何使用Visual Studio在WIN10中一键安装Python3入门编程环境并测试Django...

本文通过VS安装Python和Django的环境&#xff0c;创建了一个Web程序&#xff0c;前后5分钟的操作&#xff0c;让你快速入门Python的编程世界&#xff0c;各种Python和Django的概念会在实战中给你娓娓道来。 Django其实就是使用Python写的网站生成器半成品网站。其提供了一些非常…

win10 无法连接路由器共享设备 报错0X80004005

用路由器挂了个硬盘&#xff0c;win10无法用文件夹访问&#xff0c;试了各种方法都没用&#xff0c;后来才发现是windows的‘SMB 1.0/CIFS 文件共享支持’未开启&#xff0c;启用后重启电脑就可以了。 具体步骤&#xff1a; 控制面板 - 程序和功能 - 启用或关闭Windows功能 打勾…

PhpWord的autoload.php文件及目录的生成方式

在github上下载的压缩版PhpWord类库&#xff0c;bootstrap需要用到wendor下的autoload.php&#xff0c;但发现目录里面没有该文件。百度一下&#xff0c;发现需要通过composer进行生成该目录及文件。 1、安装composer 我是在windows系统下办公的&#xff0c;所以直接下载comp…

新版的sublime text 3无法设为默认启动程序

安装上新版的sublime text 3之后&#xff0c;打算设为.html .css .js等文件的默认启动程序&#xff0c;却发现无法设置成功&#xff0c;于是百度上搜索了一下&#xff0c;发现很多都是去注册表修改配置。却始终不能如愿。 有的解决方法是&#xff1a;删除 HKEY_CURRENT…

关于ajax请求后台获取下拉列表用的数据

一、效果展示 有时候需要在页面请求后台获取数据&#xff1a;这里就用到了ajax去后台获取数据&#xff1a; 数据库的数据是这样的&#xff1a; mysql> select * from ocenter_travel_class_info where pid 0; -------------------------------------- | id | pid | c…

jSignature网页手写签名

一、效果图 注意&#xff1a;1、CSS样式自己调&#xff0c;这里写的很简陋。      2、单击下载&#xff0c;并不是下载图片&#xff0c;而是保存到后台。      3、注意js的引用。 二、前端 <!DOCTYPE html> <html lang"zh-CN"> <head>…

postman上传图片时已经添加cookie,但仍显示未登陆

postman上传图片时&#xff0c;已经添加过cookie&#xff0c;但是返回的结果是用户未登陆&#xff0c;如下图所示&#xff1a; 我的解决办法是&#xff1a;清楚cookie code中的cookie 最终的结果如下&#xff1a;成功 转载于:https://www.cnblogs.com/1510152012huang/p/102825…

关于Oracle数据库导入数据显示中文乱码

一、遇到的问题 问题一&#xff1a;某xxxx.sql文件&#xff0c;里面都是insert语句&#xff0c;并且文本编辑器打开文件查看&#xff0c;里面待插入的中文数据显示正常&#xff0c;但是通过命令行&#xff0c;使用“xxxx.sql”导入数据库后&#xff0c;发现数据库中的中文数据都…

MySQL日期与时间函数

MySQL日期与时间函数 MySQL服务器中的三种时区设置&#xff1a;   ①系统时区—保存在系统变量system_time_zone   ②服务器时区—保存在全局系统变量global.time_zone   ③每个客户端连接的时区—保存在会话变量session.time_zone 注意&#xff1a;   客户端时区…

Docker:单机编排工具docker-compose [十二]

一、docker-compose的安装 1、安装 curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum install -y python2-pip pip install -i https://pypi.tuna.tsinghua.edu.cn/simple docker-compose2、检查是否安装成功 docker-compose -v 二、docke…

HTML DOM文档对象查找元素的方法

一、HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点。所有的HTML元素都是元素节点。所有 HTML 属性都是属性节点。文本插入到 HTML 元素是文本节点。注释是注释节点。 二、Document 对象 当浏览器载入 HTML 文档, 它就会…

快速排序(C语言)

快速排序 快速排序是一种不稳定排序&#xff0c;它的时间复杂度为O(nlgn)&#xff0c;最坏情况为O(n2)&#xff1b;空间复杂度为O(nlgn)。 这种排序方式是对于冒泡排序的一种改进&#xff0c;它采用分治模式&#xff0c;将一趟排序的数据分割成独立的两部分&#xff0c;其中一…

Apache配置多个监听端口和访问网站的方法

一个apache服务器的vhost.conf配置文件可以设置Apache监听多个端口&#xff0c;打开Apache的配置文件httpd.conf&#xff0c;在 Listen 80 下面添加多个监听端口如&#xff1a; Listen 8010 Listen 8020 Listen 8030 这样就在vhosts.conf配置文件中增加了8010、8020和8030端…

图的邻接矩阵(C语言)

邻接矩阵 无向图和有向图在邻接矩阵中的表示方法&#xff1a; 无向图和有向图大同小异&#xff0c;在这里只以无向图为例&#xff0c;代码部分通过简单调整即可对应编译有向图 邻接矩阵数据类型定义 #define MaxVertices 100 //定义最大容量 typedef struct{ //包含权的邻…

MySQL安装成功后dos命令行设置密码

我在windows7上安装好MySQL数据库后&#xff0c;添加了MySQL的安装目录D:\wamp\MySQL\bin;到环境变量中&#xff0c;这样就可以在任何目录下使用mysql。为了安全性考虑&#xff0c;需要设置MySQL数据库的密码。通过dos命令行设置的方式如下&#xff1a; 一、进入dos命令行 按…

图的邻接表表示法(C语言)

邻接表 邻接表数据结构类型如下&#xff1a; #define MaxVertices 100 typedef struct node{ //边表 int adjvex;node* next; }EdgeNode; typedef struct{ //顶点表 int vertex; EdgeNode* edgenext; }VertexNode; typedef VertexNode AdjList[MaxVertices];//…

最小生成树构造算法--Prim算法,Kruskal算法(C语言)

最小生成树 最小生成树&#xff08;minimum spanning tree&#xff09;是由n个顶点&#xff0c;n-1条边&#xff0c;将一个连通图连接起来&#xff0c;且使权值最小的结构。 最小生成树可以用Prim&#xff08;普里姆&#xff09;算法或kruskal&#xff08;克鲁斯卡尔&#xff…

屏蔽烦人的百度搜索热点

开发时&#xff0c;在百度上搜索一些资料时&#xff0c;总是不经意看到百度搜索热点的一些新闻&#xff0c;然后经不住诱惑的标题就不经意间点了进去&#xff0c;然后就是连锁反应了。。等再次回到开发时已经是半小时之后的事了。又要把想要的东西重新捋一遍&#xff0c;导致开…