[JQuery] 기초

1. 개요
   1. 문법이 긴 자바스크립트의 단점을 보안하기위해, 자바스크립트를 기반으로 제작된 라이브러리. 자바스크립트는 '요소객체'의 '속성'을 통한 조회와 대입이 주인 반면, 제이쿼리는 '제이쿼리 객체'의 '메소드'로 값을 대입하거나 불러온다.
   2. 장점
      1. DOM 요소와 관련된 스크립트를 보다 쉽게 구현 가능
      2. 확장 플러그인, 오픈 API등을 지원
      3. AJAX, 이벤트 처리를 폭넓게 지원
   3. 사용방법 : 후술할 두가지 방법 다 가능.
      • 사용하기 위해서는 jQuery 문서를 업로드하여 script 태그의 src 속성에 주소를 입력
      • CDN을 불러와서 붙여넣을 수도 있다.
   4. window.onload()와 비슷한 기능을 하는 jQuery 메소드. document가 로드되면 작동한다. 
      1. jQuery(document).ready(function(){ //코드들... })
      2. $(document).ready(function(){ //코드들... })
      3. $(function(){ //코드들... })
   5. 변수에 담을 때는 $를 붙여서 jQuery 객체임을 표시한다.

       var $pTags = $('p');​

2. 선택자
   1. 기본 : 태그, 아이디, 클래스 선택자
   2. 추가적
      1. 입력양식 선택자 type -> :text, :radio, :number, :checkbox ...
      2. 선택 상태 선택자 :checked, :selected
      3. 상태 선택자 :enabled, :disabled
   3. 필터링

      선택자	의미
      :first	처음 요소
      :last	마지막 요소
      :even	짝수번 (0, 2, 4, 6, ...)
      :odd	홀수번 (1, 3, 5, 7, ...)

3. 메소드
   1. 기본 메소드

      메소드	의미
      .html('내용')	content를 '내용'으로 바꿈. 인자가 없는 경우 현재 들어있는 값을 반환
      .text('내용')	content를 '내용'으로 바꿈. 인자가 없는 경우 현재 들어있는 값을 반환
      .attr('속성', '속성값')	일반 속성을 변경. 속성값을 생략하면 속성값을 반환함
      .css('스타일속성','속성값')	스타일 속성을 변경. 속성값을 생략하면 속성값을 반환함
      .val('내용')	value를 '내용'으로 바꿈. 인자가 없는 경우 현재 value를 반환
      .prop(속성, 속성값)	특정 속성. 속성값인 요소를 선택
      .addClass('클래스명')	클래스를 추가
      .removeClass('클래스명')	클래스를 삭제
      .is('내용')	현재 요소가 '내용'인지 아닌지 확인. '내용'은 선택자, 표현식 등 다양함

      1. 메소드의 인자로 들어가는 값은 객체로 묶어서 전달할 수 있다.
      2. 메소드 체이닝을 잘 쓸 것. 순차적으로 작동함.
   2. 필터링 메소드

      메소드	의미
      .first()	jQuery 배열 중 가장 첫번째 값
      .last()	jQuery 배열 중 가장 마지막 값
      .filter('선택자')	jQuery 배열 중 해당 선택자로 한번 더 제외한 값
      .not('선택자')	jQuery 배열 중 해당 선택자가 아닌 값
      .eq(인덱스)	jQuery 배열의 인덱스 0~n번 요소

   3. 탐색 메소드
      1. 조상

         메소드	의미
         .parent()	바로 위 부모요소 1개 선택
         .parents()	모든 상위 요소를 선택
         .parents('선택자')	모든 상위 요소 중에서 선택자와 일치하는 요소
         .parentsUntil('선택자')	자신부터 제시한 선택자 전까지의 모든 상위 요소

      2. 자손

         메소드	의미
         .children()	자식 요소(바로 하위)
         .children('선택자')	자식 요소 중에서 선택자와 일치
         .find('선택자')	모든 후손 요소 중에서 선택자와 일치

      3. 동위 : 같은 부모 아래 같은 레벨. 형제 요소라고도 함

         메소드	의미
         .siblings()	자신을 제외한 동위 요소
         .siblings('선택자')	자신을 제외한 동유 요소 중에 선택자와 일치
         .next()	바로 다음 동위 요소
         .nextAll()	내 뒤에 있는 모든 동위 요소
         .nextUntil('선택자')	내 뒤에 있는, 선택자와 일치하는 요소 전까지
         .prev()	바로 앞 동위 요소
         .prevAll()	내 앞에 있는 모든 동위 요소
         .prevUntil()	내 앞에 있는, 선택자와 일치하는 요소 전까지

   4. 요소 생성 및 제거 메소드
      1. 삽입

         	A 요소 내의 ㅁ에 B 추가	B를 A요소 내의 ㅁ에 추가
         뒤	$(A).append(B)	$(B).appendTo(A)
         앞	$(A).prepend(B)	$(B).prependTo(A)
         뒤	$(A).after(B)	$(B).insertAfter(A)
         앞	$(A).before(B)	$(B).insertBefore(A)

      2. 복제

         메소드	의미	반환값
         .clone(true/false/비우기)	요소태그 복사. true는 이벤트 복사, false가 기본값	복사된 jQuery 객체

      3. 잘라내기

         메소드	의미	반환형
         .detach	요소의 이벤트까지 모두 잘라내기	잘라낸 요소객체

      4. 제거

         메소드	의미	반환형
         .remove()	요소를 삭제하고 값을 반환. 이벤트는 오지 않음	제거된 요소객체
         .empty()	'내부'를 비우기	현재 선택된 jQuery 객체

   5. 추가적인 메소드
      1. 반복문 .each

         $.each(객체or배열, function(key, value){
         	//코드들...
         })
         
         $(배열).each(function(key, value){
         	//코드들...
         })​

         1. 객체 : 모든 '속성'에 순차적으로 접근
         2. 배열 : 모든 '요소'에 순차적으로 접근
   6. 이벤트 메소드
      1. 이벤트 핸들러 : jQuery객체.이벤트타입(function(){ //코드들... };
      2. .on('이벤트명', function(){})
         
         1. 함수를 객체로 묶어서 다중으로 이벤트 걸기가 가능함
      3. .on('이벤트명', '하위요소선택자', function(){})
         1. 동적으로 만든 요소에도 현재 이벤트 적용 가능. (물론 자신->부모->자식 요소로 찾아 적용해도 됨)
      4. 일회성 이벤트

         $(function () {
             $('#test').one('click', function () {
                 alert('once');
             })
         })​

      5. 키보드 관련 이벤트

         메소드	의미
         .keyDown()	키가 내려가면 count++
         .keyPress()	키가 눌리면 count++
         .keyUp()	키가 떼지면 count++

         1. $(this).val().length로 했을 때 keyDown은 0부터 시작하므로, 글자수를 세는 건 .keyUp() 메소드가 좋다.
      6. Effect 메소드 : 인자로 ms 단위의 시간을 받아 애니메이션 시간을 지정

         메소드	의미
         .show()	확대 나타나기
         .hide()	축소 숨기기
         .toggle()	나타내기/숨기기 전환
         .fadeIn()	서서히 나타나기
         .fadeOut()	서서히 사라지기
         .fadeToggle()	서서히 전환
         .slideDown()	밀어 내려가기
         .slideUp()	밀어 올라가기

 

---

hove메소드는 mouseenter/mouseout의 두가지 function이 하나로 합쳐진 메소드. 기능을 하는 이벤트 타입이 정해져있기 때문에 on메소드와 비슷한 기능. 이벤트 타겟 X