[jQuery] 데이터 가져오기

1. 텍스트 가져오기

// 텍스트 내용 가져오기
let text = $('#elementId').text();
let text = $('.className').text();

// html 내용 가져오기 (태그 포함)
let html = $('#elementId').html();

 

2. 속성 값 가져오기

// value 속성
let value = $('#elementId').val();

// 다른 속성들
let src = $('#imageId').attr('src');
let href = $('#linkId').attr('href');
let dataValue = $('#elementId').attr('data-something');

 

3. data 속성 가져오기

// data-* 속성
let dataValue = $('#elementId').data('name');

 

4. form 데이터 가져오기

// form 전체 데이터
let formData = $('#formId').serialize();

// 특정 input 값
let inputValue = $('input[name="userName"]').val();

 

5. 선택된 옵션 가져오기

// select 박스의 선택된 값
let selectedValue = $('select').val();

// checkbox 체크 여부
let isChecked = $('#checkboxId').is(':checked');

 

 

예시

$(document).ready(function() {
    // 버튼 클릭시 여러 데이터 가져오기
    $('#buttonId').click(function() {
        // 텍스트 가져오기
        let name = $('#nameId').text();
        
        // input 값 가져오기
        let age = $('#ageInput').val();
        
        // select 값 가져오기
        let category = $('#categorySelect').val();
        
        // data 속성 가져오기
        let customData = $('#elementId').data('custom');
        
        console.log('이름:', name);
        console.log('나이:', age);
        console.log('카테고리:', category);
        console.log('커스텀 데이터:', customData);
    });
});