본문 바로가기

프로그래밍/jQuery237

jQuery API 정복 - 첫번째 요소 찾기 : jQuery(':first') :first 는 찾은 요소 중에 첫번째를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/first-selector/ first selector jQuery(':first') :first 선택자는 :eq(0) 이나 :lt(1) 과 같이 바꿔 사용할 수 있습니다. 예 제 소스닫기 tr 중에 첫번째를 찾아 텍스트를 기울입니다. italic 체로 바꿉니다. Row 1 Row 2 Row 3 미리보기 이전에 같이 보셨던 :first-child 와 이번의 :first 선택자는 아주 유사해 보입니다. 그 사용법을 봐도 그렇고 첫번째 요소를 선택해 준다는 내용으로 봐도 그렇습니다. 그런데 이 둘 사이에는 큰 차이점이 있습니다. :first-child는 1개 이상의 요소를 선택할 수 있다는 것이고 .. 2011. 1. 31.
jQuery API 정복 - 첫째 자식(?) 찾기 : jQuery(':first-child') :first-child 는 자식 요소 중에에 첫번째로 위치한 요소를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/first-child-selector/ first-child selector jQuery(':first-child') :first-child 는 :nth-child(1) 로 대체될 수 있습니다. 이 예제를 보다가 jQuery 가 얼마나 사용하기 편한지 다시한번 느끼게 되었습니다. 아래 예제를 제가 순수하게 짠다면 아마 골머리 썩혔을 겁니다. 다시한번 jQuery 라이브러리 작성자들에게 박수를~~ 예 제 소스닫기 각각의 div 들의 첫번째 span 태그를 찾아서 텍스트에 밑줄(underline)을 그린 후에, 그 span에 마우스 오버/아웃 이벤트시 글자색을 초록색/원래.. 2011. 1. 31.
jQuery API 정복 - input file 찾기 : jQuery(':file') :file 은 파일을 찾는 대화상자를 띄울 수 있는 input을 찾는 선택자입니다. 원문 링크 http://api.jquery.com/file-selector/ file selector jQuery(':file') 예 제 소스닫기 input 들 중에 type 이 file 인 것을 찾아 3 픽셀 짜리 빨간 테두리를 그립니다. 그리고 찾은 개수를 표시해 줍니다. Option Button 미리보기 file 에 테두리 그리는 건 파이어폭스와 익스플로러가 좀 다르네요. 찾아보기 버튼까지 테두리가 그려지는건 IE 만 되는것 같습니다. 뭐 그리 중요한 내용은 아니니 개의치 마시구요. 파일 업로드 관련해서 처리할 일이 생길 때 사용하게 되겠네요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com .. 2011. 1. 29.
jQuery API 정복 - 리스트 짝수,홀수 찾기 : jQuery(':even') :even 은 요소 집합 세트에서 색인 번호가 짝수인 요소를 선택합니다. 0 을 포함합니다. 원문 링크 http://api.jquery.com/even-selector/ even selector jQuery(':even') 눈으로 보이는 순서는 홀수번째 요소가 선택된 것처럼 보입니다. 하지만 인덱스가 '0' 이 초기값이기 때문에 색인 기준으로 보면 사실 짝수번째가 선택되는 것입니다. 조금 헷갈릴 수 있겠네요. 이런 부분은 자주 사용하다 보면 익숙해지는 부분입니다. 너무 걱정마세요. 예 제 소스닫기 테이블에서 인덱스 기준 짝수번째 행들을 선택하여 배경색을 보라색으로 처리합니다. Row with Index #0 Row with Index #1 Row with Index #2 Row with Index #3 .. 2011. 1. 28.
jQuery API 정복 - 인덱스로 요소 찾기 : jQuery(':eq(index)') ':eq(index)' 는 선택된 요소들을 인덱스 번호로 찾을 수 있는 선택자입니다. 마치 배열의 인덱스로 값(value)를 찾는 것과 같은 효과를 냅니다. 원문 링크 http://api.jquery.com/eq-selector/ eq selector jQuery(':eq(index)') index '0'을 시작점(Zero-based)으로 하는 인덱스 :eq(), :lt(), :gt(), :even, :odd 와 같은 인덱스와 관련된 선택자는 찾고자 하는 요소들을 집합 형태로 묶어 줍니다. 위에서 부터 아래쪽 방향으로(down based) 요소들을 찾아 보관합니다. 예를 들어, (.myclass) 선택자로 찾은 요소가 4개라면 첫번째 찾은 요소의 색인이 0 이 되고 4번째 요소의 색인이 3이 되는 것입니.. 2011. 1. 28.
jQuery API 정복 - 사용 불가 상태 선택하기 : jQuery(':disabled') :disabled 은 요소 중에 사용불가(disabled) 상태인 요소를 찾아 반환해 줍니다. 원문 링크 http://api.jquery.com/disabled-selector/ disabled selector 개요 : 요소들 중에 사용 불가 상태인 요소를 찾습니다. jQuery(':disabled') 예 제 소스닫기 input 중에 disabled 인 상태를 가진 요소에 'this is it' 이라 씁니다. 미리보기 사용 불가 상태인 요소를 찾아야 하는 일이 종종 발생하는 데, 요긴하게 쓸 수 있을 것 같습니다. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 1. 28.
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정복 - 특정 단어 포함 요소 선택하기 : jQuery(':contains(text)') :contains('text') 는 'text'에 해당하는 단어가 포함된 컨텐츠를 가진 요소를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/contains-selector/ contains selector 개요 : input 태그 중에 type 이 checkbox 인 요소를 찾습니다.(아자님이 찾아주셨습니다. ^^;;) jQuery(':contains(text)') text text 에 해당하는 문자열을 찾습니다. 대소문자를 구별합니다. 이 선택자는 괄호안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다. 말이 좀 어렵네요. 예제를 보시면 아주 간단합니다.단, 대소문자를 구분합니다. 예 제 소스닫기 div 영역의 내용 중에 'John' 이라는 글자가 .. 2011. 1. 27.
jQuery API 정복 - 클래스명으로 선택하기 : jQuery('.class') .class 는 클래스명이 일치하는 요소를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/class-selector/ class selector jQuery('.class') class 클래스명을 검색합니다. 2개 이상의 클래스를 가지고 있는 요소가 있다면 그 중에 하나만 일치해도 선택됩니다. JavaScript 의 기본 함수인 getElementsByClassName() 이 지원되는 브라우져에서는 jQuery 도 해당 함수를 사용합니다.(헉; 저는 왜 이 네이티브 함수를 모르고 있었죠 ㅡ.,ㅡ) 예 제 소스닫기 "myClass" 라는 클래스명을 가진 요소를 찾아서 3px 짜리 빨간 테두리를 두룹니다. div class="notMe" div class="myClass" span c.. 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 를 이용한 슬라이드 이미지 이번 포스팅은 이전에 제가 제작한 jQuery 를 사용하지 않은 자바스크립트 이미지 슬라이더에 버그가 있어서 jQuery 를 사용한 슬라이드를 긴급 제작하여 쓰는 글입니다. 역시 안정적인 라이브러리를 사용하는게 아주 중요합니다. ^^;; 음 그런데 한가지 제약이 있습니다. 이 스크립트를 사용하기 위해서는 HTML 과 StyleSheet 를 어느정도 수준으로 구사하실 수가 있어야 합니다. 그 부분까지 모두 다 설명드릴 수는 없는 점 양해 부탁드립니다. 일단 데모부터 확인해 주세요. 미리보기 jQuery.banner.js 파일이 필요합니다. 이 파일도 다운받아 적절한 위치에 가져다 놓으셔야 합니다. 소스는 하단에 첨부하겠습니다. 일단 사용법을 말씀드리면.$(function() { $("#image_list_.. 2011. 1. 22.
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.

티스토리툴바