Storage

id, class, name으로 접근

$("#id") // id는 1개만가능

$(".class") // class는 중복가능

$("tag_name[name=name]") // 

값 가져오기 및 값변경하기

.val();  // 값을 가져올때나 변경할때

.text(); // text만 가져오거나 변경

.html(); // text+html태그 가져오거나 변경

.empty(); // 값 비우기 .val("");랑 비슷하다고 보면됩니다.

.remove(); // tag까지 제거

포커스

.focus(); // focus 줄때

.blur(); // focus 벗어날때

클릭

.click(); // click 이벤트

마우스이벤트

.mouseenter(); // 마우스on 이벤트

.mouseleave(); // 마우스out 이벤트

.hover(); // 마우스오버이벤트

애니메이션

.fadeIn() // 애니메이션 서서히 생기는 (값안에 시간 or slow fast입력시 속도조절가능)

.fadeOut() // 서서히 사라지는

.slideUp() // 위로 사라짐 시간조절 가능

.slideDown() // 아래로 나타남

animate({},시간값);

animate({},function(){}); // 애니메이션이 끝나고 함수안에 또 애니메이션을 넣을수있음

클래스 css

.addClass('추가할 클래스 이름')

.removeClass('제거할 클래스 이름');

.attr('속성','속성값'); // src="", alt="", title="" 값 변경

.css('css속성','값'); // float, display, width, height, color, background, margin, padding 등 여러 속성 제어가능 

태그

.hide(); // 숨기기

.show(); // 나타내기

대상1.append(대상2); // 대상1 태그안에 대상2 태그를 넣을수있음

대상2.appendTo(대상1); // 대상1 태그안에 대상2 태그를 넣을수있음

text창 활성화 비활성화

$("input").prop('disabled', true); // 비활성화

$("input").prop('disabled', false);  // 활성화

Jquery 사용하기

제이쿼리란?

jQuery는 HTML 속 클라이언트 사이드 스크립트 언어를 단순화 하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리입니다. 존 레식에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었습니다. 현재 가장 인기있는 JavaScript 라이브러리이며 표준에 가까운 점유율을 자랑합니다.

기능적으로야 더 좋은 라이브러리들도 많지만, jQuery가 순식간에 업계를 장악한 특장점은 바로 무지하게 쉽고 간편하다는 점입니다. 

비프로그래머인 웹디자이너들도 어렵지않게 이해할 수 있을 만큼 쉬운 편이며, DOM구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할정도입니다.

제이쿼리 다운로드

제이쿼리를 사용하기 위해서는 js파일을 다운로드 받아서  직접 import해주거나 url로 import해주시면 됩니다.

https://jquery.com/download/ 

위에서 다운로드 받을 수 있습니다.

import하기

다운로드를 받으셨다면 프로젝트 폴더에 넣어주시고 경로에 맞게 작성해주시면 됩니다.

<script src="/js/jquery-1.12.4.js"></script>

다운로드 없이 사용하시려면 아래를 입력해주시면 됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>