Jquery 기본문법

jQuery란?

- javascript 라이브러리로 더 간편하게 사용하기 위해 만들어졌다. 주로 DOM,이벤트,애니메이션,AJAX 요청 등을 쉽게 할 수 있게 도와준다.

 

jQuery와 javaScript 의 차이점

1. 코드 간결성 : 일반적인 javascript 복잡한 작업을 간단하게 처리할 수 있다. 즉 짧은 코드로 처리가 가능하다

2. 호환성 : 브라우저 호환성을 처리해주기 때문에, 다양한 브라우저에서 동일하게 작동하는 코드를 쉽게 작성이 가능하다.

javaScript 는 브라우저 별로 코드가 다르게 작동할 수 있어 호환성 문제가 발생할 수 있다.

3. 기능 : ajax,애니메이션,이벤트 핸들링 등을 간단하고 효율적으로 구현이 가능한 함수들이 내장되어있다.

JavaScript:

document.getElementById('myElement').style.color = 'red';

jQuery:

$('#myElement').css('color', 'red');

 

기본 문법에 대해 알아보자

// ID로 요소 선택
$('#myElement');

// 클래스 이름으로 요소 선택
$('.myClass');

// 태그 이름으로 요소 선택
$('p');

클릭 이벤트 처리

// 클릭 이벤트 처리
$('#myButton').on('click', function() {
  alert('버튼이 클릭되었습니다!');
});

CSS 조작

// 요소의 색상 변경
$('#myElement').css('color', 'blue');

DOM 조작

// 요소의 내용을 변경
$('#myElement').html('<p>새로운 내용</p>');

// 요소에 내용 추가
$('#myElement').append('<p>추가된 내용</p>');