프로그래밍/jQuery237 jQuery API 정복 - n번째 자식요소 찾기 : nth-child :nth-child() 는 자식 요소 집합에서 선택한 색인에 위치한 자식을 찾는 요소입니다. 원문 링크 http://api.jquery.com/nth-child-selector/ nth-child selector jQuery(':nth-child(index/even/odd/equation)') index 1이 초기값이며 색인에 맞는 자식 요소를 찾는다. even, odd, equation 이라는 문자열도 사용할 수 있음. (예. :nth-child(event), :nth-child(4n)) :nth-child(n) 선택자는 CSS 사용법에서 파생된 jQuery의 문법이기 때문에, n 은 "1부터 시작"한다. 그러나 jQuery의 어떤 함수들은 JavaScript의 "0이 시작"인 인덱스 구조를 따른다. .. 2011. 2. 16. jQuery API 정복 - ~이 아닌 요소 선택하기 : not :not() 선택자는 부정형 선택자입니다. 원문 링크 http://api.jquery.com/not-selector/ not selector jQuery(':not(selector)') 괄호 안의 조건이 아닌 요소들을 찾아냅니다. :not(div a) 나 :not(div, a)와 같은 표현으로 사용할 수 있습니다. .not() 함수를 이용하시는 것이 더 좋은 선택입니다. 복잡한 선택자 구성이나 선택자를 변수로 써야 할때 그리고 가독성을 높이기 위해서는 .not 메소드가 더 낫습니다. 예 제 소스닫기 체크가 되어 있지 않은 체크박스를 찾고 그 바로 다음 요소를 찾아서 바탕색을 노란색으로 바꿉니다. Mary lcm Peter 미리보기 not 선택자 사용법과 이전에 포스팅 했던 prev + next 선택자가 .. 2011. 2. 16. jQuery API 정복 - 다음 형제 요소 찾기 : next ~ siblings ('prev ~ siblings) 는 prev 에 해당하는 요소와 같은 위치의 형제요소를 찾아줍니다. 원문 링크 http://api.jquery.com/next-siblings-selector/ next siblings selector jQuery('prev ~ siblings') prev 유효한 선택자 siblings 선택된 요소와 형제 위치에 있는 요소들 sibling 의 단어의 뜻을 알면 아주 쉬운 문제입니다. sibling 은 형제,자매라는 뜻입니다. 바로 이해되시죠?. 이전에 말씀드린 'prev + next'와 'prev ~ siblings'를 잘 구분해서 사용하셔야 합니다. 예 제 소스닫기 우선 prev 라는 id를 가진 요소를 찾습니다. 그 요소 다음으로 오는 div를 찾습니다. 단, 찾을 .. 2011. 2. 15. jQuery API 정복 - 다음 요소 선택하기 : prev + next ('prev + next') 선택자는 현재 선택된 요소를 기준으로 그 다음 선택자와 일치하는 첫번째 요소를 찾아줍니다. 원문 링크 http://api.jquery.com/next-adjacent-Selector/ next adjacent selector jQuery('prev + next') prev 유효한 선택자 next prev 에 선택된 요소 다음에 오는 next에 해당하는 선택자 한가지 중요한 고려해야 할 포인트가 있습니다. (prev + next) 와 (prev ~ sibilings) 인데요. 약간의 차이점이 있습니다. prev + next 는 prev 에 해당하는 선택자를 기준으로 next 에 해당하는 요소를 깊이에 상관없이 선택을 할 수 있습니다. 반면 prev + sibilings 는 pr.. 2011. 2. 14. jQuery API 정복 - 한번에 여러 요소 선택하기 : Multiple Selector 여러가지의 다양한 요소를 한번에 선택하고 싶을 때 구성할 수 있는 방법입니다. 여러 선택자를 콤마로 연결하면 됩니다. 원문 링크 http://api.jquery.com/multiple-selector/ multiple selector jQuery('selector1, selector2, selectorN') selector1 유효한 선택자 selector2 또 다른 유효한 선택자 selectorN N개 만큼의 유효한 선택자 여러 선택자를 묶어서 사용하여 단 하나의 결과를 나타낼 수 있습니다. 이런 다중 표현 방식은 확실히 다른 요소들을 찾는 효과적인 방법이 됩니다. 이 결합(combinator) 선택자와 동일한 효과를 내는 .add() 함수가 있습니다. 예 제 소스닫기 div, span, p 이면서 my.. 2011. 2. 14. jQuery API 정복 - 다중 속성 필터를 이용한 요소 선택 : Mutiple Attribute Selector 여러가지의 필터 요소를 사용해서 요소를 선택해야 하는 경우가 있습니다. 그럴때는 아래와 같이 하시면 됩니다. 원문 링크 http://api.jquery.com/multiple-attribute-selector/ attributeMultiple selector jQuery('[attributeFilter1][attributeFilter2][attributeFilterN]') attributeFilter1 추출 속성 attributeFilter2 선택 범위를 더 축소 시키는 또 다른 추출 속성attributeFilterN 필요한 만큼 N개의 추출 속성을 정의할 수 있음 동일한 형태의 요소들이 많을 경우 그 범위를 줄이기 위해 이 방법을 사용할 수 있습니다. [name="value"][name2="value2.. 2011. 2. 12. jQuery API 정복 - 마지막 자식 요소 찾기 : last :last 는 일치하는 요소들 중에 가장 마지막 요소를 찾을 수 있습니다. 원문 링크 http://api.jquery.com/last-selector/ last selector jQuery(':last') 예 제 소스닫기 테이블에서 마지막 행(row)를 찾습니다. First Row Middle Row Last Row 미리보기 :last 와 :last-child 를 잘 구분하셔야 겠어요. 제일 마지막 리스트의 색깔을 입히거나 할 때 유용하겠네요. :-) 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 12. jQuery API 정복 - 마지막 자식 요소들 찾기 : last-child :last-child 는 복수개의 마지막 자식 요소를 찾을 수 있습니다. 원문 링크 http://api.jquery.com/last-child-selector/ last-child selector jQuery(':last-child') 비슷한 선택자인 :last 는 단 하나의 요소만 선택이 되지만, :last-child 는 복수개의 부모 요소에서 복수개의 마지막 자식요소가 선택됩니다. 예 제 소스닫기 div 에 속한 마지막 span 태그의 텍스트의 크기를 주변의 80% 로 축소하고 색은 빨간색으로 바꿉니다. 또, 마우스 오버/아웃 시에 텍스트에 줄을 긋는 "solast" 클래스를 적용/삭제합니다. John, Karl, Brandon, Sam Glen, Tane, Ralph, David 미리보기 : 빨간 .. 2011. 2. 11. jQuery API 정복 - 폼에 속한 input 들 선택하기 : jQuery(':input') :input 은 문서상에 있는 모든 input 과 textarea, select, button 요소들을 찾아줍니다. 원문 링크 http://api.jquery.com/input-selector/ input selector jQuery(':input') 폼에 속하는 하위 요소들인 input, textarea, select 와 같은 사용자 입력 요소들을 이 선택자로 모두 찾아낼 수 있습니다. 예 제 소스닫기 모든 input 요소를 찾아서 그 개수를 표시합니다. Option Button 미리보기 위 소스에 보시면 input 선택자를 이용하는 방법과 form 에 속한 모든 요소를 선택하는 방법으로 2가지가 있습니다. 지금 예제 코드의 결과는 13개 요소로 동일한 결과를 보여주지만 실제로 form 태그 안에 di.. 2011. 2. 11. jQuery API 정복 - image 폼 요소 찾기 : jQuery(":image") :image 는 폼 요소 중에서 type="image" 인 요소를 찾습니다. 원문 링크 http://api.jquery.com/image-selector/ image selector jQuery(':image') 예 제 소스닫기 input 중 type 이 image 인 요소를 찾아 빨간 테두리를 두룹니다. Option Button 미리보기 이건 뭐 누워서 떡먹기?? 체합니다. 떡은 앉아서 드세요. :-) 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 10. jQuery API 정복 - ID 로 찾아내기 : jQuery("#id") ("#id") 는 요소의 id 속성값을 이용해서 원하는 요소를 찾을 수 있습니다. 원문 링크 http://api.jquery.com/id-selector/ id selector jQuery('#id') id 이 아이디를 찾기위해 요소들의 id 속성들을 검색합니다. 가장 핵심 선택자가 나왔네요. 아마 클래스명으로 선택하기와 이 아이디로 선택하는 선택자가 가장 많은 활용도가 있을 거라고 생각됩니다. 레이아웃을 작성하면서 id 와 class 속성을 직접 부여하는 일들이 많을 테니까요. 간혹 동적으로 요소들을 생성하거나 삭제하는 경우에는 주로 클래스명으로 사용하는 경우가 많게 되더군요. 어찌됬든 중요한 선택자입니다. 돼지꼬리~. 별표 땡땡 하세요. 개요 : 주어진 id 값으로 단 하나의 요소만 선택합니다. jQ.. 2011. 2. 10. jQuery API 정복 - 안보이는 요소 찾기 : jQuery(':hidden') :hidden 선택자는 화면에 보이지 않는 요소들을 찾아줍니다. 원문 링크 http://api.jquery.com/hidden-selector/ hidden selector jQuery(':hidden') 요소들은 몇가지 원인에 의해 숨겨져 있게 됩니다. ◎ CSS display 속성값이 none 일때 ◎ form 요소 중에 type='hidden' 일때 ◎ 요소의 width 와 height 가 0 일때 ◎ 부모 요소가 보이지 않거나 숨겨져 있을 때 visibility:hidden 이나 opacity:0 속성을 가진 요소들은 레이아웃(layout)을 위해 일정 공간을 차지하고 있기 때문에 보이는 것으로 간주(considered to be visible)됩니다. 요소가 사라지고 있는 동안에는 그 움직임(a.. 2011. 2. 10. jQuery API 정복 - 제목 태그(h1)를 찾자 : jQuery(':header') :header 는 h1, h2, h3 와 같은 제목 요소(header element)들을 선택해 줍니다. 원문 링크 http://api.jquery.com/header-selector/ header selector jQuery(':header') 예 제 소스닫기 제목 태그를 찾아서 회색 바탕에 파란색 글씨 색깔로 바꿉니다. Header 1 Contents 1 Header 2 Contents 2 미리보기 네! 참 쉽죠~. 잘 따라해 보세요~. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 9. jQuery API 정복 - 자식 중에 태그 찾기 : jQuery(':has(selector)') :has() 는 자식 요소들 중에 특정 요소를 찾을 수 있습니다. 원문 링크 http://api.jquery.com/has-selector/ has selector jQuery(':has(selector)') selector Any selector has 는 have 의 3인칭 표현이잖아요. ㅎㅎㅎ '가지고 있다' 라는 뜻이죠? 그쵸? 아 중딩때 영어성적 뽀록나는 순간인가요 :). 어쨌거나 저쨌거나, 뜻풀이 만으로 이 선택자는 무엇을 하는 선택자인지 직관적으로 와닿네요. 무엇이 되었든 뭔가를 가지고 있다면 이라고 해석할 수 있겠네요. $('div:has(p)') 라고 했다면 p 태그를 가진 div 태그를 찾아낼 수 있겠네요. p 태그가 자식요소로 들어만 있으면 됩니다. 그 단계가 몇 단계인지는 고려치 않.. 2011. 2. 9. jQuery API 정복 - 속성이 있는지 찾기 : jQuery('[attribute]') jQuery('[attribute]') 는 attribute 에 해당하는 속성이 있는 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/has-attribute-selector/ attributeHas selector jQuery('[attribute]') attribute 속성명 예 제 소스닫기 div 영역의 텍스트를 클릭했을 때 div 태그에 id 속성이 포함되어 있다면 id 속성값을 텍스트로 추가표시 합니다. no id with id has an id nope 미리보기 : 각 텍스트를 클릭하세요. 스크립트에 보지 못했던 것들이 좀 많이 들어가 있습니다. one() 이라는 함수가 보이고, 'click' 이라는 인자도 보이네요. one() 이라는 함수는 해당 객체에 이벤트를 묶어.. 2011. 2. 8. jQuery API 정복 - 내용이 빈 태그 찾기 : jQuery(':empty') :empty 는 해당 요소의 텍스트가 없을 때 선택되어 집니다. 괜히 표현만 어렵습니다. 백문이 불여일견~ 원문 링크 http://api.jquery.com/empty-selector/ empty selector jQuery(':empty') jQuery.com 에는 이렇게 되어 있습니다. 이 선택자는 :parent 와는 반대입니다. 한가지 중요한 것은 :empty 나 :parent 선택자가 텍스트 노드까지도 자식 요소로 여긴다는 것입니다. W3C 에 따르면 태그는 비록 그 요소가 텍스트(text)여도 반드시 하나의 자식 요소를 포함해야 합니다.(참고 : http://www.w3.org/TR/html401/struct/text.html#edef-P). 반면에 어떤 태그들은 자식요소가 없어도 됩니다. in.. 2011. 2. 8. jQuery API 정복 - 요소명(태그)으로 찾기 : jQuery('element') $('element') 는 태그명을 직접 넣어서 그 태그를 가진 요소를 모두 찾을 수 있습니다. 원문 링크 http://api.jquery.com/element-selector/ element selector jQuery('element') element DOM 노드에 속한 태그명을 뜻합니다. JavaScript 의getElementsByTagName() 함수의 역할을 합니다. 가장 기본적으로 많이 사용하게 될 것 처럼 보입니다. 예 제 소스닫기 div 태그를 찾아서 9픽셀 짜리 빨간 테두리를 그립니다. DIV1 DIV2 SPAN 미리보기 너무도 명확한 예제라서 따로 말씀드릴것도 없네요 ^^ 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 7. jQuery 1.5 버젼이 나왔습니다!! jQuery 1.5 버젼이 Release 되었습니다. 긴 연휴를 지내고 블로그 유입 검색어에 jQuery 1.5에 대한 키워드가 보여서 공식 사이트 들어갔더니 1.5 버젼이 올라와 있네요. 사실 릴리즈된 날은 2011년 1월 31일이네요. 아 너무 신경을 안썼나? ㅡㅡ; 갈길은 먼데 빠른 업데이트가 이루어져서 하하.. 좋은건지 나쁜건지.. 잠깐 살펴봤습니다만 짧은 영어 실력과 jQuery 에 대한 적은 내공으로 말미암아 부실한 포스트가 될 공산이 있어보여서 jQuery.com 의 내용을 고대로 옮기는 것에 주력해야 겠습니다. 먼저 1.5 버젼 다운로드는 아래 링크에서 하실 수 있습니다. 축소버젼 jQuery Minified (29kb Gzipped) 일반버젼 jQuery Regular (207kb) CD.. 2011. 2. 7. jQuery API 정복 - ~보다 작은 요소 선택하기 : jQuery(':lt(index)') :lt('index') 는 요소 집합에서 index 보다 작은 색인을 가지고 있는 요소들을 반환해 줍니다. 원문 링크 http://api.jquery.com/lt-selector/ lt selector jQuery(':lt(index)') index 0 이 초기값인 색인입니다. lt() 함수의 lt 는 less than, '~~보다 작은' 이라는 뜻입니다. 꺽쇠로 치면 < 에 해당합니다.즉, lt(3) 이면 3보다 작은 인덱스를 가진 녀석들 모두를 선택할 수 있습니다. 예 제 소스닫기 4 보다 작은 색인을 가진 td 를 선택해서 텍스트 색을 빨간색으로 바꿉니다. TD #0TD #1TD #2 TD #3TD #4TD #5 TD #6TD #7TD #8 미리보기 lt는 less than 이다는 것만 기억하시면 .. 2011. 2. 7. jQuery API 정복 - ~보다 큰 요소 선택하기 : jQuery(':gt(index)') :gt('index') 는 요소 집합에서 index 보다 큰 색인을 가지고 있는 요소들을 반환해 줍니다. 원문 링크 http://api.jquery.com/gt-selector/ gt selector jQuery(':gt(index)') index 0 이 초기값인 색인입니다. gt() 함수의 gt 는 great than, '~~보다 큰' 이라는 뜻입니다. 꺽쇠로 치면 > 에 해당합니다. 이렇게 풀어 쓰니까 바로 와 닿으시지 않나요 :). 즉, gt(0) 이면 0보다 큰 인덱스를 가진 녀석들 모두를 선택할 수 있습니다. 예 제 소스닫기 4 보다 큰 색인을 가진 td 를 선택해서 텍스트에 줄을 긋습니다. 기억하세요 : 색인의 초기값은 0 입니다. TD #0TD #1TD #2 TD #3TD #4TD #5 TD.. 2011. 2. 1. 이전 1 ··· 7 8 9 10 11 12 다음
