제이쿼리]attr태그

오늘은 attr태그를 공부하고 예제를 풀며 마무리하려고 합니다.

 

attr 태그

1. 태그의 속성을 추가&제거할 때 사용한다.
2. 각 태그에 지정된 속성만 사용 가능하다.
3. 형태 : 

$(선택자).attr({
     다중속성 : 속성값,
     .....
});

 

간단한 예제로 한번 볼까요?

먼저 이미지 두개를 준비해서 브라우저에 출력합니다.

attr태그를 이용해서 이미지 크기를 잡아주도록 하겠습니다.

attr태그를 사용하여 속성값을 추가하면 이미지 크기가 바뀌는 것을 볼 수 있습니다.

 

추가할 수 있다면 제거도 가능해야 되겠죠??

 

removeAttr

1. 추가 또는 기존에 있는 속성값을 제거할 때 사용한다.
2. 형태

$(선택자).removeAttr(삭제 속성명);

 

위 예제에서 removeAttr를 이용하여 속성값을 제거해보도록 하겠습니다.

removeAttr태그를 이용하여

첫번째 이미지의 width값을 제거해주세요 라고 작성하면됩니다.

 

이번에는 이러한 예제를 한번 풀어보겠습니다.

0

박스를 클릭했을 때 이미지가 바뀌도록 만들어 봅시다.

먼저 박스 안에 이미지를 하나만 넣어줍니다.  그런 다음 style에서 박스를 꾸며줍니다.

이제 제이쿼리로 가서 작성을 해줍니다.

먼저 변수를 지정해줍니다.

첫번째 클릭했을 때는 b.jpg로 주소가 추가되면서 b.jpg로 출력되고

두번째 클릭했을 때는 다시 a.jpg로 주소가 추가되면서 a.jpg로 출력됩니다.

그리고 i = 0; 값을 주면서 다시 클릭했을 때 처음 값으로 돌아가서 다시 b.jpg가 출력되는 것을 볼 수 있습니다. 

0