Easy for anyone.

웹 프런티어와 함께 하는 jQuery 기초강좌 17th - jQuery Events 이벤트 지원 메서드 살펴보기 jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다. jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다. 그 만큼 개발자가 많은 이벤트를 쉽게 이용할 수 있고 좀더 나은 UX를 만들 수 있다는 큰~ 장점이 있습니다. (일만 많아 지는 건가요?) 이번 시간에는 jQuery를 통해 이벤트를 어떻게 이용할 수 있는지에 대해 알아 보도록 하겠습니다. 이벤트 중에서 이번 시간을 통해 알아볼 내용은 사용자의 ..

이번 강좌에서는 섬네일 이미지를 누르면 큰 이미지가 변환되도록 해보겠습니다. 1. 마크업 코드 2. jQuery 코드 $(document).ready(function(){ $("#thumnail a").click(function(e) { e.preventDefault(); var largeImgPath = $(this).attr("href"); var largeImgAlt = $(this).find("img").attr("alt").substr(0,4); $("#largeimg img").attr({src:largeImgPath,alt:largeImgAlt}); }); }); 먼저, e.preventDefault() 를 보도록 하지요. 이것은 무엇이냐 하면, 대상을 클릭했을때 발생하는 이벤트를 방지하는 ..

웹서핑을 하다 보면 스크롤바를 따라다니는 슬라이드 메뉴를 자주 볼수 있습니다. 오늘은 슬라이드 메뉴를 jQuery로 만드는 방법을 알아보도록 하지요. jQuery가 처음이신 분들은 강좌1 부터 보시는걸 권장합니다. 1. 슬라이드 메뉴의 Key Point 어떤 대상을 움직이려면 대상의 position 값은 absolute 또는, relative 값이 되어야 합니다.(css 에서 설정합니다.) 2. 마크업 보기 (주저리 주저리..컨텐츠 내용) (슬라이드 메뉴 내용) 예제에서는 이런 구조로 마크업 되어 있으며, slidemenu의 css 속성값은 아래와 같습니다. #slidemenu{background:#12cf3d;position:absolute;width:100px;top:50px;right:10px;} ..

오늘부터 저와함께 하루에 한두개정도씩 jQuery를 가지고 놀아 보겠습니다. 처음부터 현란한 예제로 시작하는것보다 간단한 예제를 가지고 시작해서 응용하실수 있도록 하겠습니다. 처음에만 간략하게 jQuery에 대해 설명해 드리며, 다음 예제부터는 쓸대없는 주석은 달지 않도록 하겠습니다. 우선 jQuery는 일종의 자바스크립트 라이브러리로써, 현재 다른 라이브러리로써는 prototype이라든가 네이버의 '진도'가 있습니다. 라이브러리라 함은 쉽게 설명하면, 프로그래밍언어에서 자주 사용하는 함수나 메서드등을 재사용이 가능하도록 모아놓은 것을 말합니다. 그럼 이제부터 예제를 시작합니다. 1. jQuery를 사용하기 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti..