HOWTO · jQuery

jQuery 변경 텍스트

웹 콘텐츠를 보다 동적으로 만들고 사용자 탐색을 보다 효과적으로 만들기 위해 jQuery text() 메서드가 효과적으로 작동할 수 있습니다. 어떤 메시지나 변경이 이루어지든 text() 메서드에 전달하여 활성화할 수 있습니다. 그런 다음 메서드는 시각적 섹션에 전달된 값을 반환합니다.

이 페이지의 내용

jQuery에는 더 적은 수의 코드 라인으로 문제를 해결하기 위해 여러 규칙이 존재합니다. 유사하게, 추가는 text() 메소드입니다.

jQuery의 text() 메소드

일반적으로 text() 함수는 인스턴스에 적용될 때 특정 요소의 텍스트 값을 반환합니다. It's a line이라는 메시지가 있는 p 태그가 있다고 가정합니다.

따라서 다음과 같은 구문이 있습니다.

<p id="line"> It's a line.</p>

인스턴스에 text() 메서드를 적용하면 "It's a line."이 반환됩니다. 구문은 다음과 같습니다.

$('#line').text();  // output = "It's a line."

예제 세트에서 기존 텍스트를 기본 설정에 따라 새로운 것으로 변경하는 방법을 보여줍니다. 따라서 첫 번째 인스턴스는 구현이 직접 변경됩니다. 다음 이벤트는 클릭 이벤트로 진행됩니다. 들어가자!

text() 메서드를 사용하여 jQuery를 사용하여 직접 텍스트 변경

text() 메소드는 이 예제의 문자열 매개변수로 새 텍스트 값을 사용합니다. 당신은 또한 당신의 의지의 역동적인 가치를 시작할 수 있습니다.

정적 HTML 본문과 미리보기 페이지의 값을 변경하기만 하면 됩니다. 이를 검사하기 위해 코드 펜스를 확인합시다.

코드 조각:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('#title').text("New Text");
});
</script>
</head>
<body>
<p id='title'>Text</p>

출력:

text() 메서드를 사용하여 텍스트를 직접 변경 - 출력 1

text() 메서드를 사용하여 텍스트를 직접 변경 - 출력 2

text() 메서드를 사용하여 jQuery를 사용하여 클릭 이벤트로 텍스트 변경

여기에서의 절차는 이전 절차와 유사합니다. 여기서 기본적인 차이점을 만들면 변경 효과를 트리거하는 클릭 이벤트를 만들 것입니다.

또한 클릭 이벤트를 클릭할 때 HTML 본문 콘텐츠가 어떻게 편향되는지도 살펴보겠습니다. 코드 라인으로 이동합시다.

코드 조각:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $('#press').click(function(){
    $('#title').text("Text Altered");
});
  });
</script>
</head>
<body>
<p id='title'>Text</p>
<button id="press">Text Change</button>

출력:

text() 메서드를 사용하여 클릭 이벤트로 텍스트 변경 - 출력 1

text() 메서드를 사용하여 클릭 이벤트로 텍스트 변경 - 출력 2