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,一经查实,立即删除!

相关文章

【python】BytesIO与串化

一共有以下几个概念 1、类文件&#xff1a; File(path), open(path), BytesIO(), ... 文件读之前要seek(0) 2、字符串&#xff1a; file.read() 3、对象: dict, pdfObject, 相互转换&#xff1a; 对象到文件&#xff1a; cPickle.dump(object, f) 文件到字符串&#xff1a;f.s…

PHP出现 Notice: Undefined index:...的原因及解决办法

<?php$user$_GET[username]; echo $user; ?> 直接运行改php脚本的话会出现” Notice: Undefined index: username in D:wamp\test\test.php on line 2”的警告,但这是PHP 的提示而非报错&#xff0c;这里我未给$user赋予值,就把它输出,所以报错了。PHP 本身不需要事…

iOS中 openGL常用函数记录(部分)

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 注&#xff1a;这行代码是用于清楚屏幕。GL_DEPTH_BUFFER_BIT 清除深度缓冲 glVertexPointer(3, GL_FLOAT, 0, triangleVertices); 注&#xff1a;此函数告诉OpenGL的情况下我们的数据是什么格式&#xff0c;它是有4个参数…

F5刷新表单页不能清空缓存

当我F5刷新表单页时&#xff0c;无法清空input框中的值。那是因为多数浏览器默认会缓存input的值&#xff0c;只能通过CtrlF5进行强制刷新餐能清空缓存记录。那有没有办法直接通过按F5进行清空呢&#xff1f;办法是有的。 不让浏览器缓存input的值的2种方法&#xff1a; 方法…

web开发:清浮动

一、display总结 二、overflow 三、浮动布局 四、清浮动 五、清浮动的方式 一、display总结 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>display总结</title><style type"text/css">/*1.同行显…

通过jQuery给select元素的option标签添加自定义属性

有时候需要个option标签传递多个值&#xff0c;仅仅依靠value属性是不够的&#xff0c;因此通过给select元素的option添加新的元素&#xff0c;来获取多个值。 <select name"city" id"city_id" onchange "setAct(this)"><option valu…

区块链到底是什么?和普通人有什么关系?

区块链到底是什么&#xff1f;和普通人有什么关系&#xff1f; 简单讲&#xff0c;区块链就是一个去中心化的信任机制。本问答主要针对想了解区块链&#xff0c;无专业技术和金融背景的普通人。会尽量回避一切技术术语。 问&#xff1a;什么是区块链&#xff1f; 答&#xff1a…

在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…

ambari搭建注意事项

环境准备 当需要将一台主机加入到 Ambari 管理的Hadoop集群时&#xff0c;需要对主机进行以下相关设置。 设置hostname并分发hosts文件 每台机器都需要设置唯一的hostname。集群内所有机器的IP和hostname对应关系应全部写入每台机器的hosts文件中。 设置系统语言 Ambari管理下的…

php利用mkdir()创建多级目录

先介绍一下 mkdir() 这个函数&#xff1a; mkdir($path,0777,true); 第一个参数&#xff1a;必须&#xff0c;代表要创建的多级目录的路径&#xff1b; 第二个参数&#xff1a;设定目录的权限&#xff0c;默认是 0777&#xff0c;意味着最大可能的访问权&#xff1b; 第三个…

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

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

关于IE浏览器不支持jQuery-ajax传值的问题

在jQuery中ajax的格式如下所示&#xff1a; <!DOCTYPE HTML> <html> <head><script src"http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script type"text/javascript">$(function(){//按钮单击时执行…

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…

django的基本操作流程

pip install django cd Desktop/课上代码02/ #进入到创建项目的目录 django-admin startproject 项目的名称 #创建项目 __init__.py 声明这是一个包 settings.py 项目的配置文件 urls.py 项目中url的路由 wsgi.py 部署的时候wsgi服务器的配置文件 manage.py管理django的项…

MySQL_日期时间处理函数及应用

一、YEAR()、MONTH()、HOUR() 1、 语法 YEAR(DATE)   返回日期的年份。 MONTH(DATE)   返回日期的月份 DAY(DATE)   返回日期的日 HOUR(time)   返回时间的小时。 对于一天时间值&#xff0c;返回值的范围是0到23。 但是&#xff0c;TIME值的范围实际上要大得…

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

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

iOS - 抖音效果

抖音的转场动画—iOS https://www.jianshu.com/p/29b0165de712 抖音的上下滑实现—iOS https://www.jianshu.com/p/e8799510c7aa转载于:https://www.cnblogs.com/qingzZ/p/10281740.html