jQuery, 제이쿼리 기본 메소드 총정리

 

이벤트 발생

• 마우스 클릭 이벤트  : $(선택자).click( function( ){  });
• 마우스 더블 클릭 이벤트 : $(선택자).dblclick( function( ){  });

 

this

• 자신을 지칭하는 것
• $(this).html() 이라고 쓰면, 자신의 html 값을 가져오라는 것.

 

 

선택자

전체선택자 : *

• $(function( ) { 
         $( ' * ' ).css('color','blue');
  });

 

태그선택자 : '태그명'

• $( ' h1' ).css('color','blue');

 

클래스선택자 : '.클래스명'

• $( ' .j' ).css('color','blue');
• 두가지 클래스를 모두 가지는 태그 선택 $( ' .j.select' ).css('color','blue');

 

아이디선택자 : '#아이디명'

• $( ' #jq ' ).css('color','blue');
• 특정id 속성을 가지는 태그 선택 : $( 'h1#jq ' ).css('color','blue');

 

자식선택자 : 부모 > 자식

• $('body > *')

후손 선택자 : 요소A 요소B

• $('body *')

 

이벤트가 발생한 노드를 기준으로 자식을 찾아야 하는 경우 아래와 같이 한다.

• $(this).find("td")

 

배열 관리

• $.each(object, function(index,item){  } )
• $(selector).each(function (index, item) {  })

 

 

객체 생성

• $ ( ) : 문서 객체 생성
• $('<H1></H1>');
• 객체 생성 후 html( ), text( ), attr( )로 내용을 추가 할 수 있다.
• appendTo('body') 로 body에 해당 정보를 추가 할 수 있다.
• 객체추가

 

클래스 추가 / 삭제

•  $("h1").addClass("클래스명");
• $("h1").removeClass("클래스명t");

 

문서 객체의 속성 attr( ) getter / setter

• attr( ) 속성과 관련된 모든 기능을 수행
• 보통 첫번째 문석 객체의 속성을 출력
• setter로 사용
  • var scr = $("img").attr("src");
• removeAttr( ) : 속성을 제거하는 것 / 모든 클래스 속성이 한번에 제거 된다. removeClass( )메서드는 여러 개의 클래스 속성 중 선택적으로 제거 가능

 

css( ) 스타일과 관련된 모든 기능 수행

•  CSS 주는 방법 2가지

$("tr:first").css("background","black").css("color","white");

$("tr:first").css( {background:"black",color:"white"});

 

 

 

html( ), text( ) 문서 객체 내부 태그 정보 getter / setter

ㅇgetter

• html( ) : 문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그 인식)
• 선택자 태그의 모든 것을 가져 오고 싶은 경우 그냥 $("선택자")로 씀
• 해당 선택자로 만든 변수의 정보를 가져오기 위해서는 $.each 태그에 넣고 $(변수명).val()로 정보를 가져와야 한다.(input은 val( ))
• text( ) : 문서 객체 내부의 글자와 관련된 모든 기능을 수행
• text( ) 첫번째 것만 가져 오는 것이 아니라 모든 것을 이어서 가져옴

ㅇ setter

• $('선택자').html( 값 );   / $('선택자').text( 값 );
• $('선택자').html( function(index, html) {  } );
  $('선택자').text( function(index, html) {  } );

 

 

문서 객체 제거 remove( ) / empty( )

• remove( ) : 특정 문서 객체를 제거
• empty( ) : 특정 문서 객체의 후손을 모두 제거