2021-06-16 (65일차) 제이쿼리(jquery)의 본질, 자바스크립트와 제이쿼리 문법차이, 제이쿼리 장점, next, prev, mouseenter, this, dblclick parent, children, find, siblings

자바스크립트 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 사용

참고자료