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. Android webview 运行时不调用系统自带浏览器

    WebView mobView = new WebView(this); mobView.loadUrl("http://www.csdn.net"); WebSettings w ...

  2. javafx DropShadow

    public class EffectTest extends Application { DropShadow shadow = new DropShadow(); public static vo ...

  3. 使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项

    首先感谢,http://www.cnblogs.com/2050/p/3913184.html 这篇文章作者. 在使用PLUpload之前个人先封装了一些常用配置,并且将success与error做为 ...

  4. 关于IDEA编译器在初次使用thymeleaf 引入无效 , 导致th无法使用的原因

    首先pom.xml里面要导入thymeleaf的依赖 然后在html中加入  xmlns:th="http://www.thymeleaf.org" 最后点击file ---> ...

  5. 【习题 8-14 UVA - 1616】Caravan Robbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分长度. 显然长度越长.就越不可能. 二分的时候.可以不用管精度. 直接指定一个二分次数的上限就好. 判断长度是否可行.直接用贪心 ...

  6. （九）unity4.6学习Ugui中文文档-------參考-UGUI Rect Transform

     大家好.我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  7. Maven中央仓库信息速查

    http://maven.outofmemory.cn/

  8. IIS特殊字符设置

    简介:[iis7]请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found 特殊字符最好替换成其他的字符,主要的特殊字符有”*”.”&”.”%”.” ...

  9. HDU4825 Xor Sum(贪心+Trie树）

    Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...

  10. Docker+Mongodb

    原文:Docker+Mongodb docker search mongodb docker run -d -p 2701:27017 -v /usr/mongodb/data:/data/db  - ...