jquery での DOM 操作とイベントの学習例 Yahoo メールボックス ログイン box_jquery のプロンプト効果の模倣。

しかし、このように書くと非常に退屈に感じます。

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() は、要素の値の値を取得するものであり、要素の値の値を設定することもできます。関数内で取得および設定するこの方法は、html()、text()、heigth()、width()、css()、attr() などの jquery

クラスで非常に一般的です。

ここでは html() と text() を区別します

html() はオブジェクト内の HTML コードに相対的ですが、text() はオブジェクト内の単なるテキストコンテンツです

例 例

違い

$('p').html()。結果は Difference

$('p').text() になります。この例の導入と展開は以上です。