jquery에서 포커스를 잃고 범위 내용을 변경하는 방법

웹 기술의 지속적인 발전으로 인해 더 이상 백엔드 프로그램 개발이 아닌 JavaScript, jQuery와 같은 프런트엔드 JS 라이브러리를 통해 점점 더 많은 웹 기능이 구현되고 있습니다. 그 중 페이지 상호작용이 비교적 일반적인 기능이고, 양식 상호작용이 가장 일반적입니다. 이 글에서는 양식 입력 상자가 포커스를 잃을 때 jQuery를 사용하여 해당 태그의 내용을 자동으로 변경하는 방법을 소개합니다.

1. 전제 지식

jQuery를 사용하여 태그의 내용을 변경하는 방법을 소개하기 전에 몇 가지 기본 지식을 이해해야 합니다.

1. jQuery 버전

최신 버전의 jQuery는 3.x이며 공식적으로는 1.x와 2.x에 대한 유지 관리가 중단되었습니다. 따라서 본 글에서는 최신 버전의 jQuery인 jQuery 3.x를 사용하겠습니다.

2. Selector

Selector는 jQuery에서 매우 중요한 개념 중 하나이며 태그 이름, 클래스 이름, ID 및 기타 속성을 기반으로 요소를 선택할 수 있습니다. 예를 들어 선택기 $('input[type="text"]')는 페이지의 모든 텍스트 입력 상자를 선택할 수 있습니다.

3. Events

JavaScript에서 이벤트는 매우 일반적인 개념입니다. 클릭, 마우스 움직임 등과 같은 DOM(Document Object Model)의 특정 작업에 의해 트리거되는 동작을 나타냅니다. jQuery에서는 on() 메서드를 사용하여 이벤트를 바인딩할 수 있습니다. 예: $('button').on('click', function(){ Alert('Button clicked'); }).

2.

1. HTML 부분

구현 방법 HTML에서는 텍스트 입력 상자와 태그를 미리 정의해야 합니다. 예:

<input type="text" id="txtName" />
<span id="spnName"></span>

그 중 input 태그는 사용자 입력을 받는 데 사용되고,span 태그는 사용자가 입력한 내용을 표시하는 데 사용됩니다. 초기값은 비어 있을 수 있습니다.

2. jQuery 부분

jQuery 코드에서는 먼저 텍스트 입력 상자를 선택한 다음 on() 메서드를 사용하여 흐림 이벤트를 바인딩해야 합니다. 텍스트 입력 상자가 포커스를 잃으면 코드의 콜백 함수가 실행될 수 있습니다. 구체적인 코드는 다음과 같습니다.

$(function() {
    $('#txtName').on('blur', function() {
        $('#spnName').text($(this).val());
    });
});

그 중 $(this).val() 메소드는 텍스트 입력 상자에 값을 가져오는 데 사용되는 반면, $('#spnName').text() 메소드는 태그 텍스트 내용을 설정하는 데 사용됩니다.

3. 요약

위의 소개를 통해 양식 입력 상자가 포커스를 잃었을 때 jQuery를 사용하여 해당 태그의 내용을 자동으로 변경하는 방법을 누구나 명확하게 이해할 수 있다고 믿습니다. 물론, 태그의 내용을 설정하기 위해 text() 메소드를 사용하는 것 외에도 HTML 내용을 설정하기 위해 html() 메소드를 사용하거나 새로운 내용을 추가하기 위해 append() 메소드를 사용할 수도 있습니다.

마지막으로, jQuery는 DOM을 조작하는 데 편리한 여러 가지 방법을 제공하지만 실제 개발에서는 너무 부풀려져 페이지 성능에 영향을 미치지 않도록 코드 성능 최적화에도 주의를 기울여야 한다는 점에 유의해야 합니다.

위 내용은 jquery에서 포커스를 잃고 범위 내용을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!