웹3 - 7강 (5.31)

[제이쿼리 연결 확인하는 코드]

$(document).ready(function(){

  console.log("js연결완료")

});

 

 

[hasClass]

https://codepen.io/kkkge/pen/zYQZYyb

• .hasClass(className): 선택된 요소가 특정 클래스를 가지고 있는지 확인합니다.
• 불리언 값을 반환하며, 요소가 클래스를 가지고 있으면 true, 그렇지 않으면 false를 반환합니다.
• 여러 요소를 선택하고 순회할 때도 사용할 수 있습니다.
• 이 메서드는 동적 클래스 변경이 필요한 애플리케이션에서 매우 유용합니다. 예를 들어, 특정 클래스가 있는지 확인한 후, 그에 따라 다른 스타일이나 동작을 적용할 수 있습니다.

 

[아코디언]

js_acod_5.31 vscode에 내용 정리 되어있음

 

[주요 내용]

1. ul> li > q-box + a-box의 구조
2. 여백, 모서리는 4배수 단위로 만들어주는게 좋다.
3.사라지는 구조가 있다면 사라지는 구조에 여백값을 적용하여 여백이 같이 사라지도록 해야한다. -> q-box에 있는 margin-bottom을 top으로 바꾼 후 a-box로 옮겨준다. 
4. 300은 0.3초이다. (js)

 

 

[제이쿼리 형제 선택자]

• .siblings() 형제들
• $(this).siblings(".active") = 내가 선택한 것의 형제(active가 추가되어 있는) -> 다 선택자임
• 형제 함수식이 hasClass가 있는 함수식보다 먼저 와야한다.

 

[제이쿼리 후손선택자]

• .find() 이벤트는 css 후손선택자와 동일한 효과를 가지고 있다.
• .find()는 반드시 오른쪽 소괄호에 선택자가 선택 되어 있어야 한다. -> .find(".a-box")

 

[애니메이션]

• 제이쿼리 애니메이션 이벤트는 한쪽만 사용하면 안된다. 예를 들어 slideUP을 사용했다면 slideDown도 사용해야한다. 
• 또한 html구조가 나오거나 삭제되기 전에 애니메이션을 먼저 적용해야한다. (즉 addClass, removeClass 이벤트 위에 와야한다.)
• 300은 0.3초이다.