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. 【Educational Codeforces Round 36 B】Browser

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 分类在区间里面和左边.右边三种情况. 看看l的左边有没有标签.r的右边有没有标签. 就能做完了. [代码] #include < ...

  2. 用 OPENSSL 生成不同格式的密钥

    用 OPENSSL 生成不同格式的密钥 密钥 key 值包括 加密算法: RSA/DSA/ECC 加密位数: 1024/2048/4096 密钥口令:加密方式有很多 在使用 DSA/ECC 加密算法时 ...

  3. RelativeLayout-属性大全

    // 相对于给定ID控件 <!--将该控件的底部置于给定ID的控件之上--> android:layout_above <!--将该控件的底部置于给定ID的控件之下--> an ...

  4. Spring中提供的集合工具类util CollectionUtils

    转自:https://blog.csdn.net/fangwenzheng88/article/details/78457850 CollectionUtils类 /* * Copyright 200 ...

  5. 从“窃听门”事件解读手机Rootkit攻击

    从"窃听门"事件解读手机Rootkit攻击 在今年五月讲述了手机流氓软件危害与防治(http://chenguang.blog.51cto.com/350944/557191)文章 ...

  6. 为RecyclerView添加item的点击事件

    RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件,顺便复习一下观察者模式. ...

  7. jmeter分布式测试的坑（转）

    本文转自:https://www.cnblogs.com/lsjdddddd/p/5806077.html 有关jmeter分布式测试的环境配置,大概就是那样,但是每次想要进行jmeter分布式测试的 ...

  8. MFC ClistCtr锁定隐藏某一列

    通过设置列的宽度为0, 可以隐藏列表框的某一列,但是用户通过拖动列表框的大小,隐藏的列,可能又被显示出来了. 我们可以自己写一个CListEx继承CListCtr,然后捕获拖动的消息,对该消息进行特殊 ...

  9. Servlet 规范笔记—servlet概念及结构

     Servlet, 这个词对java程序员并不陌生,我想几乎每个java程序员在学习J2EE知识时,首先学习的就是servlet,这是一种正确的学习方式,在我看来Servlet是J2EE的基础,要熟练 ...

  10. [DP]【最大全零矩阵】【2015.7.9TEST】E

    E 0.9 seconds, 32 MB " 于是乎,你至少证明了你智商比金天成高.也就说你证明了你不是低智儿童,不错不错. 然而这次, 我貌似也卡住了,你给我打下手吧. 勇敢的少年啊快去创 ...