프로그래밍
-
이벤트(event) 종류프로그래밍/JQuery 2022. 11. 4. 22:55
이벤트는 시스템에서 일어나는 사건이나 발생을 의미하며, 원하는 요소에 이벤트를 예약해두고 이벤트를 작동시키면 특정 함수가 실행되는 것을 의미한다. 원하는 시점에 필요한 기능을 할 수 있도록 도와주는 형태이다. 이벤트의 종류로는 마우스, 키보드, 브라우저, 문서로딩, 폼이 있다. 마우스 이벤트 종류 설명 click 마우스를 클릭 했을 때 발생 dblclick 더블 클릭 했을 때에 발생 hover mouseenter와 mouseleave mousedown 마우스를 눌렀다가 떼었을 때에 발생 mouseenter 마우스가 진입했을 때에 발생 mouseleave 마우스가 벗어났을 때에 발생 mousemove 요소 내에서 마우스를 움직였을 때에 발생 mouseout 요소 내에서 마우스 포인터가 떠났을 때에 발생 m..
-
박스모델 메소드프로그래밍/JQuery 2022. 11. 1. 20:55
박스모델의 가로, 세로 크기를 받아오거나 설정해주는 메소드를 알아보자. 종류 설명 width() 가로 크기를 가져오거나 설정하는 메소드 height() 세로 크기를 가져오거나 설정하는 메소드 innerWidth() 요소의 (가로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드 innerHeight() 요소의 (세로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드 outerWidth() 요소의 (가로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드 outerHeight() 요소의 (세로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드 outerWidth(true) 요소의 (가로크기 + 패딩 + 테두리 + 마진의 가로 크기)를 가져오거나 설정하는 메소드 ou..
-
자식, 자손 요소의 탐색프로그래밍/JQuery 2022. 10. 31. 20:44
특정 요소에서 자식, 자손요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자 종류 설명 children() 매개변수로 전달된 요소를 바로 하위 요소(자식 요소)에서 찾아줌 find() 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택 별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있음 div 요소 ul 요소 li 요소 li 요소 p요소 span 요소 li 요소 li 요소 ul 요소의 모든 자식 요소 li 요소의 모든 자손 요소 스크립트 children() 적용 스크립트 find() 적용
-
형제요소 탐색프로그래밍/JQuery 2022. 10. 30. 09:54
특정 요소에서 형제 요소에 해당하는 요소를 탐색하는 방법에 대해 알아보았다. 종류 설명 siblings() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택 next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택 nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음 prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택 prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음 div 요소 ul 요소 li 요소 li 요소 li 요소 p요소 span 요소 li 요소 li 요소 li 요소의 형제 요소 스크립트 siblings(..
-
조상요소 탐색프로그래밍/JQuery 2022. 10. 28. 10:11
선택자로 선택된 특정 요소의 조상 요소를 탐색하는 방법에 대해 알아보자. 종류 설명 parent() 선택한 요소의 부모요소를 선택함. 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 있음. parents() 선택한 요소의 조상요소를 선택함. 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 조상요소만을 선택할 수 있음 parentsUntil() 선택한 요소의 조상 요소 중에서 전달받은 선택자에서 해당하는 요소 바로 이전까지의 요소만을 모두 선택함. 선택자를 인수로 전달하지 않으면 parents() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택함. div 요소 ul 요소 li 요소 li 요소 p요소 span 요소 p 요소의 부모 요소 스크립트 parent() 적용 스크립..
-
JQuery로 DOM 다루기 - 요소 삭제프로그래밍/JQuery 2022. 10. 27. 23:29
요소를 삭제하는 방법으로 다음과 같다. 종류 설명 remove() 선택한 요소를 DOM 트리에서 삭제하며, 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트 모두 함께 삭제한다. detach() 선택한 요소를 DOM 트리에서 삭제하며, 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지한다. empty() 선택한 요소의 자식 요소를 모두 삭제하며, remove()나 detach() 메소드와 달리 선택된 요소 그 자체는 삭제되지 않는다. unwrap() 선택한 요소의 부모 요소를 삭제한다. 첫번째 아이템 두번째 아이템 세번째 아이템 네번째 아이템 다섯번째 아이템 아이템 삭제 div 요소 삭제 div 요소 복구 자식 요소 삭제 부모 요소 삭제 위 코드에 스크립트를 추가하여 각 버튼요소..