jQuery

Javascript 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 javascript 라이브러리

jQuery 장점

• 주요 웹 브라우저의 구버정를 포함한 대부분의 브라우저에서 지원 가능
• HTML DOM과 CSS스타일도 손쉽게 조작가능
• 애니메이션 효과나 대화형 처리를 간단하게 적용
• 같은 동작을 하더라도 더욱 짧게 구현 가능
• 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

jQuery의 기초

• $ ( 선택자 ) . 동작함수 ( );
  • $는 jQuery의함수의 축약 형태로 식별자 역할
• 여러 요소에 한번에 적용 가능 // 이 점이 js와 다르다.
  • ex) $('button').css('color', 'red')

---

• 값 가져오기

  • $ (선택자). val ( ); // var value = $ ("input").val( );

• 값 설정하기

  • $ (선택자).val ("설정할 값"); // $ ("input").val("설정완료");

• style변경하기

  • $ ( "선택자" ).css ( "속성", "속성값");

• 속성 변경하기

  • $ ( "선택자" ).attr ( "속성", "속성값");

• Text 변경하기

  • $ ( "선택자" ).text ( "글자" );

• HTML 변경하기

  • $ ( "선택자" ).html ( html );

    ---

• 요소 추가하기

  • $ ( "선택자" ).append ( 요소 ); // 선택된 요소의 자식 요소 중 마지막으로 추가
  • $ ( "선택자" ).prepend ( 요소 ); // 선택된 요소의 자식 요소 중 첫번째로 추가
  • $ ( "선택자" ).after ( 요소 ); // 선택된 요소의 형제 요소로 다음 형제로 추가

    ---

• 요소 삭제하기

  • $ ( "선택자" ).remove ( );
    • 선택된 요소를 DOM 트리에서 삭제
    • 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제.
  • $ ( "선택자" ).empty ( );
    - 선택한 요소의 자식 요소를 모두 삭제
    - 선택한 요소는 남아 있고 그 안이 다 비워진다.

    ---

• 요소 탐색하기

  • $( 선택자 ).parent( ).함수( ) // 바로 위에 존재하는 하나의 부모 요소 선택
  • $( 선택자 ).parents( ).함수( ) // 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
  • $( 선택자 ).next( ).함수( ) // 선택된 요소 바로 다음에 위치한 형제 요소 선택
  • $( 선택자 ).prev( ).함수( ) // 선택된 요소 바로 이전에 위치한 형제 요소 선택
  • $( 선택자 ).children( ).함수( ) // 선택된 요소의 자식 요소 모두 선택

    ---

• 클래스 조작하기

  • $( 선택자 ).addClass( "클래스명" ) // 선택된 요소에 클래스 추가
  • $( 선택자 ).removeClass( "클래스명" ) // 선택된 요소에 클래스 삭제
  • $( 선택자 ).hasClass( "클래스명" ) // 선택된 요소에 클래스 여부 확인
  • $( 선택자 ).toggleClass( "클래스명" ) // 선택된 요소에 클래스가 있으면 추가, 없으면 삭제
  • $( 선택자 ).switchClass( “클래스명1”, “클래스명2”, 시간 )
    • 클래스1을 클래스2로 바꾼다.
    • 이때, 시간은 클래스1을 클래스2로 바꾸는데 걸리는 시간이다.

jQuery 이벤트리스너

이벤트가 발생했을 때 그 처리를 담당하는 함수

jQuery에서는 이벤트 이름으로 메서드가 존재함

• click 했을 때 // $ ( '선택자' ).click ( function ( ) { } )
  • Js code.
    
  • jQuery code.
    
• $ ( '선택자' ).mouseover ( function ( ) { } )
• $ ( '선택자' ).hover ( function ( ) { } )
• $ ( '선택자' ).scroll ( function ( ) { } )
• $ ( '선택자' ).keydown ( function ( ) { } ) // 키보드 이벤트
• $ ( '선택자' ).keyup ( function ( ) { } ) // 키보드 이벤트