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、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文檔</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10     p{width: 40%};
11   </style>
12 </style>
13 </head>
14 <body>
15 <h3>鍵盤事件-表單事件</h3>
16 <div>
17     <form action="#" id="myform">
18         <p>姓名：<input type="text" id="user"></p>
19         <p>密碼：<input type="password" id="passw"></p>
20         <p>建議：<textarea name="" id="tarea" cols="30" rows="10"></textarea>
21         <br>textarea中已經輸入了<span id="num">0</span>個字符
22         </p>
23         <p>
24             <select id="sel">
25                 <option value="">AAA</option>
26                 <option value="">BBB</option>
27                 <option value="">CCC</option>
28             </select><br>
29         </p>
30         <p>附件：<input type="file" id="fil"></p>
31         <input type="submit" value="提交">
32     </form>
33 </div>
34 <script type="text/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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/389237.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/389237.shtml
英文地址，請注明出處：http://en.pswp.cn/news/389237.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！