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. C/C++(基础-运算符详解)

    运算符 任何表达式是有值的 int a = 2; int b = 3; a*=b+4;//a=a*(b+4);"*"*=的优先级层次和=号的层次一样. printf("% ...

  2. Kali linux查看局域网内其他用户的输入信息

    使用nmap 工具在局域网里进行侦探,查看局域网里ip存活数量 root@kali:~# nmap -sP 192.168.1.0/24 Starting Nmap 7.60 ( https://nm ...

  3. OA项目笔记

    一.创建项目构架 1.创建一个Maven的web工程 1.1修改编译器版本 <properties> <project.build.sourceEncoding>UTF-8&l ...

  4. 【Uva 10641】 Barisal Stadium

    [Link]: [Description] 输入一个凸n(3≤n≤30)边形体育馆和多边形外的m(1≤m≤1000)个点光源,每个点光 源都有一个费用值.选择一组点光源,照亮整个多边形,使得费用值总和 ...

  5. codecombat之边远地区的森林12-22关及地牢39关代码分享

    codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  6. 安卓手机上安装 谷歌 play 商店

    安卓手机上安装 谷歌 play 商店 安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...

  7. 11.使用 package.json

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html package.json 位于模块的目录下,用于定义包的属性.接下来让我们来 ...

  8. 利用js 获取本日 本周 本月时间代码

    function showToDay() { var Nowdate=new Date(); M=Number(Nowdate.getMonth())+1 alert(Nowdate.getMonth ...

  9. 轻松学习Linux之详解系统引导过程

    轻松学习Linux之详解系统引导过程-1 轻松学习Linux之详解系统引导过程-2 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  10. Angularjs：实现全选

    html: <div class="input-group"> <span class="input-group-addon" style=& ...