js进阶 12-5 jquery中表单事件如何使用
js進(jìn)階 12-5 jquery中表單事件如何使用
一、總結(jié)
一句話總結(jié)：表單事件如何使用：可元素添加事件監(jiān)聽(tīng)，然后監(jiān)聽(tīng)元素，和javase里面一樣。
?
1、表單獲取焦點(diǎn)和失去焦點(diǎn)事件有哪兩組？
注意是blur/focus和focus in/out，并沒(méi)有給blur加什么
- blur() 當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) blur 事件。
blur事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，既可以是鼠標(biāo)行為，也可以是按tab鍵離開(kāi)的
- focus() 當(dāng)元素獲得焦點(diǎn)時(shí)，觸發(fā) focus 事件。
- focusin()當(dāng)元素獲得焦點(diǎn)時(shí)，觸發(fā) focusin 事件。
focusin事件跟focus事件區(qū)別在于，他可以在父元素上檢測(cè)子元素獲取焦點(diǎn)的情況。
- focusout()當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) focusout 事件。
focusout事件跟blur事件區(qū)別在于，他可以在父元素上檢測(cè)子元素失去焦點(diǎn)的情況。
?
2、tab鍵可以觸發(fā)blur事件么？
可以
?
3、focusin/focusout和focus/blur的區(qū)別是什么？
都是鼠標(biāo)獲取和失去焦點(diǎn)事件，但是
focusin事件跟focus事件區(qū)別在于，他可以在父元素上檢測(cè)子元素獲取焦點(diǎn)的情況。
focusout事件跟blur事件區(qū)別在于，他可以在父元素上檢測(cè)子元素失去焦點(diǎn)的情況。
也就是說(shuō)：用focusin/focusout監(jiān)聽(tīng)表單元素的祖先，也可以input的樣式情況，從而方便給祖先或者input設(shè)置樣式
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、表單事件如何使用？
可元素添加事件監(jiān)聽(tīng)，然后監(jiān)聽(tīng)元素
給你需要監(jiān)聽(tīng)的元素添加事件監(jiān)聽(tīng)
37 // $('input').focus(function(){ 38 // $(this).css('background','#ccc') 39 // })?
5、focus/blur的監(jiān)聽(tīng)對(duì)象是誰(shuí)？
36 //具有獲得焦點(diǎn)和失去焦點(diǎn)事件的元素有3個(gè):單行文本框text；多行文本框textarea；下拉列表select；?
6、focusin/focusout的監(jiān)聽(tīng)對(duì)象是誰(shuí)？
單行文本框text；多行文本框textarea；下拉列表select的父親或者祖先?
7、change()的監(jiān)聽(tīng)對(duì)象是誰(shuí)？
該事件僅適用于文本域（text field），以及 textarea 和 select 元素。當(dāng)用于 select 元素時(shí)，change 事件會(huì)在選擇某個(gè)選項(xiàng)時(shí)發(fā)生。
56 $('textarea').change(function(){ 57 var str=$(this).val() 58 $('#num').text(str.length) 59 })?
8、select()的監(jiān)聽(tīng)對(duì)象是誰(shuí)？
單行文本框text或多行文本框textarea的文本
60 $('textarea').select(function(){ 61 alert('文本被選中') 62 })?
9、submit()的監(jiān)聽(tīng)對(duì)象是誰(shuí)？
form表單
63 $('form').submit(function(){ 64 alert('確定要提交嗎？') 65 })?
10、jquery中form表單事件有哪些？
焦點(diǎn)*4，change/select（文本框*2），表單*1
?
11、select()和selected的區(qū)別是什么？
前者是文本框字體選中事件，后者是多選擇的某個(gè)選項(xiàng)是否被選中
?
?
二、jquery中表單事件如何使用
1、相關(guān)知識(shí)
表單事件
- blur() 當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) blur 事件。
blur事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，既可以是鼠標(biāo)行為，也可以是按tab鍵離開(kāi)的
- focus() 當(dāng)元素獲得焦點(diǎn)時(shí)，觸發(fā) focus 事件。
- focusin()當(dāng)元素獲得焦點(diǎn)時(shí)，觸發(fā) focusin 事件。
focusin事件跟focus事件區(qū)別在于，他可以在父元素上檢測(cè)子元素獲取焦點(diǎn)的情況。
- focusout()當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) focusout 事件。
focusout事件跟blur事件區(qū)別在于，他可以在父元素上檢測(cè)子元素失去焦點(diǎn)的情況。
- change() 當(dāng)元素的值發(fā)生改變時(shí)，會(huì)發(fā)生 change 事件。
該事件僅適用于文本域（text field），以及 textarea 和 select 元素。當(dāng)用于 select 元素時(shí)，change 事件會(huì)在選擇某個(gè)選項(xiàng)時(shí)發(fā)生。
- select() 當(dāng)用戶選中單行文本框text或多行文本框textarea的文本時(shí)，會(huì)觸發(fā)select事件。
- submit() 當(dāng)提交表單時(shí)，會(huì)發(fā)生 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>鍵盤(pán)事件-表單事件</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中已經(jīng)輸入了<span id="num">0</span>個(gè)字符 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 //具有獲得焦點(diǎn)和失去焦點(diǎn)事件的元素有3個(gè):單行文本框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>?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9267877.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的js进阶 12-5 jquery中表单事件如何使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 《乡村爱情十》已经开机了！全员大合照，谢
- 下一篇： docker etcd