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、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

     p{width: 40%};

   </style>

 </style>

 </head>

 <body>

 <h3>键盘事件-表单事件</h3>

 <div>

     <form action="#" id="myform">

         <p>姓名：<input type="text" id="user"></p>

         <p>密码：<input type="password" id="passw"></p>

         <p>建议：<textarea name="" id="tarea" cols="30" rows="10"></textarea>

         <br>textarea中已经输入了<span id="num">0</span>个字符

         </p>

         <p>

             <select id="sel">

                 <option value="">AAA</option>

                 <option value="">BBB</option>

                 <option value="">CCC</option>

             </select><br>

         </p>

         <p>附件：<input type="file" id="fil"></p>

         <input type="submit" value="提交">

     </form>

 </div>

 <script type="text/javascript">

     $(function(){

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

         // $('input').focus(function(){

         //     $(this).css('background','#ccc')

         // })

         // $('input').blur(function(){

         //     $(this).css('background','#fff')

         // })

         // $('p').focusin(function(){

         //     $(this).css('background','#ccc')

         // })

         // $('p').focusout(function(){

         //     $(this).css('background','#fff')

         // })

         $('div').focusin(function(){

             $(this).css('background','#ccc')

         })

         $('div').focusout(function(){

             $(this).css('background','#fff')

         })

         $('textarea').change(function(){

             var str=$(this).val()

             $('#num').text(str.length)

         })

         $('textarea').select(function(){

             alert('文本被选中')

         })

         $('form').submit(function(){

             alert('确定要提交吗？')

         })

     })

 </script>

 </body>

 </html>
 

js进阶 12-5 jquery中表单事件如何使用的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  6. js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

    js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素. ...

  7. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  8. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  9. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

随机推荐

  1. Unity 3D 开发 —— 脚本编程

    Unity 相关资源 Unity 官网 :http://www.unity3D.com Unity 论坛 : http://forum.unity3d.com/forum.php Unity 问答 : ...

  2. Kinect 开发 —— 语音识别（上）

    Kinect的麦克风阵列在Kinect设备的下方.这一阵列由4个独立的水平分布在Kinect下方的麦克风组成.虽然每一个麦克风都捕获相同的音频信号,但是组成阵列可以探测到声音的来源方向.使得能够用来识 ...

  3. Kinect 开发 —— 骨骼追踪进阶（上）

    Kinect传感器核心只是发射红外线,并探测红外光反射,从而可以计算出视场范围内每一个像素的深度值.从深度数据中最先提取出来的是物体主体和形状,以及每一个像素点的游戏者索引信息.然后用这些形状信息来匹 ...

  4. 记录一个mybatis编写xml遇到的错误：java.lang.unsupportedOperationException

    写完xml里的sql在执行xml中的sql时报错,经过排查找到问题出在方法中的resultType这个属性的类型上 如图所示:只需要将sortedSet改为set集合里所存储的对象的类型即可. 这里我 ...

  5. java（面向对象 ）

    java面向对象的语言 对象:真实存在唯一的事物. 类:实际就是对某种类型事物的共性属性与行为的抽取. 面向对象的计算机语言核心思想: 找适合的对象做适合的事情. 如何找适合的对象: 1.sun已经定 ...

  6. 【Django】序列化

    Django中序列化主要应用于将数据库中检索的数据返回给客户端用户,特别是Ajax请求一般返回为Json格式. * 1.from django.core import serializers** fr ...

  7. VFS相关内容

    http://blog.csdn.net/icyfire0105/article/details/1899927 VFS是一个软件层,用来处理与Unix标准文件系统相关的所有系统调用,是用户应用程序与 ...

  8. 高速数论变换(NTT)

    今天的A题.裸的ntt,但我不会,于是白送了50分. 于是跑来学一下ntt. 题面非常easy.就懒得贴了,那不是我要说的重点. 重点是NTT,也称高速数论变换. 在非常多问题中,我们可能会遇到在模意 ...

  9. CSS3：元素的边框、背景和大小

    边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...

  10. Hadoop学习小结

    还在学校的时候,就知道Hadoop的存在了. 2012年在公司实习的时候,买了<Hadoop权威指南第2版>,大致看了下. 今年,抽空也大致喵了几眼. 最大的感悟就是:光看不做,还是不行. ...