개발/javascript&jquery (14) 썸네일형 리스트형 [jQuery] 위치/크기 관련 기능 다루기 부모 좌표 노드 구하기 $대상.offsetParent() 자식 노드의 위치는 부모 좌표 노드에 영향을 받습니다. 부모 좌표 노드가 왼쪽으로 50만큼 이동하면 부모 좌표 노드 안에 포함된 자식 노드 역시 같이 움직입니다. - 자바스크립트 DOM에서 부모 좌표 노드 자바스크립트 DOM에서는 position 속성값이 absolute 또는 relative로 설정된 조상 노드 중 가장 근접한 노드가 부모 좌표 노드가 됩니다. 지역(부모 노드 기준) 좌표 위치 다루기 지역위치란 ? 부모 좌표 노드의 left():0 , top():0 위치를 시작점으로 하는 위치 값을 의미합니다. 지역 위치 구하기 : position() 메서드를 이용하면 요소의 지역 위치 값을 구할 수 있습니다. $대상.position().left .. [jQuery] mouseover, mouseenter 차이점 mouseover, mouseenter 차이점 mouseover/mouseout : 마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트 / 만약 내부에 자식 노드가 있는 경우 자식 노드에서도 이벤트가 발생한다. 즉, 자식 노드는 독립적인 노드로 처리된다. mouseenter/mouseleave : 마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트 / 만약 내부에 자식 노드가 있는 경우 자식 노드에서는 이벤트가 발생하지 않는다. 즉, 자식 노드는 부모 노드의 일부분으로 처리된다. [jQuery] 이벤트 다루기 자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용) 스터디 정리 이벤트 다루기 1. 이벤트 단계 단계1. 캡처 단계 단계2. 캡처 단계 단계3. 버블링 단계 이벤트 흐름은 오직 DOM 노드 객체를 따라 이동한다. 사용자가 만든 객체에서는 절대 일어나지 않을뿐더러 이벤트를 흐르게 할 수도 없다. eventPhase 프로퍼티 1=캡처 단계 2=타깃 단계 3=버블링 단계 01. 단계1 캡처 단계 최상위 노드인 document에서 시작해서 태그와 태그를 거쳐 실제 이벤트를 발생시킨 노드 전까지 흐른다. 흐르면서 만나는 노드 중 캡처 단계에 이벤트 리스너가 등록 돼 있다면 이벤트 리스너가 실행된다. 이벤트 등록방법 $대상.get(0).addEventListener(이벤트이름, 리스너, tr.. [jQuery] 노드 생성, 추가, 삭제, 이동 / 스타일 다루기 / 속성 다루기 노드 다루기 - 노드 생성/ 추가/ 삭제/ 이동 1. 노드 생성 및 추가 01. 노드 생성 var $신규노드 = $("신규DOM"); $()함수에 태그정보를 넣어주면 Jquery 객체로 포장된 노드가 만들어 진다. $()함수 내부에서는 매개변수로 받은 태그 노드 정보를 파싱해 태그와 1:1 대응하는 HTMLElement 객체를 생성하는 작업이 일어난다. var new1 = document.createElement("li"); var new2 = document.createTextNode("텍스트노드생성"); new1.appendChild(new2); //텍스트노드를 신규 노드에 추가 - jquery 노드 생성은 위의 자바스크립트 코드를 jquery 내부에서 구현 하고 있다. 02. 신규 노드를 첫 번째 .. [jQuery] jQuery소개 / 노드찾기 자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용) 스터디 정리 JQuery소개 1. jQuery의 기능 - DOM : jquery 핵심 기능 / 노드 찾기, 추가, 삭제, 수정 까지 노드와 관련된 모든 기능을 제공 - AJAX - 플러그인 - 효과 2. CSS선택자 $(“*”) 모든 엘리먼트 $(“E”) 태그 이름이 E인 모든 엘리먼트 $(“E F”) E자식 노드중 태그 이름이 F인 모든 엘리먼트 $(“E.C”) 태그 이름이 E인 엘리먼트 중 C라는 클래스를 가진 모든 엘리먼트 $(“E .C”) E자식 노드중 라는 클래스 선택자를 가진 모든 엘리먼트 $(“E>F”) E 바로 아래 자식 중 태그 이름이 F인 모든 엘리먼트 3. CDN(Content Delivery Network) .. [jQuery] Dom&Node 관계 / Dom객체 자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용) 스터디 정리 JQuery란 자바스크립트 DOM 작업을 좀더 쉽게 처리할 수 있게 도와주는 라이브러리이다. JQuery를 알기 위해선 자바스크립트 DOM을 먼저 학습해야 한다. 자바스크립트 DOM (Document Object Mode) : 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩어리이다. 노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있다. 1. W3C DOM vs 브라우저 DOM DOM은 정의부분(명세서)와 구현부분으로 나누어 진다. 정의 부분인 명세서에는 웹페이지(XML)문서를 조작할 때 지켜야 할 약속이 명시되어 있는 문서일뿐 실제 동작하는 구현 소스코.. 이전 1 2 다음