jQuery_表单|学习笔记

简介: 快速学习 jQuery_表单

开发者学堂课程【jQuery 开发教程:jQuery_表单】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4281


jQuery_表单


1、:button Selector

描述∶选择所有按钮元素和类型为按钮的元素。

语法:jQuery( ":button")

2、:checkbox Selector

描述∶选择所有类型为复选框的元素。

语法:jQuery( ":checkbox" )

3、:checked selector

描述∶匹配所有勾选的元素。

语法:jQuery( ":checked" )

4、:disabled Selector

描述∶选择所有被禁用的元素。

语法:jQuery( ":disabled" )

5、:enabled Selector

描述∶选择所有可用的(注∶未被禁用的元素)元素。

语法:jQuery( ":enabled" )

6、:file Selector

描述∶选择所有类型为文件( file )的元素。

语法:jQuery( ":file" )

7、:focus Selector

描述∶选择当前获取焦点的元素。

语法:jQuery( ":focus”)

8、:image Selector

描述∶选择所有图像类型的元素。

语法:jQuery( ".image")

9.:input Selector

描述∶选择所有input, textarea, select和 button元素。

语法∶jQuery( ":.input" )

10、:password Selector

描述∶选择所有类型为密码的元素。

语法:jQuery( ":password" )

11、:radio Selector

描述︰选择所有类型为单选框的元素。

语法:jQuery( ":radio" )

12、:submit Selector

描述∶选择所有类型为提交的元素。

语法: jQuery( ":submit" )

 

表单有很多个,这里只列举12个,在代码中写一个例子分别演示一下:

引入jQuery:<script src="jquery-2.2.1.min.js">< /script>

之后写入一大堆标签:

<body>
<form>
<fieldset>
<input type="button" value="Input Button" / >  
<input type="checkbox" / >
<input type=""file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select><option>option</option>< / select>
<textarea></ textarea>
<button>Botton< /button>
< /fieldset>

之后写入空的<div>:

< / form>
<div> <ldiv>

执行,是一个提交的表格

设置一下<textarea></ textarea>高度,它是一个多行文本的输入框之后定义样式颜色为红色:

<style>
textarea{
height: 35px;
}
div{
color: red;}

加入< /fieldset>标签样式,内外边距为零:

fieldset{
margin: 0;
padding: 0;
border-width: 0;}

然后添加一个类并调整样式:

.marked{
background-color: yellow;
border: 3px solid red;}

准备工作完成后,查找出所有按钮并标记出来:

<script>
$ ( function(){
var input=$ ( ": button" ).addClass ( "marked");}

执行,表格里所有的 button 都已经被标记,效果如下:

图片1.png

这就是第1个选择器。

第8个选择所有图像类型的元素:

将 button 换成 input:image,执行效果如下:

图片2.png

第9个选择所有input, textarea, select和 button元素:

将 input:image 换成:input,执行效果如下:

图片4.png

第4个选择所有被禁用的元素:

写入:<form>
<input name="email" disabled="disabled" />
<input name="id"/>
< / form>
查找所有被禁用的 input 元素:
$ ( function()i
$ ( "input: disabled" ).val( "haha" );

执行,第一个被禁用的 disabled 上被添加了内容:haha,执行结果如下:

图片5.png

相关文章
|
1月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
50 0
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
58 13
|
3月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
175 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
39 0
|
6月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
46 4
jQuery会员中心安全修改表单特效
|
6月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
39 0
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
48 0
|
6月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
76 0
|
6月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
56 0