JQuery 편집하기 (부분)

== 실용 예제 ==

=== 이미지 갤러리 ===

<syntaxhighlight lang="html">
<div class="gallery">
    <img src="thumb1.jpg" data-large="large1.jpg" alt="이미지 1">
    <img src="thumb2.jpg" data-large="large2.jpg" alt="이미지 2">
    <img src="thumb3.jpg" data-large="large3.jpg" alt="이미지 3">
</div>
<div id="modal" style="display: none;">
    <img id="modal-image" src="" alt="">
    <button id="close-modal">닫기</button>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    // 썸네일 클릭 시 모달 열기
    $('.gallery img').click(function() {
        var largeSrc = $(this).data('large');
        var alt = $(this).attr('alt');
        
        $('#modal-image').attr('src', largeSrc).attr('alt', alt);
        $('#modal').fadeIn(300);
    });
    
    // 모달 닫기
    $('#close-modal, #modal').click(function(e) {
        if (e.target === this) {
            $('#modal').fadeOut(300);
        }
    });
    
    // ESC 키로 모달 닫기
    $(document).keyup(function(e) {
        if (e.keyCode === 27) { // ESC
            $('#modal').fadeOut(300);
        }
    });
});
</syntaxhighlight>

=== 동적 폼 필드 추가/제거 ===

<syntaxhighlight lang="html">
<form id="dynamic-form">
    <div class="field-group">
        <input type="text" name="items[]" placeholder="항목을 입력하세요">
        <button type="button" class="remove-field">제거</button>
    </div>
    <button type="button" id="add-field">필드 추가</button>
    <button type="submit">제출</button>
</form>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    var fieldIndex = 1;
    
    // 필드 추가
    $('#add-field').click(function() {
        var newField = $(`
            <div class="field-group">
                <input type="text" name="items[]" placeholder="항목을 입력하세요">
                <button type="button" class="remove-field">제거</button>
            </div>
        `);
        
        $(this).before(newField);
        newField.find('input').focus();
        fieldIndex++;
    });
    
    // 필드 제거 (이벤트 위임 사용)
    $(document).on('click', '.remove-field', function() {
        var $fieldGroup = $(this).closest('.field-group');
        
        if ($('.field-group').length > 1) {
            $fieldGroup.fadeOut(300, function() {
                $(this).remove();
            });
        } else {
            alert('최소 하나의 필드는 있어야 합니다.');
        }
    });
    
    // 폼 제출
    $('#dynamic-form').submit(function(e) {
        e.preventDefault();
        
        var items = [];
        $('input[name="items[]"]').each(function() {
            var value = $(this).val().trim();
            if (value) {
                items.push(value);
            }
        });
        
        console.log('제출된 항목들:', items);
        
        if (items.length === 0) {
            alert('최소 하나의 항목을 입력하세요.');
            return;
        }
        
        // 실제 서버 전송
        $.post('/submit', { items: items })
            .done(function(response) {
                alert('성공적으로 제출되었습니다!');
            })
            .fail(function() {
                alert('제출 중 오류가 발생했습니다.');
            });
    });
});
</syntaxhighlight>

=== 무한 스크롤 ===

<syntaxhighlight lang="html">
<div id="content">
    <div class="item">항목 1</div>
    <div class="item">항목 2</div>
</div>
<div id="loading" style="display: none;">로딩 중...</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    var page = 1;
    var loading = false;
    var hasMore = true;
    
    function loadMore() {
        if (loading || !hasMore) return;
        
        loading = true;
        $('#loading').show();
        
        $.ajax({
            url: '/api/items',
            data: { page: page },
            method: 'GET',
            dataType: 'json'
        })
        .done(function(response) {
            if (response.items.length === 0) {
                hasMore = false;
                $('#loading').text('더 이상 항목이 없습니다.');
                return;
            }
            
            response.items.forEach(function(item) {
                var $item = $('<div class="item">' + item.title + '</div>');
                $('#content').append($item);
            });
            
            page++;
        })
        .fail(function() {
            alert('데이터를 불러오는 중 오류가 발생했습니다.');
        })
        .always(function() {
            loading = false;
            $('#loading').hide();
        });
    }
    
    // 스크롤 이벤트
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= 
            $(document).height() - 100) {
            loadMore();
        }
    });
    
    // 초기 로드
    loadMore();
});
</syntaxhighlight>

=== 실시간 검색 ===

<syntaxhighlight lang="html">
<input type="text" id="search-input" placeholder="검색어를 입력하세요">
<div id="search-results"></div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    var searchTimer;
    var currentXHR;
    
    $('#search-input').on('input', function() {
        var query = $(this).val().trim();
        
        // 이전 타이머 클리어
        clearTimeout(searchTimer);
        
        // 이전 요청 취소
        if (currentXHR) {
            currentXHR.abort();
        }
        
        if (query.length < 2) {
            $('#search-results').empty();
            return;
        }
        
        // 500ms 후에 검색 실행 (디바운싱)
        searchTimer = setTimeout(function() {
            search(query);
        }, 500);
    });
    
    function search(query) {
        $('#search-results').html('<div>검색 중...</div>');
        
        currentXHR = $.ajax({
            url: '/api/search',
            data: { q: query },
            method: 'GET',
            dataType: 'json'
        })
        .done(function(response) {
            displayResults(response.results);
        })
        .fail(function(xhr) {
            if (xhr.statusText !== 'abort') {
                $('#search-results').html('<div>검색 중 오류가 발생했습니다.</div>');
            }
        });
    }
    
    function displayResults(results) {
        var $container = $('#search-results');
        $container.empty();
        
        if (results.length === 0) {
            $container.html('<div>검색 결과가 없습니다.</div>');
            return;
        }
        
        results.forEach(function(result) {
            var $item = $(`
                <div class="search-item">
                    <h3>${result.title}</h3>
                    <p>${result.description}</p>
                </div>
            `);
            
            $item.click(function() {
                window.location.href = result.url;
            });
            
            $container.append($item);
        });
    }
    
    // 검색 결과 외부 클릭 시 숨기기
    $(document).click(function(e) {
        if (!$(e.target).closest('#search-input, #search-results').length) {
            $('#search-results').empty();
        }
    });
});
</syntaxhighlight>

=== 탭 인터페이스 ===

<syntaxhighlight lang="html">
<div class="tab-container">
    <ul class="tab-menu">
        <li class="tab-item active" data-tab="tab1">탭 1</li>
        <li class="tab-item" data-tab="tab2">탭 2</li>
        <li class="tab-item" data-tab="tab3">탭 3</li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-panel active">탭 1 내용</div>
        <div id="tab2" class="tab-panel">탭 2 내용</div>
        <div id="tab3" class="tab-panel">탭 3 내용</div>
    </div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    $('.tab-item').click(function() {
        var tabId = $(this).data('tab');
        
        // 모든 탭 비활성화
        $('.tab-item').removeClass('active');
        $('.tab-panel').removeClass('active').hide();
        
        // 클릭된 탭 활성화
        $(this).addClass('active');
        $('#' + tabId).addClass('active').fadeIn(300);
        
        // URL 업데이트 (선택사항)
        history.pushState(null, null, '#' + tabId);
    });
    
    // 페이지 로드 시 URL 해시에 따라 탭 선택
    function initializeTab() {
        var hash = window.location.hash.substring(1);
        if (hash && $('#' + hash).length) {
            $('.tab-item[data-tab="' + hash + '"]').click();
        }
    }
    
    // 뒤로가기/앞으로가기 지원
    $(window).on('hashchange', function() {
        initializeTab();
    });
    
    initializeTab();
});
</syntaxhighlight>