jQuery事件blur()方法的使用實例講解
實例
當輸入域失去焦點 (blur) 時改變其顏色:
$("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>請在上面的輸入域中點擊,使其獲得焦點,然后在輸入域外面點擊,使其失去焦點。</p> </body> </html>
定義和用法
當元素失去焦點時發(fā)生 blur 事件。
blur()
函數觸發(fā) blur 事件,或者如果設置了 function 參數,該函數也可規(guī)定當發(fā)生 blur 事件時執(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>請在上面的輸入域中點擊,使其獲得焦點,然后在輸入域外面點擊,使其失去焦點。</p> <p><button id="btn1">觸發(fā)輸入域的 focus 事件</button></p> <p><button id="btn2">觸發(fā)輸入域的 blur 事件</button></p> </body> </html>
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。如果你想了解更多相關內容請查看下面相關鏈接
相關文章
jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D環(huán)餅圖效果,結合實例形式分析了jQuery使用插件FusionCharts載入xml數據繪制2D環(huán)餅圖的相關步驟與操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案
jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案,需要的朋友可以參考下。2012-01-01Jquery多選下拉列表插件jquery multiselect功能介紹及使用
支持點擊label實現checkbox組選擇,頭部選項,如全選/ 取消全選 /關閉功能,支持鍵盤選擇等等,下面與大家分享下具體使用2013-05-05