본문 바로가기

728x90
반응형

프로그래밍118

[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5. pageshow 이벤트6. pagehide 이벤트7. error 이벤트8. abort 이벤트 1. DOMContentLoaded 이벤트 설명: HTML 문서의 구조가 모두 로드되고, DOM이 완전히 생성되었을 때 발생합니다. CSS와 스크립트는 아직 로드되지 않았을 수도 있습니다.특징: 페이지의 기본 DOM 요소와 상호작용을 시작하기에 적합한 시점입니다.사용 예제document.addEventListener("DOMContentLoaded", function () { console.log("DOM is fully loaded and parsed"); // DOM 요소.. 2024. 12. 3.
[jquery] 동적 요소 이벤트 바인딩 처리 목 차1. $(document).on()2. 문법3. 사용 예제3-1. 기본 이벤트 바인딩3-2. 이벤트 위임3-3. 여러 이벤트 바인딩3-4. 이벤트 핸들러에 데이터 전달3-5. 추가된 동적 리스트에 이벤트 바인딩3-6. 이벤트 해제3-7. 특정 요소에 이벤트 제한3-8. 이벤트 버블링 막기4. on() 과 기존 메서드 비교 1. $(document).on()$(document).on() 메서드는 jQuery에서 이벤트 핸들러를 동적으로 등록하거나 위임할 때 사용되는 강력한 메서드입니다.on() 메서드는 특정 이벤트가 발생했을 때 실행할 함수를 지정합니다.이벤트를 직접 요소에 바인딩하거나, 이벤트 위임을 사용하여 동적으로 생성된 요소에도 이벤트를 적용할 수 있습니다.기존의 bind(), delegate.. 2024. 12. 2.
[jquery] click() 메서드와 on("click") 메서드의 차이 목 차1. click() VS on.("click") 비교2. 비교 예제2-1. 정적 요소에 이벤트 바인딩2-2. 동적 요소에 이벤트 바인딩2-3. 다중 이벤트 처리3. 정리 1. click() VS on.("click") 비교특징click()on("click")동적 요소 지원지원하지 않음지원 (이벤트 위임 사용 시 가능)이벤트 위임불가능가능 (부모 요소에 이벤트 바인딩)다중 이벤트 등록단일 이벤트만 처리 가능여러 이벤트 유형 등록 가능사용법 간결성더 간단한 방식상대적으로 복잡권장 여부간단한 경우 사용 가능대부분의 경우 권장    2. 비교 예제2-1. 정적 요소에 이벤트 바인딩// click() 사용$("button").click(function() { alert("Button clicked!");}.. 2024. 12. 2.
jQuery 페이지 로드 후 실행 이벤트 목 차1. $(document).ready()2. 주요 개념2-1. DOM이 로드 되었을 때 실행2-2. HTML 문서와 외부 리소스 로드의 차이3. 문법4. 사용 예제4-1. 기본 사용4-2. 축약형 사용4-3. 이벤트 핸들러 등록5. 여러 개의 ready() 호출6. $(document).ready()와 window.onload의 비교7. 정리 1. $(document).ready()$(document).ready()는 jQuery에서 DOM(Document Object Model)이 완전히 로드되고 파싱된 후에 실행되는 코드를 정의하는 메서드입니다.이 메서드는 HTML 문서가 완전히 로드된 뒤에 JavaScript 코드를 실행할 수 있도록 보장하며, 특히 문서 로드 시점의 이벤트 처리에 유용합니다... 2024. 12. 2.
제이쿼리 선택자 정리 (Selector) 목 차1. 전체 선택자 (*)2. 태그 선택자3. 아이디 선택자 (#id)4. 클래스 선택자 (.class)5. 속성 선택자6. 그룹 선택자7. 후손 선택자8. 자식 선택자 (>)9. 형제 선택자 (+, ~)10. Pseudo-class 선택자 1. 전체 선택자 (*)설명: 문서의 모든 요소를 선택합니다.$("*").css("color", "red"); // 모든 요소의 텍스트를 빨간색으로 변경 2. 태그 선택자 설명: 특정 태그 이름을 기준으로 요소를 선택합니다.$("p").hide(); // 모든 태그를 숨김 3. 아이디 선택자 (#id) 설명: 특정 id 값을 가진 요소를 선택합니다.$("#header").text("Hello!"); // id가 'header'인 요소의 텍스트를 변경 4. 클.. 2024. 12. 1.
파이썬 패키지, 모듈 import 하는 방법 정리 (import, from , as) 목 차1. 파이썬 import 설명2. 기본 import3. 별칭 사용 (as)4. 특정 요소만 가져오기 (from ... import ...)5. 특정 요소를 별칭으로 가져오기6. 모듈 내의 모든 요소 가져오기 (from ... import *)7. 패키지에서 하위 모듈 가져오기8. 패키지에서 특정 요소 가져오기9. 상대 경로로 모듈 가져오기 (패키지 내부)10. 사용자 정의 모듈 가져오기 1. 파이썬 import 정의파이썬에서 모듈을 가져오는 방법(import)은 코드 재사용성을 높이고, 다양한 라이브러리와 기능을 손쉽게 활용할 수 있도록 도와줍니다.import는 특정 모듈 또는 모듈 내의 특정 요소를 가져와 사용할 수 있도록 하는 키워드입니다.  2. 기본 import 모듈 전체를 가져옵니다.모듈의.. 2024. 11. 30.
728x90
반응형

티스토리툴바