분명히 그렇게 하면 더 나은 사용자 경험을 얻을 수 있습니다. html 코드: 코드 복사 코드는 다음과 같습니다. 사용자 이름: 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.length<6){ <BR>var msg= "<span class='formtips error'>사용자 이름을 6자리 이상 입력하세요</span>" <br>$(msg).appendTo($parent) <br>} else{ <br>var msg="<span class='formtips Success'>올바르게 입력하세요</span>" <br>$(msg).appendTo($parent) <br>} <br>} <br>}) .keyup(function(){ <br>$(this).triggerHandler("blur"); <br>}).focus(function(){ <br>$(this).triggerHandler(" Blur"); <br>}) <br>}) <br> 자, 이제 내부의 jquery 문을 자세히 분석해 보겠습니다. 먼저 DOM 연산문을 살펴보세요. $('form:input') 이는 DOM 아래의 모든 , , <select>, <button> 요소를 찾는 데 사용됩니다. 양식 요소 . <br>마찬가지로 $(':text'), $(':checkbox') 등이 있습니다. 어쨌든 양식 내에서만 양식 선택기를 통해 해당 요소를 가져올 수 있다는 점을 이해하는 한. <br>parent()는 일치하는 요소를 찾는 상위 노드입니다. find()는 표현식과 일치하는 요소를 검색하는 데 사용됩니다. Remove()는 요소를 삭제하는 데 사용됩니다. <br>is()는 표현식을 사용하여 현재 선택기의 요소 컬렉션을 확인하고 일치하는 요소가 하나 이상 있으면 true를 반환합니다. <br>appendTo()는 다른 요소에 요소를 추가하는 것입니다. <br>triggerHandler()는 요소에서 특정 이벤트를 트리거하는 특징적인 메서드입니다. <br>이벤트 설명을 다시 살펴보세요. <br>keyup()은 키를 위쪽으로 누르면 트리거됩니다. <br>각 메소드를 이해하고 나면 위의 코드도 이해하기 쉬울 것입니다. <br>이 코드에 대해 궁금한 점이 있을 수 있습니다. $parent.find(".formtips").remove(); <br>이 문장은 나중에 표시되는 요소가 하나만 있는지 확인하기 위한 것입니다. 해당 문장이 없으면 프롬프트 요소가 항상 추가됩니다.
