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

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

今天小編就為大家分享一篇關于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>

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關內容請查看下面相關鏈接

您可能感興趣的文章: