宁乡电商网站建设报价,个人如何优化网站有哪些方法,淘宝建设网站的理由,搜狗站长平台js进阶 12-5 jquery中表单事件如何使用 一、总结 一句话总结#xff1a;表单事件如何使用#xff1a;可元素添加事件监听#xff0c;然后监听元素#xff0c;和javase里面一样。 1、表单获取焦点和失去焦点事件有哪两组#xff1f; 注意是blur/focus和focus in/out#x… 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表单事件有哪些 焦点*4change/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、代码 1 !DOCTYPE html2 html langen3 style4 /style5 head6 meta charsetUTF-87 title演示文档/title8 script typetext/javascript srcjquery-3.1.1.min.js/script9 style typetext/css
10 p{width: 40%};
11 /style
12 /style
13 /head
14 body
15 h3键盘事件-表单事件/h3
16 div
17 form action# idmyform
18 p姓名input typetext iduser/p
19 p密码input typepassword idpassw/p
20 p建议textarea name idtarea cols30 rows10/textarea
21 brtextarea中已经输入了span idnum0/span个字符
22 /p
23 p
24 select idsel
25 option valueAAA/option
26 option valueBBB/option
27 option valueCCC/option
28 /selectbr
29 /p
30 p附件input typefile idfil/p
31 input typesubmit value提交
32 /form
33 /div
34 script typetext/javascript
35 $(function(){
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 // })
43
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 })
56 $(textarea).change(function(){
57 var str$(this).val()
58 $(#num).text(str.length)
59 })
60 $(textarea).select(function(){
61 alert(文本被选中)
62 })
63 $(form).submit(function(){
64 alert(确定要提交吗)
65 })
66
67 })
68 /script
69 /body
70 /html 转载于:https://www.cnblogs.com/Renyi-Fan/p/9267877.html
