JQuery 기본 문법
JQuery란? javascript를 사용함에 있어 좀더 편리하도록 하는 오픈소스 라이브러리 입니다.
하지만 인터넷 브라우저가 IE가 대부분 이던 과거와는 달리 오늘날은 chrom과 같은 브라우저 에서 더 우수한 렌더링 엔진을 탑재하였고 빠른 버전 업그레이드를 위해 웹 표준을 신속하게 반영하였습니다.
그 결과 제이쿼리와 같은 무거운 라이브러리를 쓰지 않고도 양질의 웹 어플리케이션을 구현할수 있게 되었습니다.
하지만 개발자들 사이에서 위상이 예전과 같지 않다고 해도 여전히 사용률은 높고 기존에 jQuery로 작성된 웹 어플리케이션 또한 많은 상황 입니다.
따라서 제이쿼리의 기초적인 문법과 축약함수들을 알아둘 필요는 있다고 생각합니다.
[제이쿼리 기초문법]
1. 셀렉터
//바닐라 js
document.getElementByID('title').innerHTML = '바보';
document.getElementByID('title').stlye.color = 'red';
//jquery
$('#tiltle').html('바보');
$('#tiltle').css('color','red');- 페이지 내의 ID가 title이라는걸 찾아서 내용을 '바보'로 바꾸라는 의미입니다.
- JQuery가 훨씬 짧게 쓸수 있습니다.
- JQuery는 셀렉터내부의 값이 ID인지 Class 인지 등을 " #, . " 로 표현합니다.
//바닐라 js
document.getElementByClassName('greeting')[0].innerHTML = '안녕';
document.getElementByClassName('greeting')[1].innerHTML = '안녕';
document.getElementByClassName('greeting')[2].innerHTML = '안녕';
//jquery
$('.greeting').html('안녕')
$('.greeting').eq(0).html('안녕')- getElementByClassName()은 class명으로 찾아주는 셀렉터 입니다.
- 항상 뒤에 [0]와 같은 인덱스 값을 적어야 해서 전줍 선택하려면 인댁스 수만큼 작성해야 한다.
(querySelectorAll() 이라는 유사품 셀렉터도 있습니다.)
-반면 jquery는 셀렉터로 요소를 찾을경우 요소가 여러개 있어도 한번에 다 바꿔줍니다.
- 뒤에 eq()라는 명령어를 통해 인덱스 값을 지정 가능합니다.
2. 간편한 애니메이션
- 웹페이지를 구현하는데 있어 기본적인 애니메이션들을 제공하는 함수가 있습니다.
- 바닐라js로 작성하려면 시간이 걸리지만 jquery를 사용하면 손쉽게 구현할 수 있습니다.
| 함수 | 기능 |
$("h1").hide(); |
사라지는 효과 |
$("h1").show(); |
나타나는 효과 |
$("h1").fadeIn(); |
서서히 나타나는 효과 |
$("h1").fadeOut(); |
서서히 사라지는 효과 |
$("h1").slideDown(); |
위에서 아래로 내려오는 효과 |
$("h1").slideUp(); |
아래에서 위로 올라오는 효과 |
| $("h1").toggle(); | toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. |
3. form의 값을 가져오거나 설정하는 방법
let hi = $('#text-input').val();- val() : 선택한 양식의 값을 가져옵니다.
- hi 변수에 id 가 text-input 인 요소의 값을 저장
let hi = $('#text-input').val('ABCDE');- val('값'): 선택한 양식의 값을 변경합니다.
- hi1 변수에 id 가 text-input 인 요소의 값을 'ABCDE'로 변경하여 저장
4. 제이쿼리 함수를 순서대로 동작 시키고 싶은 경우
바닐라 js
$('.black-background').show();
$('.black-background').animate({ marginTop : '0px' });이렇게 쓰면 무조건 show()를 먼저 해주고 animate()를 그 다음에 해줄 것 같지만 경우에 따라서 둘 중에 더 빠른걸 먼저 실행시킬 수도 있습니다.
jQuery
$('.black-background').show().animate({ marginTop : '0px' });- 이렇게 쓰면 무조건 show()를 먼저 해주고 animate()를 그 다음에 해줍니다.
각자 다른요소를 순차적으로 적용시키고 싶을때!
$('A요소').animate({ width: '250px'}, 1000, function() {
$('B요소').animate({ height : '500px'} });
});- animate 함수의 세번째 파라미터로 function(){} 를 집어넣으신 다음 중괄호 안에 여러분이 첫 animate가 끝났을 때 실 행할 코드를 적어주시면 됩니다.
- 콜백함수는 이렇게 뭔가 순차적으로 실행시킬 때 많이 사용합니다.