そうすることで、ユーザー エクスペリエンスが向上することは明らかです。 html コード: コードをコピー コードは次のとおりです: <ラベル for="ユーザー名">ユーザー名:<入力; type= "text" id="username" class="required"/> jquery コード: コードをコピーします コードは次のとおりです。 (function(){ <br>$('form :input').blur(function(){ <br>var $parent=$(this).parent(); <br>$parent.find(".formtips ").remove( ); <br>if($(this).is('#username')) { <br>if(this.value==""||this.value.lengthvar msg= "<span class='formtips error'>ユーザー名は 6 桁以上入力してください</span>"; else{ <br>var msg="<span class='formtips success'>正しく入力してください</span>"; <br>$(msg).appendTo($parent) <br>} <br>}) .keyup(function(){ <br>$(this).triggerHandler("ぼかし"); <br>}).focus(function(){ <br>$(this).triggerHandler(" Blur"); <br>}) <br>}) <br> さて、内部の jquery ステートメントを詳しく分析してみましょう。 最初に DOM 操作ステートメントを見てください。 $('form:input') これは、$('form:input') の下にあるすべての 、、<select>、<button> 要素を検索するために使用されます。フォーム要素 。 <br>同様に、$(':text')、$(':checkbox')などもあります。とにかく、フォーム内のみであることを理解していれば、フォームセレクターを通じて対応する要素を取得できます。 <br>parent() は、一致する要素を見つける親ノードです。 find() は、式に一致する要素を検索するために使用されます。要素を削除するにはremove()を使用します。 <br>is() は、式を使用して現在のセレクターの要素コレクションを確認し、一致する要素が少なくとも 1 つある場合は true を返します。 <br>appendTo() は、要素を別の要素に追加します。 <br>triggerHandler() は、要素上で特定のイベントをトリガーする特徴的なメソッドです。 <br>イベントステートメントをもう一度見てください。 <br>keyup() は、キーが上に押されたときにトリガーされます。 <br>それぞれのメソッドを理解すると、上記のコードを理解するのは簡単になるはずです。<br>このコードについて疑問があるかもしれません。 $parent.find(".formtips").remove(); <br>この文は、後でプロンプトが表示される要素が 1 つだけであることを確認するためのものです。このような文が無い場合はプロンプト要素が随時追加されます。
