[JavaScript] JQuery

 

 

 

제이쿼리는 자바스크립트 코드를 간결하게 축약시키 위해 사용된다.

제이쿼리를 사용해 작성된 코드는 어떤 브라우저에서도 동작함이 보장된다.

 

직접 다운로드해서 사용하는 방법과 구글 cdn을 사용하는 방법이 있는데, 구글 cdn을 사용하도록 하자.

이 방법이 로딩 시간을 더 짧게 만들어준다.

 

 

 

헤드 내부에서 스크립트를 정의할 때 위의 cdn을 사용하면 된다.

 

 

 

selector 부분은 CSS 선택자 문법이 들어간다.

selector 로 적용할 대상을 정하고, action() 으로 어떤 작업을 수행할 지 정한다.

 

$(this).hide() : 현재 element를 숨긴다.

$("p").hide() : p 태그를 숨긴다.

 

 

이런 식으로 자바스크립트만 사용 할 때 보다 훨씬 간결하게 사용할 수 있다.

 

 

 

 

아직 준비되지 않은 요소에 대해 코드를 실행하는걸 방지하기 위해 위와 같이 ready 함수 내부에 로직을 작성한다.

 

 

 

 

제이쿼리에서 사용하는 이벤트들은 자바스크립트에서 사용하는 이벤트와 겹치는 부분이 많다.

그때 그때 찾아서 사용하자.

 

 

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "yellow");
  });
  $("input").blur(function(){
    $(this).css("background-color", "green");
  });
});

 

 

예시를 하나 살펴보자.

CSS 선택자로 input element를 가져왔다.

input element가 focus 상황이면 this (여기서는 input element) 의 배경을 변경한다.

 

 

 

JQuery Effect로 제공하는 함수들에 대해 살펴보자.

 

1. Hide / Show 

 

 

선택된 요소를 숨기거나 보여주는 작업을 한다.

인자 speed 로 숨기거나 보여주는 작업의 속도를 지정할 수 있다. (fast slow 혹은 milisecond 단위로 지정함)

인자 callback 으로 hide / show 함수 이후 실행할 함수를 지정할 수 있다.

 

 

2. Toggle

 

hide 와 show 작업을 Toggle 형식으로 수행한다.

hide 상태에서 누르면 show / show 상태에서 누르면 hide

 

 

3. Fade

 

fadeIn() : 기본적으로 show 함수와 같은 동작을 수행하지만, 시간 차를 두고 수행한다. (https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein)

 

fadeOut() : hide와 같은 동작을 수행하지만, 시간 차를 두고 수행한다.

 

fadeToggle() : 생각하는 그대로이다.

 

fadeTo() : fadeIn 함수와 같은 동작을 수행하지만, 최종적으로 보여지는 화면의 Opacity를 정의한다.

 

 

 

4. Slide

 

slideDown() : show와 같은 동작을 수행하지만 매끄럽게 내려온다.

 

slideUp() : hide와 같은 동작을 수행하지만 매끄럽게 올라간다.

 

slideToggle() : 생각하는 그대로..

 

pannel을 구현할 때 자주 사용된다.

 

 

 

5. Animate

 

(https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_multicss)

선택된 요소에 대해 지정한 애니메이션을 실행한다.

 

CSS로 애니메이션을 지정할 때 모든 멤버의 이름은 camel-case로 작성해야 한다.

 

+= / -= 를 연산자를 사용해 기본 값을 기준으로 값을 사용할 수 있다.

 

애니메이션 지정 시 toggle show hide 등 여러 요소를 사용할 수 있으니.. 필요 시 찾아서 사용하자.

 

여러 가지 애니메이션을 한 번에 지정하는 것도 가능하다.

 

 

stop : 애니메이션이 진행 도중 중단한다.

 

 

stopAll은 false가 default 값이다.

 

총 4가지를 사용할 수 있는데.. 빠른 이해를 위해 각각을 한 번씩 사용해보자.

 

 

 

 

JQuery에서 HTML 요소에 접근하는 방법에 대해 살펴보자.

 

 

 

1. text() : innerHTML 값을 가져온다.

 

2. html() : innerHTML 내부에 html 요소가 있으면 그 요소도 함께 가져온다.

 

3. val() : input 태그의 value 값을 가져온다.

 

4. attr() : 해당 요소의 attribute 값을 가져온다.

 

위의 함수를 사용해 element에 값을 넣어 줄 수도 있고, callback 함수를 사용할 수도 있다.

 

5. append() : 특정 요소를 선택된 요소의 마지막에 추가한다.

 

6. prepend() : 특정 요소를 선택된 요소의 시작 부분에 추가한다.

 

7. after() : 한 번에 append 할 때 사용된다.

 

8. before() : 한 번에 prepend 할 때 사용된다.

 

9. remove() : 현재 선택된 요소와 그 자식 요소까지 함께 삭제한다. 인자로 삭제할 요소를 선택 할 수도 있다.

 

10. empty() : 현재 선택된 요소의 자식 요소만 삭제한다.

 

11. addClass() : 선택된 요소에 클래스를 추가한다.

 

12. removeClass() : 선택된 요소의 클래스를 제거한다.

 

13. toggleClass() : 말 그대로..

 

14. css() : 선택된 요소의 css를 조작한다.

 

15. width() : 인자로 숫자를 넘기면 선택된 요소의 width 속성을 변경할 수 있고, 속성을 주지 않으면 선택된 요소의 width 값을 가져온다. height 에도 같은 함수가 있다.

 

 

 

JQuery를 사용하면 DOM 요소에 더 쉽게 접근할 수 있다.

 

 

1. parent() : 선택된 요소의 바로 윗 부모를 가리킨다.

 

2. parents() : 선택된 요소의 모든 부모를 가리킨다.

 

3. parentsUntil() : 선택된 요소의 부모를 찾는데, 인자로 특정 요소까지만 찾게 한다.

 

4. children() : 요소의 바로 밑 자식을 가리킨다.

 

5. find() : 요소의 자식 중 특정 조건을 만족하는 자식을 가리킨다. 인자로 *을 입력하면 모든 자식을 가리킬 수 있다.

 

6. siblings() : 요소의 모든 형제 노드를 가리킨다.

 

7. next() : 요소의 아래에 위치하는 형제 하나를 가리킨다.

 

8. nextAll() : 요소의 아래에 위치하는 모든 형제를 가리킨다.

 

9. nextUntil() : 생각하는 그대로..

 

next와 유사한 함수로 prev함수가 있다.

 

10. first : 선택자로 선택된 요소 중 첫 번째 요소를 가리킨다.