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. Sco Unixware 7.1.3企业版服务器安装视频教程

    Sco Unixware 7.1.3企业版服务器安装视频教程 UnixWare 7.1.3是最先进的工业标准Intel和AMD处理器系统运行平台.UnixWare 7.1.3是关键业务解决方案的可靠基 ...

  2. sessionStorage的使用方法

    本篇是关于sessionStorage的使用方法的介绍,简单几行代码,实现sessionStorage,请大家查阅 (1)在需要设置sessionStorage的页面写如下代码可以存入sessionS ...

  3. qrcode length overflow 生成二维码网址长度溢出解决办法

    QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canva ...

  4. excel的隔行插入

    https://wenda.so.com/q/1523455238213064 #公式 IF(ISODD(ROW()),OFFSET($B$1,INT((ROW(A1)-1)/2),),OFFSET( ...

  5. 一个简易版的Angular js 三层 示例

    var myApp = angular.module('produceline', []); myApp.factory('ajax', ["$http", "$q&qu ...

  6. linux下uboot kernel操作cpu寄存器

    大多数的内核里面都有会对GPIO的操作,而且内核里面对GPIO进行配置也很方便,要什么功能就配置成什么就可以了. 还有一些寄存器是内核没有配置到的,但是我们要操作怎么办,内核里面也定义了相关的接口函数 ...

  7. Android之Socket的基于UDP传输

    接收方创建步骤: 1.  创建一个DatagramSocket对象,并指定监听的端口号 DatagramSocket socket = new  DatagramSocket (4567); 2. 创 ...

  8. Java 批量修改文件后缀

    import java.io.*; public class test { public void reName(String path, String from, String to) { File ...

  9. scrapy爬取知乎某个问题下的所有图片

    前言: 1.仅仅是想下载图片,别人上传的图片也是没有版权的,下载来可以自己欣赏做手机背景但不商用 2.由于爬虫周期的问题,这个代码写于2019.02.13 1.关于知乎爬虫 网上能访问到的理论上都能爬 ...

  10. uva 1456(dp)

    题意:有n个数字u1,u2,u3-un,每一个数字出现的概率pi = ui/(u1 + u2 + - + un),分成w组.计算期望值. 第一组例子的五个数字例如以下 30 5 10 30 25 分成 ...