快捷導(dǎo)航

jQuery事件blur()方法的使用實(shí)例講解

更新時(shí)間：2019年03月30日 17:16:39 作者：徐劉根

今天小編就為大家分享一篇關(guān)于jQuery事件blur()方法的使用實(shí)例講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧

實(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)鏈接

您可能感興趣的文章: