💚 UIUX 웹퍼블리셔 과정(6개월)
2021-06-16 (65일차) 제이쿼리(jquery)의 본질, 자바스크립트와 제이쿼리 문법차이, 제이쿼리 장점, next, prev, mouseenter, this, dblclick parent, children, find, siblings
widely design
2021. 6. 17. 01:45
자바스크립트 54강~63강
< 제이쿼리(jquery)의 본질 >
- 기존에 사용하던 javascript의 문법
문제점 : css에서 일괄로 디자인을 처리하던 디자이너들이 이에 대해 불편함을 느낌
↓
해결방법 : 제이쿼리를 불러옴
↓
.prev( ) : 인접 형을 가리킴
.next( ) : 인접 동생을 가리킴
.parent( ) : 부모를 가리킴
.children( ) : 자식을 가리킴
.find( ) : 후손을 가리킴
.siblings( ) : 형제을 가리킴
.mouseenter : 마우스가 닿으면 반응함
.dblclick : 더블클릭시 반응함
- 클릭하면 배경색 변경, 한 번 더 클릭시 배경색 제거
: if, else, hasClass 사용
- 클릭하면 클릭 구간의 좌우 배경색 변경
: next, prev 사용
( + .click 을 대신하여 .mouseenter값을 넣으면 클릭이 아닌, 마우스가 닿으면 반응함)
< 클릭하면 클릭 구간을 제외한 나머지 모두 배경색 변경 >
- 방법 1
문제점 : box-1의 자식들 모두에게 영향을 끼침
↓
해결방법 : parent와 children을 사용하여 클릭된 this(클릭된 구간)의 부모의 자식에게만 영향을 끼치게 바꾸기
↓
- 방법 2
: parent, children 사용
- 방법 3
: siblings 사용
