[JavaScript] jQuery 메소드

jQuery 메소드 정리

클래스 관련

// name이라는 id를 가진 태그에 up이라는 클래스 추가
$('#name').addClass('up');

// name이라는 id를 가진 태그에 down이라는 클래스 제거
$('#name').removeClass('down');

// name이라는 id를 가진 태그에 up이라는 클래스가 없으면 추가, 있으면 제거
$('#name').toggleClass('up');

// item에 down이라는 클래스가 있으면 true, 없으면 false 리턴
$("#name").hasClass('down');

 

속성 관련

// 이미지 태그의 src 속성 받아오기
$('img').attr('src');

// 이미지 태그의 src 속성 지정하기
$('img').attr('src', 'images/pen.png');

// p 태그의 텍스트 받아오기
$('p').text();

// p 태그에 텍스트 지정하기
$('p').text('Lemon');

// p 태그에 HTML 텍스트 지정하기
$('p').html('<b>Lemon</b>');

 

text() 내의 내용은 그냥 문자열로 인식하기 때문에 $('p').text('<b>Lemon</b>'); 에서의 <b> 태그는 문자열 그대로 출력된다.

html() 내의 내용의 <b> 태그는 태그로 인식되어 굵게 된 문자열로 표현할 수 있다.

 

스타일 관련

// name이라는 id를 가진 태그의 font-weight를 bold로 지정하기
$("#name").css('font-weight','bold');

// name이라는 id를 가진 태그의 background-color 가져오기
$("#name").css('background-color');

// name이라는 id를 가진 태그의 background-color를 #000000 으로 설정하기
$("#name").css('background-color', '#000000');