자주 사용하는 JQUERY 메서드 종류

선택자

1. $(): HTML 요소를 선택하는 기본 메서드입니다.

var divs = $('div'); // 모든 div 요소 선택

 

DOM 조작

1. text(): 요소의 텍스트를 가져오거나 설정합니다.

var text = $('#myDiv').text(); // 텍스트 가져오기
$('#myDiv').text('새로운 텍스트'); // 텍스트 설정하기

 

2. html(): 요소의 HTML 내용을 가져오거나 설정합니다.

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

 

3. val(): 폼 요소의 값을 가져오거나 설정합니다.

var inputValue = $('#myInput').val(); // 값 가져오기
$('#myInput').val('새로운 값'); // 값 설정하기

 

4. attr(): 요소의 속성을 가져오거나 설정합니다.

var hrefValue = $('#myLink').attr('href'); // 속성 값 가져오기
$('#myLink').attr('href', 'https://www.example.com'); // 속성 값 설정하기

 

스타일 및 클래스 조작

1. css(): 요소의 스타일을 가져오거나 설정합니다.

$('#myDiv').css('color', 'red'); // 스타일 설정하기
var color = $('#myDiv').css('color'); // 스타일 값 가져오기

 

2. addClass(): 요소에 클래스를 추가합니다.

$('#myDiv').addClass('newClass');

 

3. removeClass(): 요소에서 클래스를 제거합니다.

$('#myDiv').removeClass('oldClass');

 

이벤트 처리

1. click(): 클릭 이벤트를 처리합니다.

$('#myButton').click(function() {
    alert('Button clicked!');
});

 

2. on(): 다양한 이벤트를 처리할 수 있습니다.

$('#myDiv').on('mouseover', function() {
    $(this).css('background-color', 'yellow');
});

애니메이션

1. show(): 요소를 표시합니다.

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

 

2. hide(): 요소를 숨깁니다.

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

 

3. fadeIn(): 요소를 서서히 나타나게 합니다.

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

 

4. fadeOut(): 요소를 서서히 사라지게 합니다.

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

 

Ajax

1. $.ajax(): Ajax 요청을 처리합니다.

$.ajax({
    url: 'data.json',
    success: function(result) {
        console.log(result);
    }
});

 

$.ajax({
    url: 'https://api.example.com/data', // 요청을 보낼 URL
    type: 'GET', // HTTP 요청 방식 (GET, POST 등)
    dataType: 'json', // 서버에서 반환되는 데이터 형식 (json, xml, html 등)
    success: function(data) { // 요청이 성공했을 때 호출될 콜백 함수
        console.log(data); // 서버로부터 받은 데이터를 콘솔에 출력
    },
    error: function(xhr, status, error) { // 요청이 실패했을 때 호출될 콜백 함수
        console.error('Error:', status, error); // 오류 메시지 출력
    }
});

주요 옵션

• url: 요청을 보낼 URL입니다.

• type: HTTP 요청 방식으로, 기본값은 'GET'입니다.

• dataType: 서버에서 반환되는 데이터의 형식을 지정합니다. 주로 'json', 'xml', 'html' 등을 사용합니다.

• data: 서버로 보낼 데이터입니다. 객체 형식으로 전달할 수 있습니다.

• success: 요청이 성공했을 때 호출될 콜백 함수입니다. 서버에서 반환된 데이터가 매개변수로 전달됩니다.

• error: 요청이 실패했을 때 호출될 콜백 함수입니다. 오류 정보가 매개변수로 전달됩니다.

추가 기능들

1. each(): 각 요소를 반복 처리합니다.

$('div').each(function(index) {
    console.log(index + ': ' + $(this).text());
});

2. filter(): 특정 조건을 만족하는 요소를 선택합니다.

$('div').filter('.active').css('color', 'red');