[jQuery] 태그 별 값 가져오는 방법

 

jQuery를 사용하여 값 가져오기

html 태그에 따라 값을 가져오는 방식이 다르다.

이번 포스팅은 jquery 메서드를 사용해 각 html 태그 별로 값을 가져오는 방법을 정리했다.

 

1. input 태그

• text, password, email, number: val() 메서드를 사용합니다.

<input type="text" id="name" value="홍길동">

const name = $("#name").val(); // "홍길동"

• radio: prop("checked") 메서드를 사용합니다.

<input type="radio" name="gender" value="male" checked> 남성
<input type="radio" name="gender" value="female"> 여성

const gender = $('input[name="gender"]:checked').val(); // "male"

• checkbox: prop("checked") 메서드를 사용합니다.

<input type="checkbox" id="agree"> 약관 동의

const agree = $("#agree").prop("checked"); // true or false

 

2. textarea 태그

• val() 메서드를 사용합니다.

<textarea id="message">안녕하세요</textarea>

const message = $("#message").val(); // "안녕하세요"

 

3. select 태그

• val() 메서드를 사용합니다.

<select id="country">
  <option value="korea">한국</option>
  <option value="usa">미국</option>
  <option value="japan">일본</option>
</select>

const country = $("#country").val(); // "korea"

 

4. h1, h2, h3, ..., h6 태그

• text() 메서드를 사용합니다.

<h1>제목</h1>

const title = $("h1").text(); // "제목"

 

 

5. a 태그

• attr("href") 메서드를 사용하여 링크 주소를 가져오고, text() 메서드를 사용하여 텍스트를 가져옵니다.

<a href="https://www.google.com">구글</a>

const href = $("a").attr("href"); // "https://www.google.com"
const text = $("a").text(); // "구글"

 

6. img 태그

• attr("src") 메서드를 사용하여 이미지 주소를 가져옵니다.

<img src="https://www.example.com/image.png">

const src = $("img").attr("src"); // "https://www.example.com/image.png"

 

7. data- 속성*

• data() 메서드를 사용하여 data-* 속성의 값을 가져옵니다.

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

const id = $("#div").data("id"); // 123

 

8. div , span 태그 등 기타 태그 값

• text() 메서드 사용 (태그 안의 텍스트 내용 가져옴)
• html() 메서드 사용 (태그 안의 HTML 코드 가져옴)

var textContent = $('div').text();
var htmlContent = $('div').html();

/* 추가 팁 */
//특정 자식 요소의 값 가져오기
var divText = $('div').find('p').text();
//특정 속성의 값 가져오기
var divId = $('div').attr('id');