jquery에서 태그의 속성값을 얻는 방법

최근 몇 년간 웹 프론트엔드가 매우 뜨거운 산업으로 자리 잡았으며, 뛰어난 JavaScript 라이브러리인 jQuery는 웹 프론트엔드 개발의 모든 측면에서 널리 사용되고 있습니다. jQuery를 사용할 때 태그 속성 값을 가져오는 것은 기본 중 기본입니다. 다음으로 jQuery가 태그 속성의 값을 얻을 수 있는 몇 가지 방법을 살펴보겠습니다.

1. attr() 메소드

attr() 메소드는 jQuery에서 일반적인 메소드로, 특정 요소의 속성값을 가져오거나 설정하는데 사용됩니다. attr() 메소드의 기본 구문은 다음과 같습니다.

$(selector).attr(attribute)

그 중 selector는 지정된 요소를 나타내고, attribute는 얻거나 설정하려는 속성 이름을 나타냅니다. 특정 요소의 속성 값을 가져오려면 속성 매개변수에 속성 ​​이름을 전달할 수 있습니다. 예를 들어 특정 div 요소의 클래스 속성 값을 얻으려면 다음과 같이 작성할 수 있습니다.

var className = $('div').attr('class');

위 코드에서 $('div')는 모든 div 요소를 선택한다는 의미이고 attr(' class')는 해당 요소의 클래스 속성 값을 가져오는 것을 의미합니다. 요소의 속성 값을 설정하려면 속성 매개변수에 속성 ​​이름과 속성 값을 전달해야 합니다. 예를 들어 img 요소의 src 속성 값을 newImg.png로 변경하려면 다음과 같이 작성할 수 있습니다.

$('img').attr('src', 'newImg.png');

attr() 메서드를 사용하여 태그 속성 값을 얻을 때 주의해야 합니다. 다음 사항에 유의하세요.

• 선택기의 경우 일치하는 요소가 여러 개인 경우 첫 번째 요소의 속성 값만 반환됩니다.
• 속성이 존재하지 않으면 정의되지 않은 값을 반환합니다.
• 속성 이름을 잘못 기재하면 정의되지 않은 값도 반환됩니다.

2.prop() 메소드

prop() 메소드는 attr() 메소드와 유사하며 지정된 요소의 속성 값을 가져오거나 설정하는 데에도 사용됩니다. 차이점은 prop() 메소드가 주로 selected, selected 등과 같은 일부 요소별 속성을 가져오거나 설정하는 데 사용된다는 것입니다. prop() 메소드의 기본 구문은 다음과 같습니다.

$(selector).prop(property)

그 중 selector는 지정된 요소를 나타내고, property는 얻거나 설정하려는 속성 이름을 나타냅니다. 특정 요소의 속성 값을 가져오려면 속성 매개변수에 속성 ​​이름을 전달할 수 있습니다. 예를 들어 체크박스 요소의 확인된 속성 값을 얻으려면 다음과 같이 작성할 수 있습니다.

var isChecked = $('input[type=checkbox]').prop('checked');

위 코드에서 $('input[type=checkbox]')는 모든 체크박스 요소를 선택한다는 의미입니다. prop('checked') 이러한 요소의 확인된 속성 값을 가져오는 것을 나타냅니다. 요소의 속성 값을 설정하려면 속성 매개변수에 속성 ​​이름과 속성 값을 전달해야 합니다. 예를 들어 체크박스 요소의 selected 속성 값을 true로 설정하려면 다음과 같이 작성할 수 있습니다.

$('input[type=checkbox]').prop('checked', true);

label 속성 값을 얻기 위해 prop() 메서드를 사용할 때 주의할 점은 다음과 같습니다. 다음 사항:

• 선택기가 일치하는 경우 여러 요소가 있는 경우 첫 번째 요소의 속성 값만 반환됩니다.
• 속성이 존재하지 않으면 정의되지 않은 값을 반환합니다.
• 속성 이름을 잘못 기재하면 정의되지 않은 값도 반환됩니다.

3. data() 메소드

data() 메소드는 지정된 요소의 사용자 정의 데이터 속성을 가져오는 데 사용되는 jQuery의 또 다른 일반적인 메소드입니다. data() 메소드의 기본 구문은 다음과 같습니다.

$(selector).data(key)

그 중 selector는 지정된 요소를 나타내고, key는 얻으려는 사용자 정의 데이터 속성의 이름을 나타냅니다. 예를 들어 특정 div 요소의 맞춤 데이터 속성 data-id 값을 가져오려면 다음과 같이 작성할 수 있습니다.

<div data-id="123"></div>

var dataId = $('div').data('id');

위 코드에서 $('div')는 모든 div를 선택한다는 의미입니다. 요소에서 data('id' )는 해당 요소의 사용자 정의 데이터 속성 data-id 값을 가져오는 것을 의미합니다. 요소의 사용자 정의 데이터 속성을 설정하려면 data() 메소드에 속성 이름과 속성 값을 전달해야 합니다. 예를 들어, div 요소의 사용자 정의 데이터 속성 data-name을 myName으로 설정하려면 다음과 같이 작성할 수 있습니다.

$('div').data('name', 'myName');

data() 메소드를 사용하여 라벨 속성 값을 얻으려면 비용을 지불해야 합니다. 다음 사항에 주의하세요.

• 선택기와 일치하는 요소가 여러 개인 경우 첫 번째 요소의 맞춤 데이터 속성 값만 반환됩니다.
• 맞춤 데이터 속성이 없으면 정의되지 않은 값을 반환합니다.
• 사용자 정의 데이터 속성 이름을 잘못 입력하면 정의되지 않은 값도 반환됩니다.

결론

위는 jQuery가 태그 속성 값을 얻는 몇 가지 일반적인 방법입니다. 실제 개발에서는 실제 필요에 따라 적합한 방법을 선택할 수 있습니다. 다양한 속성 유형에 적합한 방법이 다르므로 실제 상황에 따라 선택해야 한다는 점에 유의해야 합니다.

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