제이쿼리는 '선택' + '동작' 으로 이루어져 있다
이 '동작' 부분에는 다양한 메서드가 있는데, 이를 활용하여 원하는 요소에 클래스를 추가/제거 하거나, 속성을 읽고 쓰거나, 스타일을 입히는 것 등이 가능하다
클래스 관련
// item에 header 클래스 추가
$('#item').addClass('header');
// item에 header 클래스 제거
$('#item').removeClass('header');
// item에 header 클래스가 없으면 추가, 있으면 제거
$('#item').toggleClass('header');
// item에 header 클래스가 있으면 true, 없으면 false 리턴
$('#item').hasClass('header');
속성 관련
// img 태그의 src 속성 받아오기
$('img').attr('src');
// img 태그의 src 속성 지정하기
$('img').attr('src', 'images/logo.png');
// h1 태그의 텍스트 받아오기
$('h1').text();
// h1 태그의 텍스트 지정하기
$('h1').text('Hello World!');
// h1 태그의 HTML 텍스트 지정하기
$('h1').html('<b>Hello World!</b>');
스타일 관련
// item의 font-weight 값을 bold로 지정하기
$('#item').css('font-weight', 'bold');
// item의 background-color 가져오기
$('#item').css('background-color');
'FrontEnd > jQuery' 카테고리의 다른 글
[jQuery] 자바스크립트, 제이쿼리만으로 HTML 요소 추가하기 (0) | 2022.01.21 |
---|---|
[jQuery] 제이쿼리 Audio 다루기 (0) | 2022.01.16 |
제이쿼리(jQuery)와 자바스크립트(Vanilla JS) 이벤트 핸들링 차이 (0) | 2022.01.10 |