jQuery - 스타일, 속성, 동작 관련

1.CSS 속성 수정

 

아이디가 box인 요소의 배격색을 red로 바꾼다.

$('#box').css({'background-color':'red'});

$('#box').css('background-color','red');

$('#box').css({backgroundColor:'red'});

 

위의 3가지 코드는 작성 방법만 다를 뿐 결과가 같다.

 

 

 

2.제이쿼리로 여러가지 CSS속성 수정

$('#box').css({'background-color':'red','color':'white'});

$('#box').css({backgroundColor:'red',color:'white'});

 

두가지 이상의 CSS속성을 변경할 때 콤마(,)로 구분해서 작성한다.

 

 

 

3.클래스 추가

$('#box').addClass('effect');

 

아이디가 box인 요소에 effect라는 클래스를 추가한다.

 

 

 

4.클래스 제거

$('#box').removeClass('effect');

 

아이디가 box인 요소에 effect라는 클래스를 제거한다.

 

 

 

5.클래스 있으면 제거, 없으면 추가

$('#box').toggleClass('effect');

 

아이디가 box인 요소에 effect라는 클래스가 있으면 제거하고 없으면 추가 한다.

 

 

 

6.클래스 있으면 true, 없으면 false 리턴

$('#box').hasClass('effect');

 

아이디 box인 요소에 effect라는 클래스가 있으면 true , 없으면 false리턴 한다.

 

 

 

7.attr();

 

이미지 태그 src 속성 받아오기

$('p').attr('src');

 

이미지 태그 src 속성 지정하기

 

$('p').attr('src','imagse/img.png');

 

 

8.text();

p태그 텍스트 받아오기

$('p').text();

 

p태그 텍스트 지정하기

$('p').text('Hello World');

 

 

9.html();

 

p태그 THML 텍스트 지정하기

$('p').html('<strong> Hello World </strong>');

 

 

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.