Easy for anyone.

웹 프런티어와 함께하는 jQuery 기초강좌 20th - jQuery Performance jQuery 성능에 대한 넋두리 이번 시간에는 jQuery 성능에 대해서 이야기를 하려고 합니다. jQuery는 정말로 많은 기능을 개발자가 사용하기 쉬운 형태로 제공하고 있습니다. 하지만 얻는 게 있다면 잃는 것도 있는 게 세상의 이치이듯 jQeury의 강력한 기능을 사용함으로써 개발에 드는 공수는 줄어 들지만 클라이언트의 부하는 증가하게 됩니다. 하지만 앞으로 설명드릴 내용을 이해 하신다면 어느 정도의 부하를 줄일 수 있습니다. 말은 거창하게 시작했지만 크게 어렵거나 한 부분은 없으니, 부담 없이 강좌를 봐 주시면 되겠습니다. 첫 번째 - 셀렉터의 구체화 다른 사람을 이해시키기 위해서 자세하게 설명 하듯이 jQ..

웹 프런티어와 함께하는 jQuery 기초강좌 7th - jQuery Filter의 기본필터의 사용 이번 시간에는 jQuery 에서 제공하는 필터에 대해서 알아 보겠습니다. 부제를 붙이자면 "셀렉터와 필터의 만남"이 될꺼 같습니다. 셀렉터에 날개를 달자 ? Filter를 이용한 개체 접근 이번 강좌에서는 jQuery에서 지원하고 있는 여러가지 필터중에 기본이 되는 부분과 jQuery의 DOM 필터 메서드,(filter())를 사용하여 사용자가 원하는 요소를 선택하는 방법에 대해 알아 보도록 하겠습니다. 형식(표현식) 설명 :animated 에니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다. :eq(index) Index에 해당하는 요소를 반환합니다.(단일요소) :even 짝수의 요소를 반환합니다..

웹 프런티어와 함께하는 jQuery 기초강좌 6th - DOM 계층(Hierarchy)을 이용한 요소 접근(2) 이전 시간에 알아본 HTML DOM을 jQuery에서 지원하는 DOM 접근 방법에 대해 알아 보도록 하겠습니다. jQuery 계층 접근 셀렉터의 종류 jQuery에서는 다음과 같이 4개의 계층 접근용 셀렉터를 지원하고 있으며, 각각의 사용법에 대해서는 간단한 예제와 함께 알아 보도록 하겠습니다. 형식(셀렉터) 셀렉터 표현식 Child Selector $(“parent > child”) Descendant Selector $(“ancestor descendant”) Next Adjacent Selector $(“prev + next”) Next Siblings Selector $(“prev ~ ..

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

웹 프런티어와 함께하는 jQuery 기초강좌 3rd - jQuery를 이용한 HTML DOM 접근(기본 셀렉터 두 번째 이야기) 원하는 개체를 쉽고 편하게 선택하자 - 셀렉터 셀렉터의 종류 셀렉터 표현 방법 All Selector $("*") ID Selector $("#id") Element Selector $("elementName") Class Selector $(".className") Multiple Selector $("selector1, selector2, selector3, selectorN") 지난 시간에 이어 기본이 되는 셀렉터의 나머지 부분인 클래스와 여러가지 셀렉터를 조합하여 요소에 접근하고, 개체를 탐색 선택하는 방법에 대한 이야기를 진행 하도록 하겠습니다. Class Select..

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

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