yahooメールボックスのログインボックスを模したヒント効果

jqueryの利点は、簡単なコードがより良いユーザー体験をもたらすことです.そこで、私が実用的な例をいくつか探して、紹介します.ついでに使用した操作とイベントを紹介します.htmlコード:jqueryコード:

 
  
 $(document).ready(function(){  
  
 $('#address').focus(function(){  
  
 var add_value=$(this).val();  
  
 if(add_value=="       "){  
  
 $(this).val("");  
  
 }  
  
 })  
  
 $('#address').blur(function(){  
  
 var add_value=$(this).val();  
  
 if(add_value==""){  
  
 $(this).val("       ");  
  
 }  
  
 })  
  
 });  
 

アドレスボックスがマウスのフォーカスを取得すると、アドレスボックスの値が空になります.マウスのフォーカスが失われた場合、アドレスボックスはデフォルト設定に戻ります.ここで使用するjqueryイベントについて説明します.focus()は、jqueryオブジェクトがマウスフォーカスを取得したときにトリガーされ、blur()は、jqueryオブジェクトがマウスフォーカスを失ったときに、ついでに他のマウスを紹介するイベントをトリガーします.mouseover()は、マウスがオブジェクトに移動するトリガです.mouseout()マウスでオブジェクトを移動するとトリガーされます.mousemove()は、マウスがオブジェクト内を移動したときにトリガーされます.使用するjqueryのdom操作:val()は要素valueを取得する値であり、要素valueの値を設定することもできます.この1つの関数内で取得と設定を実現する方法はjqueryでよく見られるクラスにhtml(),text(),heigth(),width(),css(),attr()などがある.ここで区別するhtml()とtext()html()は、オブジェクトに対するhtmlコードであり、text()は、オブジェクトにおけるテキストの内容のみを例として

区別

$('p')を挙げる.html().結果は区別$('p')である.text().結果は違い