js进阶 12-5 jquery中表单事件如何使用

js进阶 12-5 jquery中表单事件如何使用

一、总结

一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样。

 

1、表单获取焦点和失去焦点事件有哪两组?

注意是blur/focus和focus in/out,并没有给blur加什么

  • blur() 当元素失去焦点时触发 blur 事件。

    blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的

  • focus() 当元素获得焦点时,触发 focus 事件。
  • focusin()当元素获得焦点时,触发 focusin 事件。

    focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

  • focusout()当元素失去焦点时触发 focusout 事件。

    focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

36         //具有获得焦点和失去焦点事件的元素有3个:单行文本框text;多行文本框textarea;下拉列表select;
37         // $('input').focus(function(){ 38 // $(this).css('background','#ccc') 39 // }) 40 // $('input').blur(function(){ 41 // $(this).css('background','#fff') 42 // })

 

2、tab键可以触发blur事件么?

可以

 

3、focusin/focusout和focus/blur的区别是什么?

都是鼠标获取和失去焦点事件,但是

focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

也就是说:用focusin/focusout监听表单元素的祖先,也可以input的样式情况,从而方便给祖先或者input设置样式

44         // $('p').focusin(function(){
45         // $(this).css('background','#ccc') 46 // }) 47 // $('p').focusout(function(){ 48 // $(this).css('background','#fff') 49 // }) 50  $('div').focusin(function(){ 51  $(this).css('background','#ccc') 52  }) 53  $('div').focusout(function(){ 54  $(this).css('background','#fff') 55  })

 

4、表单事件如何使用?

可元素添加事件监听,然后监听元素

给你需要监听的元素添加事件监听

37         // $('input').focus(function(){
38         // $(this).css('background','#ccc') 39 // })

 

5、focus/blur的监听对象是谁?

36         //具有获得焦点和失去焦点事件的元素有3个:单行文本框text;多行文本框textarea;下拉列表select;

 

6、focusin/focusout的监听对象是谁?

单行文本框text;多行文本框textarea;下拉列表select的父亲或者祖先

 

7、change()的监听对象是谁?

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。

56         $('textarea').change(function(){ 57 var str=$(this).val() 58  $('#num').text(str.length) 59  })

 

8、select()的监听对象是谁?

单行文本框text或多行文本框textarea的文本

60         $('textarea').select(function(){ 61  alert('文本被选中') 62  })

 

9、submit()的监听对象是谁?

form表单

63         $('form').submit(function(){ 64  alert('确定要提交吗?') 65  })

 

10、jquery中form表单事件有哪些?

焦点*4,change/select(文本框*2),表单*1

 

11、select()和selected的区别是什么?

前者是文本框字体选中事件,后者是多选择的某个选项是否被选中

 

 

二、jquery中表单事件如何使用

1、相关知识

表单事件
  • blur() 当元素失去焦点时触发 blur 事件。

    blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的

  • focus() 当元素获得焦点时,触发 focus 事件。
  • focusin()当元素获得焦点时,触发 focusin 事件。

    focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

  • focusout()当元素失去焦点时触发 focusout 事件。

    focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

  • change() 当元素的值发生改变时,会发生 change 事件。

    该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。

  • select() 当用户选中单行文本框text或多行文本框textarea的文本时,会触发select事件。
  • submit() 当提交表单时,会发生 submit 事件。

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10     p{width: 40%};
11   </style>
12 </style>
13 </head>
14 <body>
15 <h3>键盘事件-表单事件</h3>
16 <div>
17     <form action="#" id="myform">
18         <p>姓名:<input type="text" id="user"></p>
19         <p>密码:<input type="password" id="passw"></p>
20         <p>建议:<textarea name="" id="tarea" cols="30" rows="10"></textarea>
21         <br>textarea中已经输入了<span id="num">0</span>个字符
22         </p>
23         <p>
24             <select id="sel">
25                 <option value="">AAA</option>
26                 <option value="">BBB</option>
27                 <option value="">CCC</option>
28             </select><br>
29         </p>
30         <p>附件:<input type="file" id="fil"></p>
31         <input type="submit" value="提交">
32     </form>
33 </div>
34 <script type="text/javascript">
35     $(function(){
36         //具有获得焦点和失去焦点事件的元素有3个:单行文本框text;多行文本框textarea;下拉列表select;
37         // $('input').focus(function(){
38         //     $(this).css('background','#ccc')
39         // })
40         // $('input').blur(function(){
41         //     $(this).css('background','#fff')
42         // })
43 
44         // $('p').focusin(function(){
45         //     $(this).css('background','#ccc')
46         // })
47         // $('p').focusout(function(){
48         //     $(this).css('background','#fff')
49         // })
50         $('div').focusin(function(){
51             $(this).css('background','#ccc')
52         })
53         $('div').focusout(function(){
54             $(this).css('background','#fff')
55         })
56         $('textarea').change(function(){
57             var str=$(this).val()
58             $('#num').text(str.length)
59         })
60         $('textarea').select(function(){
61             alert('文本被选中')
62         })
63         $('form').submit(function(){
64             alert('确定要提交吗?')
65         })
66 
67     })
68 </script>
69 </body>
70 </html>

 

 

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9267877.html

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

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

相关文章

SiamBAN论文学习

SiameseBAN论文来源论文背景主要贡献论文分析网络框架创新点一&#xff1a;Box Adaptive Head创新点二&#xff1a;Ground-truth创新点三&#xff1a;Anchor Free论文流程训练部分&#xff1a;跟踪部分论文翻译Abstract1. Introduction2. Related Works2.1. Siamese Network Ba…

简单入门Javascript正则表达式

我们已经会熟练使用js字符串类型了&#xff0c;例如你想知道一个变量是否等于一个字符串&#xff0c;可能可能这样判断 if(ahello,world){... } 复制代码但是往往我们有时候对一些字符串判断显得力不从心&#xff0c;例如判断一个文件的类型是否为js类型&#xff0c;可能有下面…

实现klib_使用klib加速数据清理和预处理

实现klibTL;DRThe klib package provides a number of very easily applicable functions with sensible default values that can be used on virtually any DataFrame to assess data quality, gain insight, perform cleaning operations and visualizations which results …

MMDetection修改代码无效

最近在打比赛&#xff0c;使用MMDetection框架&#xff0c;但是无论是Yolo修改类别还是更改head&#xff0c;代码运行后发现运行的是修改之前的代码。。。也就是说修改代码无效。。。 问题解决办法&#xff1a; MMDetection在首次运行后会把一部分运行核心放在anaconda的环境…

docker etcd

etcd是CoreOS团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库&#xff0c;用于配置共享和服务发现 etcd内部采用raft协议作为一致性算法&#xff0c;etcd基于Go语言实现。 etcd作为服务发现系统&#xff0c;有以下的特点&…

SpringBoot简要

2019独角兽企业重金招聘Python工程师标准>>> 简化Spring应用开发的一个框架&#xff1b;      整个Spring技术栈的一个大整合&#xff1b;      J2EE开发的一站式解决方案&#xff1b;      自动配置&#xff1a;针对很多Spring应用程序常见的应用功能&…

发送邮件 的类 C# .net

/// <summary> /// 发送邮件 /// </summary> /// <param name"SendTo">发送人的地址</param> /// <param name"MyEmail">我的Email地址</param> /// <param name"SendTit…

简明易懂的c#入门指南_统计假设检验的简明指南

简明易懂的c#入门指南介绍 (Introduction) One of the main applications of frequentist statistics is the comparison of sample means and variances between one or more groups, known as statistical hypothesis testing. A statistic is a summarized/compressed proba…

计算机科学期刊_成为数据科学家的五种科学期刊

计算机科学期刊The field of data science is advancing at an incredible pace. New scientific articles are published daily. As a student, I try to stay up-to-date with the scientific literature that is published. In this blog post, I created a list of scienti…

Torch.distributed.elastic 关于 pytorch 不稳定

错误日志&#xff1a; Epoch: [229] Total time: 0:17:21 Test: [ 0/49] eta: 0:05:00 loss: 1.7994 (1.7994) acc1: 78.0822 (78.0822) acc5: 95.2055 (95.2055) time: 6.1368 data: 5.9411 max mem: 10624 WARNING:torch.distributed.elastic.agent.server.api:Rec…

0x22 迭代加深

poj2248 真是个新套路。还有套路剪枝...大到小和判重 #include<cstdio> #include<iostream> #include<cstring> #include<cstdlib> #include<algorithm> #include<cmath> #include<bitset> using namespace std;int n,D,x[110];bool…

云原生全球最大峰会之一KubeCon首登中国 Kubernetes将如何再演进?

雷锋网消息&#xff0c;11月14日&#xff0c;由CNCF发起的云原生领域全球最大的峰会之一KubeConCloudNativeCon首次登陆中国&#xff0c;中国已经成为云原生领域一股强大力量&#xff0c;并且还在不断成长。 毫无疑问&#xff0c;Kubernetes已经成为容器编排事实标准&#xff…

分布分析和分组分析_如何通过群组分析对用户进行分组并获得可行的见解

分布分析和分组分析数据分析 (DATA ANALYSIS) Being a regular at a restaurant is great.乙 eing定期在餐厅是伟大的。 When I started university, my dad told me I should find a restaurant I really liked and eat there every month with some friends. Becoming a reg…

python 工具箱_Python交易工具箱:通过指标子图增强图表

python 工具箱交易工具箱 (trading-toolbox) After a several months-long hiatus, I can finally resume posting to the Trading Toolbox Series. We started this series by learning how to plot indicators (specifically: moving averages) on the top of a price chart.…

PDA端的数据库一般采用的是sqlce数据库

PDA端的数据库一般采用的是sqlce数据库,这样与PC端的sql2000中的数据同步就变成了一个问题,如在PDA端处理,PDA端的内存,CPU等都是一个制约因素,其次他们的一个连接稳定及其间的数据传输也是一个难点.本例中通过在PC端的转化后再复制到PDA上面,这样,上面所有的问题都得到了一个有…

bzoj 1016 [JSOI2008]最小生成树计数——matrix tree(相同权值的边为阶段缩点)(码力)...

题目&#xff1a;https://www.lydsy.com/JudgeOnline/problem.php?id1016 就是缩点&#xff0c;每次相同权值的边构成的联通块求一下matrix tree。注意gauss里的编号应该是从1到...的连续的。 学习了一个TJ。用了vector。自己曾写过一个只能过样例的。都放上来吧。 路径压缩的…

区块链的模型结构

关于区块链的模型结构问题&#xff0c;行业内已经谈论千万遍了&#xff0c;基本上已经成为一种定义式的问题了。总体上来看&#xff0c;区块链的基础架构可以分为六层&#xff0c;包括数据层、网络层、共识层、激励层、合约层、应用层。每一层分别完成一项核心的功能&#xff0…

数据科学家 数据工程师_数据科学家应该对数据进行版本控制的4个理由

数据科学家 数据工程师While working in a software project it is very common and, in fact, a standard to start right away versioning code, and the benefits are already pretty obvious for the software community: it tracks every modification of the code in a p…

JDK 下载相关资料

所有版本JDK下载地址&#xff1a; http://www.oracle.com/technetwork/java/archive-139210.html 下载账户密码&#xff1a; 2696671285qq.com Oracle123 转载于:https://www.cnblogs.com/bg7c/p/9277729.html

商米

2019独角兽企业重金招聘Python工程师标准>>> 今天看了一下商米的官网&#xff0c;发现他家的东西还真的是不错。有钱了&#xff0c;想去体验一下。 如果我妹妹还有开便利店的话&#xff0c;我会推荐他用这个。小巧便捷&#xff0c;非常方便。 转载于:https://my.osc…