jQuery事件blur()方法的使用實(shí)例講解
更新時間：2019年03月30日 17:16:39 作者：徐劉根
今天小編就為大家分享一篇關(guān)于jQuery事件blur()方法的使用實(shí)例講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
實(shí)例
當(dāng)輸入域失去焦點(diǎn) (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>請?jiān)谏厦娴妮斎胗蛑悬c(diǎn)擊，使其獲得焦點(diǎn)，然后在輸入域外面點(diǎn)擊，使其失去焦點(diǎn)。</p>
</body>
</html>
定義和用法
當(dāng)元素失去焦點(diǎn)時發(fā)生 blur 事件。
blur()函數(shù)觸發(fā) blur 事件，或者如果設(shè)置了 function 參數(shù)，該函數(shù)也可規(guī)定當(dāng)發(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>請?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)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)動態(tài)添加和刪除input框代碼實(shí)例
- jQuery ajax仿Google自動提示SearchSuggess功能示例
- JQueryDOM之樣式操作
- 淺談JS和jQuery的區(qū)別
- jQuery實(shí)現(xiàn)動態(tài)添加和刪除input框?qū)嵗a
- jQuery添加新內(nèi)容的四個常用方法分析【append，prepend，after，before】
- 簡單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎程序
- 詳解jQuery-each()方法
- 使用jquery的cookie實(shí)現(xiàn)登錄頁記住用戶名和密碼的方法
- Jquery的autocomplete插件用法及參數(shù)講解
相關(guān)文章
jQuery實(shí)現(xiàn)DIV層淡入淡出拖動特效的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV層淡入淡出拖動特效的方法,涉及jQuery針對鼠標(biāo)操作的常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
當(dāng)頁面文件.html作為本地文件打開(即IE路徑為file:///開頭的)的時候，需要訪問本地文本文件的內(nèi)容時2012-07-07
easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
下面小編就為大家?guī)硪黄猠asyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法(示例代碼)
本篇文章主要介紹了jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jquery事件preventDefault()方法用法實(shí)例
這篇文章主要介紹了jquery事件preventDefault()方法用法,實(shí)例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以參考下2015-01-01
jQuery判斷元素是否顯示 是否隱藏的簡單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示 是否隱藏的簡單實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jQuery隨機(jī)密碼生成的方法,實(shí)例分析了jQuery操作隨機(jī)數(shù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery HTML獲取內(nèi)容和屬性操作實(shí)例分析
這篇文章主要介紹了jQuery HTML獲取內(nèi)容和屬性操作,結(jié)合實(shí)例形式分析了jQuery HTML獲取內(nèi)容和屬性相關(guān)函數(shù)用法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
一款Jquery 分頁插件的改造方法（服務(wù)器端分頁）
分頁幾乎是每個外部程序必不可少的東西，在webform時代很多人都用過AspNetPager這個用戶控件吧，用的人之多其實(shí)就在于它的優(yōu)點(diǎn)2011-07-07