JQuery 편집하기 (부분)

== DOM 조작 ==

jQuery는 '''[[DOM]](Document Object Model) 조작'''을 매우 간단하게 만들어준다.

=== 내용 조작 ===

<syntaxhighlight lang="javascript">
// 텍스트 내용 조작
$('#myDiv').text()                    // 텍스트 내용 가져오기
$('#myDiv').text('새로운 텍스트')        // 텍스트 내용 설정하기

// HTML 내용 조작
$('#myDiv').html()                    // HTML 내용 가져오기
$('#myDiv').html('<p>새로운 HTML</p>')  // HTML 내용 설정하기

// 값 조작 (폼 요소)
$('#myInput').val()                   // 입력값 가져오기
$('#myInput').val('새로운 값')          // 입력값 설정하기
$('#mySelect').val(['option1', 'option2']) // select 다중 선택
</syntaxhighlight>

=== 속성 조작 ===

<syntaxhighlight lang="javascript">
// 속성 조작
$('#myImg').attr('src')                    // src 속성값 가져오기
$('#myImg').attr('src', 'image.jpg')       // src 속성값 설정하기
$('#myImg').attr({                         // 여러 속성 동시 설정
    'src': 'image.jpg',
    'alt': '이미지 설명',
    'title': '이미지 제목'
});
$('#myImg').removeAttr('title')            // title 속성 제거

// 프로퍼티 조작 (속성과 비슷하지만 다름)
$('#myCheckbox').prop('checked')           // checked 상태 확인
$('#myCheckbox').prop('checked', true)     // checked 상태로 만들기
$('#myInput').prop('disabled', true)       // disabled 상태로 만들기

// 데이터 속성 조작
$('#myDiv').data('user-id')                // data-user-id 속성값 가져오기
$('#myDiv').data('user-id', '123')         // data-user-id 속성값 설정하기
$('#myDiv').removeData('user-id')          // data-user-id 속성 제거
</syntaxhighlight>

=== CSS 조작 ===

<syntaxhighlight lang="javascript">
// CSS 스타일 조작
$('#myDiv').css('color')                   // color 스타일값 가져오기
$('#myDiv').css('color', 'red')            // color 스타일 설정하기
$('#myDiv').css({                          // 여러 스타일 동시 설정
    'color': 'red',
    'font-size': '20px',
    'background-color': '#f0f0f0'
});

// 클래스 조작
$('#myDiv').addClass('highlight')          // 클래스 추가
$('#myDiv').removeClass('highlight')       // 클래스 제거
$('#myDiv').toggleClass('highlight')       // 클래스 토글 (있으면 제거, 없으면 추가)
$('#myDiv').hasClass('highlight')          // 클래스 존재 여부 확인

// 크기와 위치
$('#myDiv').width()                        // 너비 가져오기
$('#myDiv').width(300)                     // 너비 설정하기
$('#myDiv').height(200)                    // 높이 설정하기
$('#myDiv').innerWidth()                   // padding 포함 너비
$('#myDiv').outerWidth()                   // margin 포함 너비
$('#myDiv').offset()                       // 문서 기준 위치 {top: 100, left: 50}
$('#myDiv').position()                     // 부모 기준 위치
</syntaxhighlight>

=== 요소 생성과 삽입 ===

<syntaxhighlight lang="javascript">
// 요소 생성
var $newDiv = $('<div>새로운 div</div>');
var $newP = $('<p>', {
    text: '새로운 문단',
    class: 'highlight',
    id: 'newParagraph'
});

// 내부에 삽입
$('#container').append($newDiv)            // container 마지막에 추가
$('#container').prepend($newDiv)           // container 첫 번째에 추가
$newDiv.appendTo('#container')             // newDiv를 container 마지막에 추가
$newDiv.prependTo('#container')            // newDiv를 container 첫 번째에 추가

// 외부에 삽입
$('#target').after($newDiv)                // target 뒤에 추가
$('#target').before($newDiv)               // target 앞에 추가
$newDiv.insertAfter('#target')             // newDiv를 target 뒤에 추가
$newDiv.insertBefore('#target')            // newDiv를 target 앞에 추가
</syntaxhighlight>

=== 요소 복사와 제거 ===

<syntaxhighlight lang="javascript">
// 요소 복사
var $cloned = $('#original').clone()       // 단순 복사
var $clonedWithEvents = $('#original').clone(true) // 이벤트까지 복사

// 요소 제거
$('#target').remove()                      // 요소와 이벤트 모두 제거
$('#target').detach()                      // 요소 제거하지만 이벤트는 유지
$('#target').empty()                       // 자식 요소들만 제거

// 요소 교체
$('#old').replaceWith('<div>새로운 내용</div>')
$('<div>새로운 내용</div>').replaceAll('#old')

// 요소 감싸기
$('#target').wrap('<div class="wrapper"></div>')      // 각각 감싸기
$('.targets').wrapAll('<div class="container"></div>') // 모두 함께 감싸기
$('#target').wrapInner('<span></span>')               // 내용물 감싸기
$('#target').unwrap()                                 // 감싸는 요소 제거
</syntaxhighlight>