Easy for anyone.

웹 프런티어와 함께하는 jQuery 기초강좌 8th - jQuery Filter의 폼(Form) 필터의 사용 지난 시간에 설명드린 기본 필터의 사용법에 이어 폼(Form) 필터에 대해 알아 보기로 하겠습니다. 폼 필터 폼 필터는 형식(text, checkbox, password, radio, file)을 기반으로 하는 폼 요소를 선택할 때 사용하는 필터로 사용법은 필터와 동일하여, 자세한 설명보다는 아래의 표로 대신 합니다. 폼 필터 종류 선택 폼 :button :checkbox :checked :disabled :enabled :file :focus (1.6 이상에서 지원) :image :input 모든 input 요소 :password :radio :reset :selected :submit :tex..

웹 프런티어와 함께하는 jQuery 기초강좌 5th - DOM 계층(Hierarchy)을 이용한 요소 접근 - 첫 번째 이야기 DOM의 이해 이번시간에는 jQuery에서 제공하는 HTML DOM의 계층을 이용한 요소의 접근에 대해 알아 보도록 하겠습니다.... 만... 우선 본론으로 들어가기 전에 HTML DOM에 대한 이야기를 먼저 하려고 합니다. HTML DOM에 대해 정확하게 아시는 것도 중요 하지만, 기초를 다지기 위한 강좌이니 다음 강좌에서 꼭 알아야 하는 내용을 간단하게 정리해 보았습니다. DOM이란 ? HTML 트리 구조를 통해 클라이언트 영역에서 재조합 기능을 제공하여 사용자와 상호 작용을 하는 구조적인 모델로 HTML 트리 구조 내에서 개별 객체에 접근이 제공되는 방법을 말합니다. HTM..

웹 프런티어와 함께하는 jQuery 기초강좌 4th 이야기 - 셀렉터 Attribute를 활용한 요소 선택 개체의 속성값을 통해 요소를 선택하자 - Attribute Selector 각각의 요소는 속성(attribute)을 가질 수 있습니다. 각 요소의 속성은 미리 정해진 이름이거나, 사용자의 필요에 의해서 만들어질 수 있으며 jQuery의 CSS 셀렉터와 필터의 조합으로 통해 관련된 요소에 접근 할 수 있습니다. 다음은 jQuery에서 지원하고 있는 속성관련 셀렉터 입니다. (더 많은 종류의 속성관련 셀렉터를 지원하고 있으니 자세한 내용은 jQuery.com에서 확인을 하시기 바랍니다.) 형식(셀렉터) 설명 $(Selector[attr]) attr 속성(attribute)값을 가지는 Selector 요..

웹 프런티어와 함께하는 jQuery 기초강좌 2nd - jQuery를 이용한 HTML DOM 접근(기본 셀렉터 첫 번째 이야기) 원하는 개체를 쉽고 편하게 선택하자 - 셀렉터 이번 시간에는 jQuery의 가장 강력한 기능인 HTML DOM을 탐색하는 기능에 대해 알아 보도록 하겠습니다. jQuery의 DOM 탐색은 CSS SELECTOR를 사용하고 있어, CSS에 사용한 표현식을 알고 있다면 보다 쉽게 셀렉터를 이해 할 수 있습니다. jQuery에서는 원하는 HTML의 DOM 요소를 찾기 위해 $(Selector), jQuery(Selector)와 같은 표현식을 사용합니다. $는 jQuery의 축약어로 같은 역할을 하며, 다음과 같은 형태로 사용하여 원하는 DOM 요소를 선택 할 수 있습니다. 셀렉터의 ..

웹 프런티어와 함께하는 jQuery 기초강좌 1st - 웹 개발자를 위한 jQuery 기본이해 jQuery 먹는 건가요 ? 웹 사이트와 사용자간의 원활한 소통을 위해 사용되었던 자바스크립트는 최근 몇 년간 Web2.0과 Ajax 기술을 활용한 RIA(Rich Internet Application)의 등장으로 인하여 이전보다 복잡하고 늘어난 코드와 다양한 웹 브라우저의 등장으로 크로스브라우징 이라는 장벽이 웹 개발자에게 큰 스트레스를 안겨주고 있습니다. 이러한 문제에서 쉽게 벗어 날 수 있는 해법과 웹 개발에 새로운 패러다임(역동적인 인터페이스, 쉬운 프로그래밍)을 제시하고 있는 jQuery에 대해 자세히 알아보는 보도록 하겠습니다. jQuery는 2006년 “John Resic”에 의해 디자인 된 자바스..

자바 스크립트의 큰 기능은 브라우저 쿠키를 허용하는 것이다. 이 튜토리얼에서는 어떻게 쿠키를 수행하는지에 대해서 볼 것이다. 간단한 예제를 통해서 모든 페이지마다 이름과 이스플리이를 기억하도록 해 볼 것이다. What are cookies? (쿠키는 무엇인가?) 쿠키는 웹 브라우저에 저장하는 간단한 양의 데이터 조각이다. 이것은 사용자와 매번 페이지에 방문할때 나타내는 정보를 저장하도록 해준다. 각 사용자는 유일한 세트의 쿠키를 가지고 있다. 쿠키는 일반적으로 웹 웹 서버에 의해서 이용되며, 웹사이트 방문을 트래킹 하거나, 사이트에 로그인 하거나, 쇼핑카트를 저장하는 일을 수행한다. 어쨋든 우리는 웹서버를 이용하지 않도고 쿠키를 이용ㄹ할 수 있다. 우리는 JavaScript를 이용해서 이러한 기능을 수행..

과제 폼 입력에 사용자가 숫자와 +, - 기호만 입력할수 있게 하고 싶다. 해결 먼저 아래와 같이 라벨과 submit 버튼 그리고 오류메세지 필드를 만들어 봅시다. 핸드폰 번호를 입력하세요. 숫자와 +,- 만 입력하실수 있습니다. 각 엘리먼트의 class 속성에 각각 "test_label" , "test_infobox", "test_submit", "test_error"를 지정해줍니다. 스크립트 소스는 아래와 같습니다. $(document).ready(function() { $('.test_error').hide(); $('.submit..

문제 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다. (대부분의 뉴스 사이트에서 구현되어 있는 기능) 해결 jQuery를 통해 현재의 폰트 사이즈를 알아낸 다음 그 수치에 버튼을 클릭할때마다 +1 이나 -1 을 해줌으로써 폰트 사이즈를 변경합니다. 토의 위 그림 1-1 에서 볼수 있듯이 크게, 작게 링크를 클릭하게 되면 현재 폰트 사이즈에서 +1이나 -1을 해줍니다. 예제 소스는 아래와 같습니다. 폰트 사이즈 바꾸기 - 웹눈의 웹이야기 < script type="text..

우리가 선택하고자 하는것이 무엇이든지, 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인 ..