[WEB] 08. jQuery

 

 

프론트단에서 코드를 작성하다보면 부족한 부분들이 많다.

기존의 코드에 부족한 코드들을 추가할 때 라이브러리,jar파일을 import해야한다.


이때 JS에 추가되면 좋은 기능들을 작성한 코드 모음집,

즉, 자바스크립트에서 발전한 라이브러리들 중 jQuery가 있다.

 

 

jQuery

 

CDN을 누르면 jQuery를 사용할 수 있는데

jQuery를 가져올 때 uncompressed는 압축되있지않은 파일이고

minified는 압축되어있는 파일로 minified를 가져오면 된다.

 

 

<스크립트로 jQuery>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

 

 

jQuery 명령어

 

1. 기본선택자

// id 선택
$('#elementId')

// 클래스 선택
$('.className')

// 태그 선택
$('p')

// 전체 선택
$('*')

 

2. 요소 추가 및 수정

// HTML 추가
$('#elementId').html('<p>새로운 내용</p>')

// 텍스트 추가
$('#elementId').text('새로운 텍스트')

// 속성 설정
$('#elementId').attr('src', 'image.jpg')

// CSS 설정
$('#elementId').css('color', 'blue')

 

3. 이벤트 처리

// 클릭 이벤트
$('#buttonId').click(function() {
    alert('버튼 클릭됨');
})

// 마우스 오버 이벤트
$('#elementId').hover(
    function() { $(this).css('background-color', 'yellow'); },
    function() { $(this).css('background-color', ''); }
)

// 입력 이벤트
$('#inputId').on('input', function() {
    console.log($(this).val());
})

 

4. 애니메이션

// 숨기기
$('#elementId').hide()

// 보이기
$('#elementId').show()

// 슬라이드 업
$('#elementId').slideUp()

// 슬라이드 다운
$('#elementId').slideDown()

// 페이드 아웃
$('#elementId').fadeOut()

// 페이드 인
$('#elementId').fadeIn()

// 애니메이션
$('#elementId').animate({ opacity: 0.5 }, 1000)

 

5. Ajax 요청

// GET 요청
$.get('url', function(data) {
    console.log(data);
})

// POST 요청
$.post('url', { key: 'value' }, function(data) {
    console.log(data);
})

// Ajax 설정
$.ajax({
    url: 'url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
})

 

6. 기타 유용한 메서드

// 요소 복제
$('#elementId').clone()

// 요소 삭제
$('#elementId').remove()

// 자식 요소 추가
$('#parentId').append('<div>자식 요소</div>')

// 자식 요소 제거
$('#parentId').empty()

 

 

 

2024.08.19