본문 바로가기

jQuery 쉽게하기24

jQuery API 정복 - 선택요소 확장하기, add() .add() 함수는 선택할 요소를 확장시키는 기능을 합니다. 절대로 요소를 추가해서 넣는 함수가 아닙니다. (저 그런 줄 알고 포스트 작성하다가 중간쯤에 아닌 걸 알았습니다. ㅜㅜ 그래서 지금 처음부터 다시 작성중이어요 어엉..) 원문 링크 http://api.jquery.com/add/ .add( selector )Returns: jQuery .add( selector ) selector 선택자를 표현하는 문자열로 해당 선택자를 추가 적용 할 수 있음 .add( elements ) elements 선택할 요소를 확장시킬 이상의 신규 요소 .add( html ) html html 표현에 해당하는 요소를 추가하여 선택 영역 확장 .add( selector, context ) selector 선택자를 표현하.. 2011. 3. 21.
jQuery API 정복 - 자식 요소 선택하기 : jQuery('ancestor descendant') jQuery('ancestor descendant') 는 부모(ancestor)에 속한 자식(descendant)를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/descendant-selector/ descendant selector 개요 : 자식요소를 찾는 선택자입니다. jQuery('ancestor descendant') ancestor 는 '조상, 부모' 의 뜻입니다. descendant 는 '후손, 자식' 의 뜻이죠. 아마 고딩2년 정도 수준의 단어 였던걸로 기억합니다. 전 구글 사전으로 검색했습니다. 쿨럭;; 한글로 된 도스가 있었다는 얘기는 들었는데, 영어만 잘 하면 이 공부도 좀 더 수월해 지지 않나 생각해 봅니다. 단어의 뜻만 알아도 이 선택자의 역할이 무엇인지 와.. 2011. 1. 27.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 하위 요소 선택 ("parent > child") parent > child 는 parent 에 속한 child를 찾습니다. 원문 링크 http://api.jquery.com/child-selector/ Child Selector (“parent > child”) jQuery('parent > child') parent 유효한 선택요소 child parent 에 속한 자식 요소 parent > child 는 스타일시트의 표현방식입니다. parent 에 속하는 child 요소에 어떤 스타일을 주고 싶을 때 사용됩니다. 그런데 이 CSS 방법은 IE6 버젼에서는 호환이 되지 않습니다. 그러나 이 선택 방법을 이용하여 jQuery 에서는 해당 요소에 접근할 수 있도록 선택자를 만들었습니다. 부모의 하위에 있는 모든 자식요소들을 선택하는 것이 아닙니다. 바로 .. 2011. 1. 27.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크된 체크박스만 알아내기 :checked 는 체크박스나 라디오버튼 들 중에 체크가 되어 있는 요소만 찾는 선택자입니다. 원문 링크 http://api.jquery.com/checked-selector/ checkbox selector 개요 : 체크박스나 라디오버튼 태그 중에 선택되어 있는 요소를 찾습니다. jQuery(':checked') :checked 는 checkbox 나 radio buttons 들에 해당됩니다. 콤보(select) 박스는 :selected 선택자를 사용하세요. 예 제 소스닫기 체크박스를 클릭할 때마다 그 상태를 체크하여 만일 선택(체크)상태이면 체크된 상태인 개수를 알려줍니다. 미리보기 위 소스중에 보시면 n 2011. 1. 26.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크박스를 찾자 :checkbox 는 input 중에 체크박스를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/checkbox-selector/ checkbox selector 개요 : input 태그 중에 type 이 checkbox 인 요소를 찾습니다. jQuery(':checkbox') $('checkbox') 는 $('[type=checkbox]') 로 사용할 수 있습니다. 가상 클래스(pseudo-class) 선택자(":" 와 같은)를 사용하실 때는 그 앞에 태그명이나 다른 선택자를 포함하시기를 권장합니다. 그렇지 않으면 모두 선택하기 선택자("*") 가 암묵적으로 사용하게 됩니다. 즉, $(':checkbox') 은 $('*:checkbox') 나 마찬가지입니다. 그래서 $('input.. 2011. 1. 26.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 :button 선택자는 button 요소 또는 input 요소중에 type이 button 인 요소를 찾아줍니다. 원문 링크 http://api.jquery.com/button-selector/ button selector 개요 : 문서에서 타입이 button 인 input 또는 button 요소를 찾아줍니다. jQuery(':button') 예 제 1. button 형태의 input 요소를 찾아서 배경색을 노란색으로 테두리를 3px 의 빨간색으로 처리합니다. 2. 그 후 문서에서 div 요소를 찾아서 그 안에 발견된 button 의 개수를 빨간색의 텍스트로 표시해 줍니다. Option Button 미리보기 html 의 form 을 표현하는 태그들은 종류가 여러가지입니다. 위에 보시면 아시겠죠? 그 중에 .. 2011. 1. 25.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name^="value"] [name^="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 시작부분에 포함되어 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-starts-with-selector/ attributeStartsWith selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 문자열이 시작부분에 포함되어 있는 요소를 찾아 줍니다. jQuery('[attribute^="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "news" 라는 단어로 시작하고 있는 요소를 .. 2011. 1. 24.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name!="value"] [name!="value"] 는 태그의 name 속성값과 "value" 가 일치하지 않는 요소만 찾아주는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-not-equal-selector/ attributeNotEqual selector 개요 : 태그가 가진 속성(attributes)의 값(value)과 문자열이 일치하지 않는 요소를 찾아 줍니다. not([attr="value"]) 의 표현과 일치합니다. jQuery('[attribute!="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "newsletter" 가 아닌 요소를 찾아서 그.. 2011. 1. 24.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name="value"] [name="value"] 는 태그의 name 속성명에 들어가 있는 문자가 "value" 와 일치하는 요소를 찾습니다. 원문 링크 http://api.jquery.com/attribute-equals-selector/ attributeEquals selector 개요 : 태그가 가진 속성(attributes)의 값(value)과 문자열이 일치하는 요소를 찾아 줍니다. jQuery('[attribute="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 type 이 radio인 input 태그들 중에 name 속성(attribute)의 값이 "newsletter" 인 요소를 찾아서 그 다음 요소(태그)의 텍스트를 "is newsletter" 로 바꿉니.. 2011. 1. 22.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name$="value"] [name$="value"] 는 태그의 name 속성명에 들어가 있는 문자의 끝에서 부터 "value" 에 해당되는 문자가 포함되어 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-ends-with-selector/ attributeEndsWith selector 개요 : 태그가 가진 속성(attributes)의 값(value)의 뒷쪽부터 문자열이 포함되어 있는 요소를 찾아 줍니다. jQuery('[attribute$="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값의 뒷쪽부터 "letter" 이라는 단어를 포함하고 있는 요.. 2011. 1. 22.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name~="value"] [name~="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 구분되는 단어로 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-word-selector/ attributeContainsWord selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 선택자로 주어진 문자열이 단어의 형태로 들어가 있으면 반환해 줍니다. jQuery('[attribute~="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "man" 이라는 단어.. 2011. 1. 21.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name*="value"] [name*="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 위치에 상관없이 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-selector/ attributeContains selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 문자열이 포함되어 있는 요소를 찾아 줍니다. jQuery('[attribute*="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "man" 이라는 단어를 포함하고 있는 요소를 찾아서 'man .. 2011. 1. 21.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"] [name|="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 앞쪽에 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-prefix-selector/ attributeContainsPrefix selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 하이픈(-)이 포함되어 있을 때 해당 문자열로 시작되는 요소를 찾아 줍니다. jQuery('[attribute|="value"]') attribute 태그의 속성 value 속성의 값 예 제 문서에 모든 링크 중에 hreflang 속성(attribute)의 값이 "en" 으로 시작되는 요소를 찾아서 3px 의 테.. 2011. 1. 20.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : ":animated" ":animated" 는 화면에서 움직이는 요소를 찾아내는 선택자입니다.원문 링크 http://api.jquery.com/animated-selector/animated selector개요 : 화면에서 움직이는(animated) 요소를 찾아줍니다.예 제 화면에서 움직이는 요소를 찾아 색깔을 바꿔 줍니다. Run 미리보기 와. 간단하네요. jQuery 좋지 않으세요? ^^.그럼 즐프하세요. 2011. 1. 20.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selectors) : All Selector ("*") 선택자(selector)는 jQuery에서 가장 중요한 요소입니다. 화면에서 원하는 곳을 선택하기 위해 적절한 선택자를 사용해야 하고, 그것을 원활히 처리할 수 있는 방법으로 마크업 구조를 짜야 합니다. 선택자에 할당된 내용은 꽤 많습니다. 하나당 하나씩 포스팅을 할 예정입니다. 예제가 많은 편이라 재미있는 내용이 되겠네요. jQuery 의 Selector 시작하겠습니다. All Selector ("*") 모든 요소를 선택할 때 사용합니다. 원문 링크 http://api.jquery.com/all-selector/ all selector 개요 : CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열을 사용합니다. jQuery("*") 주의 : 이 선택자는 사용하지 않.. 2011. 1. 19.
jQuery 쉽게하기 - API 깨부시기, jQuery Core API(Application Program Interface, 응용프로그램 인터페이스)란 어떤 응용프로그램에서 제공한 메소드들의 모음입니다. 사전적으로 해석을 해보자면 "응용 프로그램과 대화하기" 가 되겠습니다. 사람사이의 대화방법은 몸짓, 말, 글을 사용합니다. 이것들을 인터페이스라고 할 수 있습니다. 단, 서로 의미가 통해야 합니다. 즉, 사전에 정의된 해석방법으로만 대화가 가능하죠. 고개 숙여 인사를 하는 박찬호를 보고 이상하게 생각했다는 미국인들과 같이 해석의 방법이 미리 정의되지 않은 대화방법으로는 오해 또는 소통이 불가하게 됩니다. 프로그램에서도 어떤 응용프로그램에 접근하기 위해 사전에 정의된 함수들의 모음이 존재하고, 이 모음을 외부에 노출하기 위해 정리한 것이 API 라고 할 수 있습니다... 2011. 1. 19.
jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편 함수(Function)란 객체의 행동을 나타내는 일련의 과정을 프로그램으로 표현한 것입니다. 즉 영어문법으로 보자면 동사가 됩니다. "~을 실행하다"의 의미로 받아 들이시면 됩니다. 모니터를 예로 들어볼까요. 모니터는 화면, 전원 단자, 비디오 단자, 파워버튼 등으로 이루어져 있습니다. 이것들이 모니터의 속성(Properties)이죠. 그럼 모니터로 할 수 있는 일을 정리해 보면 "화면을 표시한다" 라는 중요한 기능외에 "각도를 조절한다.", "밝기를 조절한다." 등의 부가기능들이 있습니다. "화면을 표시한다"라는 기능을 구현하기 위해 그 안에 뭔가 처리를 해야 합니다. 이런 일련의 내용들을 함수를 구현한다 정도로 정리가 되는 것 같습니다. 괜히 사족을 달아서 더 어려운 개념처럼 만든건 아닌가 모르겠네요.. 2011. 1. 18.
jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편 배열(ARRAY)은 프로그램을 배우기 시작하는 분들을 좌절시키는 첫판왕정도 되는 것 같습니다. "프로그램 별거 아니네"라고 방심하고 있다간 크리티컬 데미지 맞고 피 채울 시간도 없을지 모릅니다 ^^. 반 농담이구요. 배열을 만나면서 for Loop 도 의미있게 사용하게 되고 메모리에 대한 내용도 같이 엮여서 복잡해 지기 시작하죠. 그냥 그렇다구요 ^^;. 자 이번에는 JavaScript 의 Array 에 대해서 보도록 하겠습니다. ARRAY : 배열 자바스크립트의 배열은 몇 가지 내장 함수를 가진 변경 가능한 리스트(mutable lists) 입니다. 요 부분은 string 편에서 말씀드린 immutable 과 비교하시면서 보시면 될 거 같습니다. 자바스크립트의 배열 선언은 아래와 같이 합니다. var .. 2011. 1. 18.
jQuery 쉽게하기 - 기본부터 시작하자, Object 편 객체지향 프로그래밍(OOP)은 근대 소프트웨어의 근간이라고 할 수 있습니다. OOP(Object-Oriented Programming) 는 우주의 모든 유·무형의 사물을 객체화 시켜서 객체 끼리의 정보를 주고 받으며 개념을 구체화 시키는 것이라고 할 수 있습니다. 이 말이 더 어렵네요. ^^;; 객체라는 개념을 이해하는 순간이 프로그래밍 언어(language)의 반은 안다고 해도 과언이 아닐 것입니다. 나머지 반은 알고리즘과 같은 고유 스킬과 경험과 같은 지속 스킬 정도라고 해도 무방해 보입니다. 물론 제 의견입니다 ^^. 자, 이번에는 JavaScript 의 객체(Object)에 대해서 알아 보겠습니다. Object : 객체 JavaScript 의 모든 것은 모두 객체입니다. 객체를 만드는 가장 쉬운 .. 2011. 1. 17.
jQuery 쉽게하기 - 기본부터 시작하자, Number 편 JavaScript 의 변수 선언에는 자료형 표현이 없습니다. int a, String str 과 같은 변수타입이 없죠. 모든 변수는 var 로 표현됩니다. 아마 variable 의 약자인 것 같습니다. 게다가 var 를 생략해도 전혀 문제가 되지 않습니다. 이번에는 저번 포스트에 이어 다른 자료형들에 대해 어떻게 설명하고 있는지 보겠습니다. NUMBER : 숫자형 Javascript 의 Number 는 IEEE 754 의 64비트 배정도(double-precision 64-bit) 형식을 따릅니다. string 과 마찬가지로 변경 불가(immutable)한 값입니다. 그리고 C 언어의 기본적인 연산자들을 모두 지원합니다. 지원하는 연산자 : +, -, *, /, %, =, +=, -=, *=, /=, .. 2011. 1. 17.

티스토리툴바