목록jQuery (110)

투케이2K

8. (jquery/제이쿼리) Jquery 특정 객체 다중 이벤트 등록 실시 - mouseenter , mouseleave , click

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window load : 웹 페이지 로딩 완료 상태를 확인합니다 2. mouseenter : 마우스가 객체 위로 올라온..
Jquery 2021. 6. 17. 08:47
7. (jquery/제이쿼리) Jquery touch (터치) start, move, end 사용해 터치된 객체 id 확인 및 좌표 확인 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window load : 웹 페이지 로딩 완료 상태를 확인합니다 2. touch : 모바일 화면쪽에서 터치 이벤트를 감지하..
Jquery 2021. 6. 17. 08:24
6. (jquery/제이쿼리) Jquery 사용해 window resize 화면 변경 감지 및 window width 화면 크기 확인, offset 객체 좌표 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window load : 브라우저 로딩 완료 상태를 확인합니다 2. window resize : 브라우저 화면 변경 ..
Jquery 2021. 6. 13. 19:34
5. (jquery/제이쿼리) Jquery 사용해 closest, parents 부모 노드 찾기 및 children 자식 노드 찾기

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 ..
Jquery 2021. 6. 13. 18:37
34. (html/css/javascript/jquery) qrcode 라이브러리 사용해 QR 코드 생성 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] QR 생성 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : ..
FrontEnd 2021. 6. 12. 19:11
4. (jquery/제이쿼리) Jquery 사용해 body 영역 클릭 이벤트 감지 및 객체 id 확인 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨) 2. ..
Jquery 2021. 6. 11. 15:36
3. (jquery/제이쿼리) Jquery 사용해 window ready, window load 구현 및 코드 차이점 설명

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.ready : 브라우저가 DOM 트리를 생성한 직후 실행합니다 2. window.onload : html의 로..
Jquery 2021. 6. 9. 17:41
2. (jquery/제이쿼리) Jquery 사용해 브라우저 사이즈 확인, 스타일 (style) 속성 값 확인 및 변경, 텍스트 (text) 값 확인 및 변경

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. 기본 문법 : $(선택자).동작함수(); 2. css : 자바스크립트에서 css 속성을 확인 및 변경할 때 사용합니다 3...
Jquery 2021. 6. 8. 10:56
1. (jquery/제이쿼리) 기본 jquery 설명 및 상시 대기 사용해 특정 태그, 특정 아이디 클릭 (click) 이벤트 정의 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. Jquery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다..
Jquery 2021. 6. 8. 07:37
26. (html/css/javascript/jquery) 드래그 앤 드롭 (drag and drop) 기능을 사용해 div 속성값 교체 실시 - 브라우저, 모바일

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /*=================== [브라우저 단 처리] ===================*/ /* 드랍할 위치 태그에 다른 이벤트가 발생하는 것을 방지 */ function allowDrop(evt) { evt.preventDefault(); }; /* 드래그 시 이벤트 함수 */ function drag(evt) { /* 선택한 div id 값 확인 */ dragId = evt.target.id..
FrontEnd 2021. 6. 4. 10:56
Prev 1 ··· 3 4 5 6 Next