jQuery) 40번째 회고

---

1. 입력자료 양식

jQuery를 사용하면 폼(form) 요소의 입력 자료를 쉽게 조작하고 처리할 수 있다.
주로 사용되는 메소드로는 val()과 serialize()가 있다.

 

💡 주요 메소드

 

1️⃣ val()
입력 필드의 값을 가져오거나 설정할 수 있다.

// 값 가져오기
let inputValue = $('#myInput').val();

// 값 설정하기
$('#myInput').val('new value');

 

2️⃣ serialize()
폼의 모든 입력 데이터를 URL 인코딩 된 문자열로 직렬화한다. 주로 Ajax 요청 시 사용된다.

let formData = $('#myForm').serialize();

 

3️⃣ serializeArray()
폼의 모든 입력 데이터를 배열로 직렬화한다.
각 배열 요소는 {name: 'inputName', value: 'inputValue'} 형태를 가다.

let formArray = $('#myForm').serializeArray();

---

2. jQuery에서 AJAX 처리

jQuery는 Ajax 요청을 쉽게 처리할 수 있는 다양한 메소드를 제공한다.
주로 사용되는 메소드로는 $.ajax(), $.get(), $.post() 등이 있다.

 

💡 주요 메소드

1️⃣ $.ajax()
가장 범용적인 Ajax 메서드로, 다양한 설정을 지원한다.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

 

2️⃣ $.get()
GET 요청을 간단히 처리할 수 있다.

$.get('https://api.example.com/data', function(data) {
    console.log(data);
});

 

3️⃣ $.post()
POST 요청을 간단히 처리할 수 있다.

$.post('https://api.example.com/data', { key: 'value' }, function(data) {
    console.log(data);
});

 

💻 폼 데이터를 사용한 Ajax POST 요청 예시 코드

$('#myForm').submit(function(event) {
    event.preventDefault(); // 폼의 기본 제출 동작을 막음

    let formData = $(this).serialize(); // 폼 데이터를 직렬화

    $.ajax({
        url: 'https://api.example.com/submit',
        method: 'POST',
        data: formData,
        success: function(response) {
            console.log('Form submitted successfully:', response);
        },
        error: function(xhr, status, error) {
            console.error('Submission error:', error);
        }
    });
});

---

3. jQuery Effect

jQuery는 웹 페이지 요소에 다양한 시각적 효과를 적용할 수 있는 메소드를 제공한다.
주로 사용되는 효과 메소드로는 hide(), show(), toggle(), fadeIn(), fadeOut(), slideUp(), slideDown(), animate() 등이 있다.

 

💡 주요 메소드

1️⃣ hide()
요소를 숨긴다.

$('#myElement').hide();

 

2️⃣ show()
숨겨진 요소를 표시한다.

$('#myElement').show();

 

3️⃣ toggle()
요소가 보이는 상태와 숨겨진 상태를 토글 한다.

$('#myElement').toggle();

 

4️⃣ fadeIn()
요소를 서서히 나타나게 한다.

$('#myElement').fadeIn();

 

5️⃣ fadeOut()
요소를 서서히 사라지게 한다.

$('#myElement').fadeOut();

 

6️⃣ slideUp()
요소를 슬라이드 업하여 숨긴다.

$('#myElement').slideUp();

 

7️⃣ slideDown()
요소를 슬라이드 다운하여 표시한다.

$('#myElement').slideDown();

 

8️⃣ animate()
CSS 속성을 애니메이션 효과로 변경한다.

$('#myElement').animate({ 
    width: '50%', 
    opacity: 0.5 
}, 1000);

 

💻 기본 효과 사용 예제 코드

$(document).ready(function() {
    $('#hideButton').click(function() {
        $('#myElement').hide();
    });

    $('#showButton').click(function() {
        $('#myElement').show();
    });

    $('#toggleButton').click(function() {
        $('#myElement').toggle();
    });

    $('#fadeInButton').click(function() {
        $('#myElement').fadeIn();
    });

    $('#fadeOutButton').click(function() {
        $('#myElement').fadeOut();
    });

    $('#slideUpButton').click(function() {
        $('#myElement').slideUp();
    });

    $('#slideDownButton').click(function() {
        $('#myElement').slideDown();
    });

    $('#animateButton').click(function() {
        $('#myElement').animate({ 
            width: '50%', 
            opacity: 0.5 
        }, 1000);
    });
});

(4) jQuery Effect 종류 & 사용법 - 우선코딩

- 출처 : codingfirst.kr