> 웹 프론트엔드 > 프런트엔드 Q&A > Jquery에서 텍스트를 얻는 방법

Jquery에서 텍스트를 얻는 방법

WBOY
풀어 주다: 2023-05-24 21:46:37
원래의
1870명이 탐색했습니다.

jQuery는 JavaScript 작성을 단순화하고 개발자가 HTML 문서의 요소와 콘텐츠를 더 쉽게 조작할 수 있게 해주는 널리 사용되는 JavaScript 라이브러리입니다. 일반적인 요구 사항 중 하나는 HTML 문서에서 텍스트 콘텐츠를 얻는 것입니다. 이 기사에서는 jQuery에서 텍스트를 얻는 두 가지 일반적인 방법을 소개합니다.

1. text() 메소드

text() 메소드는 요소의 텍스트 내용을 얻는 데 사용할 수 있는 jQuery의 내장 메소드입니다. 이 방법을 사용하면 HTML 문서의 모든 요소에 대한 텍스트 정보를 쉽게 얻을 수 있습니다. 다음은 요소의 텍스트 정보를 가져오는 방법을 보여주는 간단한 예입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery text()方法演示</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="test">这是一个例子</div>
  <script>
    var text = $('#test').text();
    alert(text);
  </script>
</body>
</html>
로그인 후 복사

이 예에서는 먼저 jQuery 라이브러리를 소개한 다음 ID가 "test"인 div 요소를 만들고 text( ) 메서드를 사용하여 가져옵니다. 텍스트 내용을 저장하고 결과를 text라는 변수에 저장합니다. 마지막으로 이 변수의 값을 화면에 출력하는 팝업 창이 호출됩니다.

2.html() 메서드

text() 메서드 외에도 요소의 HTML 콘텐츠를 가져오는 데 사용할 수 있는 html() 메서드도 있습니다. 이 메서드와 text() 메서드의 차이점은 모든 레이블, 텍스트 등 요소 텍스트 이외의 콘텐츠를 얻을 수 있다는 것입니다. 다음은 html() 메서드를 사용하여 요소의 HTML 콘텐츠를 가져오는 방법을 보여주는 간단한 예입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery html()方法演示</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="test"><b>这是</b>一个例子</div>
  <script>
    var html = $('#test').html();
    alert(html);
  </script>
</body>
</html>
로그인 후 복사

이 예에서는 태그와 A를 포함하는 ID가 "test"인 div 요소를 만듭니다. 텍스트 조각. html() 메서드를 사용하여 HTML 콘텐츠를 얻고 결과를 html이라는 변수에 저장합니다. 마지막으로 이 변수의 값을 화면에 출력하는 팝업 창이 호출됩니다.

요약

위는 텍스트를 가져오는 두 가지 일반적인 방법입니다. text() 및 html() 메서드는 모두 jQuery에 내장된 메서드입니다. HTML 문서. jQuery 코드를 작성할 때 실제 요구 사항에 따라 적절한 방법을 선택해야 합니다. 텍스트 내용만 필요한 경우 text() 메서드를 사용할 수 있으며, 레이블과 텍스트를 포함하여 요소의 전체 내용을 가져와야 하는 경우 html() 메서드를 사용할 수 있습니다.

위 내용은 Jquery에서 텍스트를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿