풀스택 11일차

jQuery

jQuery선택자

기본 선택자:jQuery 의 $() 함수를 사용하여 요소를 선택합니다. CSS 선택자와 유사한 문법을 사용한다.

• ID 선택: $('#id')
• 클래스 선택: $('.class')
• 태그 선택: $('tag')
• 복합 선택: $('div.class'), $('ul li')

<div id="container">
    <p class="text">Hello, World!</p>
</div>
<script>
    $(document).ready(function() {
        $('#container .text').css('color', 'blue');
    });
</script>

 

요소 속성 조작

텍스트. html 변경

 

 

• text(): 요소의 텍스트를 설정하거나 가져온다 .
  • 설정: $('#element').text('새 텍스트');
  • 가져오기: var text = $('#element').text();
• html(): 요소의 HTML 콘텐츠를 설정하거나 가져온다.
  • 설정: $('#element').html('<p>새 내용</p>');
  • 가져오기: var html = $('#element').html();

속성, 값 설정

 

• attr(): 요소의 속성을 설정하거나 가져온다 .
  • 설정: $('#element').attr('src', 'image.jpg');
  • 가져오기: var src = $('#element').attr('src');
• val(): <input>, <select>, <textarea>의 값을 설정하거나 가져온다 .
  • 설정: $('#input').val('새 값');
  • 가져오기: var value = $('#input').val();

스타일 조작

css(): 요소의 스타일을 설정하거나 가져온다  .

• 설정: $('#element').css('color', 'red');
• 가져오기: var color = $('#element').css('color');

클래스 조작

ddClass(), RemoveClass(), toggleClass(): 요소의 클래스를 조작한다.

• 추가: $('#element').addClass('newClass');
• 제거: $('#element').removeClass('oldClass');
• 토글: $('#element').toggleClass('toggleClass');

 

기본 이벤트 처리

on(): 다양한 이벤트 핸들러를 등록한다. 동적 요소에도 적용 가능하다.

$('#button').on('click', function() {
    alert('버튼 클릭됨되었음!');
});

 

 

단축 메서드: click(), change(), keydown() ...

• 클릭: $('#button').click(function() { /* 처리 */ });
• 변경: $('#input').change(function() { /* 처리 */ });

동적 요소 이벤트 처리

이벤트 위임: 부모 요소에 이벤트를 등록하여 동적으로 생성된 자식 요소의 이벤트를 처리한다

$(document).on('click', '#dynamicButton', function() {
    alert('동적으로 생성된 버튼 클릭되었음!');
});

 

DOM조작

요소 추가,제거

append(): 새로운 요소를 기존 요소의 끝에 추가한다.

$('#list').append('<li>새 항목</li>');

remove(): 특정 요소를 DOM에서 제거합니다.

$('#list li:first').remove();

 

요소 속성과 스타일 변경

속성 변경: attr() 메서드를 사용하여 요소의 속성을 변경한다.

$('#image').attr('src', 'newImage.jpg').attr('alt', '새로운 이미지');

스타일 조작: css() 메서드를 사용하여 스타일 속성을 변경합니다.

$('#image').css('border', '2px solid red');

 

시각효과

시각적 효과:  fadeIn(), fadeOut(), slideUp(), slideDown() 등을 사용하여 요소의 애니메이션 효과를 적용한다.

$('#element').fadeIn().fadeOut().slideUp().slideDown();

 

animate(): CSS 속성을 애니메이션으로 변경한다

$('#element').animate({ left: '250px' }, 1000);