[jquery] jQuery 입문 05 (170330)

 jQuery 입문 05

• QUIZ > 버튼을 누르면 버튼과 함께 토글되는 상자

ANSWER >

- 메뉴와 버튼을 함께 움직이기 위해서 animate를 잘 활용한다.

• addClass(), removeClass(), toggleClass() 적용해보기

- 특정 시점에 클래스를 적용하려할 때 이용

** 출력 결과 **

• 자손 요소를 이용했을 때 부모요소에 클래스 추가하기 (헷갈림 주의!) (많이 쓰임 주의!)

- parent( ), siblings( ) 사용됨

- 클릭한 것의 상위로 가면 li 이다.

- li 에 클래스를 추가하고

- li 의 this를 제외한 나머지 형제의 클래스를 제거한다.

** 출력 결과 **

• 속성추가하기 : attr( )

- $(    ).attr("src") : src속성을 읽어온다    ===>    string타입

- $(    ).attr("src","images/1.jpg) : src속성을 추가한다.

- $(    ).removeAttr("src") : 속성자체를 없애버림

EX1 > $().attr("class","box") == $().addClass("box")

＃ attr - 기존에 a라는 클래스있으면 없어지고 box클래스 생김

＃ addClass - a클래스 유지, box클래스 추가됨

EX2 > $().attr("style","color:red"); == $().css("color","red");

＃ attr - 기존에 인랑인css를 덮어씀

＃ css - 기존 유지, css추가

• attr( ) 이용하기

- element의 속성을 동적으로 추가할 수 있다.

- 자주 사용하므로 잘 알아놓도록 한다!

** 출력 결과 **

• QUIZ > 이미지를 클릭하면 다른 이미지로 바꾸기

ANSWER >

• 특정 a를 클릭하면 특정 a와 관련된 p가 나타나게 하기

** 출력 결과 **