jquery로 요소 내용을 얻는 방법

jQuery는 JavaScript를 기반으로 개발된 빠르고, 작고, 강력한 JavaScript 라이브러리입니다. 핵심은 HTML 문서의 요소를 선택하고 조작하기 위한 사용하기 쉽고 강력한 선택기입니다. jQuery에는 요소의 내용을 얻는 방법이 많이 있습니다. 이 기사에서는 가장 일반적으로 사용되는 몇 가지 방법을 설명합니다.

1. text() 메서드는 요소의 텍스트 내용을 가져옵니다.

jQuery에서는 text() 메서드를 사용하여 요소의 텍스트 내용을 가져올 수 있습니다. 이 방법은 선택한 요소에 다른 태그나 요소가 포함되어 있지 않은 상황에 적합합니다. 예를 들어 다음 HTML 코드의 경우:

<p>这是一个段落</p>

다음 코드를 사용하여 단락의 텍스트 콘텐츠를 가져올 수 있습니다.

var text = $("p").text();

2. html() 메서드는 요소의 HTML 콘텐츠를 가져옵니다.

선택한 요소가 다른 태그나 요소가 포함된 경우 html() 메서드를 사용하여 해당 HTML 콘텐츠를 얻을 수 있습니다. 예를 들어, 다음 HTML 코드의 경우:

    
标题
    <p>这是一个段落</p>

다음 코드를 사용하여 div 요소의 HTML 콘텐츠를 가져올 수 있습니다.

var html = $("div").html();

3. val() 메서드는 양식 요소의 값을 가져옵니다.

양식 요소의 경우 (예: input, select 및 textarea) 해당 값은 val() 메서드를 사용하여 얻을 수 있습니다. 예를 들어 다음 HTML 코드의 경우:

<input type="text" value="这是输入框的值">

다음 코드를 사용하여 입력 상자의 값을 가져올 수 있습니다.

var value = $("input[type='text']").val();

4. attr() 메서드를 사용하여 요소의 속성 값을 가져올 수 있습니다.

다음을 사용할 수 있습니다. attr() 메소드를 사용하여 요소의 속성 값을 가져옵니다. 예를 들어, 다음 HTML 코드의 경우:

<img src="image.png">

다음 코드를 사용하여 img 요소의 src 속성 값을 가져올 수 있습니다.

var src = $("img").attr("src");

5 data() 메서드는 요소 데이터 속성 값을 가져옵니다

데이터 속성의 경우 data() 메소드를 사용하여 데이터 속성 값을 얻을 수 있습니다. 예를 들어, 다음 HTML 코드의 경우:

<div data-name="John" data-age="30"></div>

다음 코드를 사용하여 div 요소의 data-name 및 data-age 속성 값을 가져올 수 있습니다.

var name = $("div").data("name");
var age = $("div").data("age");

데이터를 정의할 때 주의해야 할 점은 HTML의 속성에는 "data-name"과 같은 "data -" 접두사를 추가해야 합니다.

요약

jQuery에서는 요소 콘텐츠를 얻는 방법이 다양하며 특정한 일반적인 시나리오에 따라 선택할 수 있습니다. 위의 방법으로 대부분의 애플리케이션 시나리오를 다룰 수 있습니다. 이 기사가 독자가 jQuery를 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다.

위 내용은 jquery로 요소 내용을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!