jQuery事件blur()方法的使用實(shí)例講解
實(shí)例
當(dāng)輸入域失去焦點(diǎn) (blur) 時(shí)改變其顏色:
$("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>請(qǐng)?jiān)谏厦娴妮斎胗蛑悬c(diǎn)擊,使其獲得焦點(diǎn),然后在輸入域外面點(diǎn)擊,使其失去焦點(diǎn)。</p> </body> </html>
定義和用法
當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生 blur 事件。
blur()
函數(shù)觸發(fā) blur 事件,或者如果設(shè)置了 function 參數(shù),該函數(shù)也可規(guī)定當(dāng)發(fā)生 blur 事件時(shí)執(zhí)行的代碼。
提示:早前,blur 事件僅發(fā)生于表單元素上。在新瀏覽器中,該事件可用于任何元素。
觸發(fā) blur 事件
觸發(fā)被選元素的 blur 事件。
語法
$(selector).blur()
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); $("#btn1").click(function(){ $("input").focus(); }); $("#btn2").click(function(){ $("input").blur(); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>請(qǐng)?jiān)谏厦娴妮斎胗蛑悬c(diǎn)擊,使其獲得焦點(diǎn),然后在輸入域外面點(diǎn)擊,使其失去焦點(diǎn)。</p> <p><button id="btn1">觸發(fā)輸入域的 focus 事件</button></p> <p><button id="btn2">觸發(fā)輸入域的 blur 事件</button></p> </body> </html>
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框代碼實(shí)例
- jQuery ajax仿Google自動(dòng)提示SearchSuggess功能示例
- JQueryDOM之樣式操作
- 淺談JS和jQuery的區(qū)別
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
- jQuery添加新內(nèi)容的四個(gè)常用方法分析【append,prepend,after,before】
- 簡單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎(jiǎng)程序
- 詳解jQuery-each()方法
- 使用jquery的cookie實(shí)現(xiàn)登錄頁記住用戶名和密碼的方法
- Jquery的autocomplete插件用法及參數(shù)講解
相關(guān)文章
jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D環(huán)餅圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts載入xml數(shù)據(jù)繪制2D環(huán)餅圖的相關(guān)步驟與操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)跟隨鼠標(biāo)顯示放大的圖片效果
當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí),跟隨鼠標(biāo)顯示放大顯示的圖片,具體效果情況截圖,另附送源碼,感興趣的朋友可以學(xué)習(xí)下哈2013-06-06jQuery+PHP+MySQL實(shí)現(xiàn)無限級(jí)聯(lián)下拉框效果
這篇文章主要介紹了jQuery+PHP+MySQL實(shí)現(xiàn)無限級(jí)聯(lián)效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案
jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案,需要的朋友可以參考下。2012-01-01Jquery多選下拉列表插件jquery multiselect功能介紹及使用
支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇,頭部選項(xiàng),如全選/ 取消全選 /關(guān)閉功能,支持鍵盤選擇等等,下面與大家分享下具體使用2013-05-05jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎?在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹,感興趣的朋友不要錯(cuò)過2013-11-11基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼
基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼,需要的朋友可以參考下2012-06-06