Easy for anyone.

우리가 선택하고자 하는것이 무엇이든지, jQuery 는 달러 사인으로 된 함수: $() 로 시작을 하게 됩니다. $() 함수는 일반적으로 html 태그와 ID , Class 속성값과 함께 사용됩니다. 표1. CSS와 jQuery 의 선택자 비교문 Selector CSS jQuery 설명 ID #ID_Name $('#ID_Name') ID값이 'ID_Name' 을 가지는 하나의 엘리먼트를 선택합니다. Class .Class_Name $('.Class_Name') Class 속성값이 'Class_Name' 값을 가지는 모든 엘리먼트를 선택합니다. Tag P $('P') 모든 P 태그를 선택합니다. 여기서 주목할만한 점은 Class Selector와 Tag Selector는 해당하는 엘리먼트를 하나만 선택하는..

# 기본 셀렉터 * : 모든 엘리먼트와 일치 E : 태그명이 E인 모든 엘리먼트와 일치 E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치 E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치 E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치 E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치 E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치 E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함 E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함 E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치 E[A=V] : 값이 V인 ..

이제 슬슬 서버사이드 언어인 PHP 와 jQuery 를 함께 사용하는 예제를 다루어 보도록 하겠습니다. 이번 강좌에서는 Select 필드의 항목이 변경되면 다른 필드가 동적으로 변경되는것을 해보도록 하겠습니다. 이 예제는, 여러 사이트의 회원가입 양식에서 보셨을텐데요. 예로, 내가 해당하는 국가를 선택하면 그에 따른 도시명들이 나열되는 select 필드가 동적으로 생성되는 예제입니다. 1. 먼저, Client Language 를 살펴보고, (jQuery 와 Html) 2. Server-side code 를 살펴본다음, 3. 코드에 대한 설명을 하도록 하겠습니다. 1. jQuery & html Code < ..

이번 시간에는 카테고리 별로 내용물을 분류해보도록 하겠습니다. (jQuery가 처음이신 분들은 강좌1부터 보시는걸 권장합니다. ) 우리가 무엇을 할것인지 보도록 하지요. 아래 예제를 참고해주세요. 카테고리 전체기사 경제/금융 사회 연예 스포츠 뉴스 목록 경제뉴스 1 스포츠뉴스 1 사회뉴스 1 경제뉴스 2 연예뉴스 스포츠뉴스 2 경제뉴스 3 사회뉴스 2 경제뉴스 4 스포츠 뉴스3 연예/스포츠 뉴스 경제뉴스 6 사회뉴스 3 사회/경제뉴스 위 예제처럼 카테고리를 클릭하면 리스트들이 각 분류에 맞게 정렬되는 것을 해볼것입니다. 어렵지 않아요. 1. 마크업 구조 보기 카테고리 전체기사 경제/금융 사회 연예 스포츠 뉴스 목록 경제뉴스 1 스포츠뉴스 1 사회뉴스 1 경제뉴스 2 ..

이번 강좌에서는 섬네일 이미지를 누르면 큰 이미지가 변환되도록 해보겠습니다. 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 를 처음 접하시는 분은 강좌 1부분부터 보시는걸 권장합니다. 그럼 예제1 부분에서 h3 엘리먼트 영역을 클릭시 아래의 엘리먼트 영역이 사라지는 것을 보도록 하지요. 소스 코드는 아래와 같습니다. $(document).ready(function(){ // 예제1 코드 $("#first h3").toggle(function(e){ // 선택자에 toggle이라는 이벤트를 주었습니다. e.preventDefault(); // 아직은 신경쓰지 않으셔도 되는 부분 $(this).next().slideUp(); //next()와 slideUp() 이라는 메서드가 보입니다. },function(e){ e.preventDefault(); $(this).nex..