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
js进阶 12-5 jquery中表单事件如何使用相关推荐
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- Jquery中表单序列化提交到后台是怎样进行URL解码查看参数
场景 前端提交表单时提交的data数据为form表单序列化后的数据. 数据已经经过编码无法查看数据的准确性. 比如: var data = $(this).serialize();console.lo ...
- JavaScript 、if else语句判断 、jQurey表单事件
开发工具与关键技术:VS 作者:黄金燕 年级: 1804 撰写时间: 2019年4月6日 一．JS里面的 String 字符串对象 在之前的学习中已经使用字符串对象了,定义字符串的方法就是直接赋值.比 ...
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...
最新文章
- python_day6.2
- Period_JAVA
- 用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
- request_threaded_irq()
- 【华为云技术分享】ARM体系结构基础(1)
- oracle 交叉链接,Oracle里的交叉SQL语句写法-数据库专栏,ORACLE
- 18-elasticsearch集群健康为黄色
- hadoop配置HA详细教程
- MSXML应用总结 开发篇（上）
- docker curl: (56) Recv failure: Connection reset by peer问题解决方法
- 时间管理经典书籍-《番茄工作法图解》
- linux设置软件的路径,linux下查看和设置软件的安装路径
- gg修改器修改数值没有用怎么办_gg修改器怎么用怎么修改数值 修改数值方法介绍...
- 【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
- bbs.php ww1.dzxa.me_bbs论坛小结
- 轨道看盘系统 通达信选股公式 看盘指标详解主图/副图
- 基于Mysql 的SQL应用---2021（ZSD版）
- TestNG-分组groups
- 兴趣探测的模型化探索
- 17252230140 王佳仪
热门文章
- 循环数组对象 php,PHP循环遍历stdClass对象的数组
- 输入参数的数目不足_sklearn.decomposition.PCA 参数速查手册
- 有温度传感器的风机控制系统C语言,毕业论文--基于单片机的工业风机控制器设计与实现.doc...
- 金融项目app服务器配置,云在金融的应用
- 后面的参数_英特尔I系列CPU大家都知道，后面的参数你有没有了解过
- c mysql二进制,MySQL运用connector C/C+读取二进制字段
- php8更新,PHP 8 中新特性以及重大调整
- visual studio 2019 未能在命名空间“System.IO.Ports”中找到类型名“SerialPort”
- 160 - 26 Colormaster
- sql 算出下级销售总和_找出总和字符串