jQuery228 jQuery API 정복 - addClass(), 클래스 추가하기 .addClass() 함수는 특정한 클래스를 요소에 추가할 수 있습니다. 원문 링크 http://api.jquery.com/addClass/ .addClass( className )Returns: jQuery .addClass( className ) className 특정 조건에 추가할 하나 이상의 클래스 명 .addClass( function(index, class) ) function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;) 가장 .. 2011. 2. 25. jQuery API 정복 - 눈에 보이는 요소 찾기 : visible :visible 선택자는 눈에 보이는 요소를 찾아 줍니다. 원문 링크 http://api.jquery.com/visible-selector/ visible selector jQuery(':visible') 예 제 소스닫기 div 중에 보이는 요소라면 클릭시에 노란색으로 변경한다. 버튼을 클릭하면 보이지 않는 요소를 보이게 한다. Show hidden to see they don't change 미리보기 소스는 별거 없네요. 그런데 예제는 재미있습니다. 한번씩 해보세요. :visible 이 있으니 :hidden 도 있겠죠. 이전 포스트에 있습니다. 한번 더 보셔도 좋을 듯 해요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 24. jQuery API 정복 - text 박스 찾기 : text :text 는 input 중 type이 text 인 요소를 찾습니다. 원문 링크 http://api.jquery.com/text-selector/ text selector jQuery(':text') 예 제 소스닫기 텍스트 박스를 찾습니다. Option Button 미리보기 $(':text') 선택자는 $('[type=text]') 로 대체하여 사용할 수 있습니다. 뭐 너무 평이해서 사족을 달게 없어요. ^^;; 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 24. jQuery API 정복 - submit 버튼 찾기 : submit :submit 선택자는 폼 요소 중 type이 submit 인 것을 찾습니다. 원문 링크 http://api.jquery.com/submit-selector/ checkbox selector jQuery(':submit') 예 제 소스닫기 submit 버튼을 찾아서 색을 입힙니다. td 요소를 생성하여 input 의 타입을 표시해 줍니다. Element Type Element 2011. 2. 22. jQuery API 정복 - select 박스에서 선택된 것 찾기 : selected :selected 는 선택박스에서 선택된 요소를 반환해 줍니다. 원문 링크 http://api.jquery.com/selected-selector/ selected selector jQuery(':selected') :selected 선택자는 태그 전용입니다. 체크박스나 라디오 버튼은 :checked 선택자를 사용하셔야 합니다. 예 제 소스닫기 선택된 것의 텍스트를 표시해 줍니다. 다중 선택이 가능하니 컨트롤 키를 누른 상태에서 선택해 보세요. Flowers Shrubs Trees Bushes Grass Dirt 미리보기 select 의 change 함수가 나왔네요. 뭔가가 변화된다면 호출되는 함수입니다. 기본 JavaScript의 이벤트함수인 onchange의 역할을 하네요. 그리고 그 안에 each .. 2011. 2. 22. jQuery API 정복 - reset 버튼 찾기 : reset :reset 은 input 의 type=reset 인 요소를 찾습니다. 원문 링크 http://api.jquery.com/reset-selector/ reset selector jQuery(':reset') 예 제 소스닫기 reset 버튼을 찾습니다. Option Button 미리보기 뭐 딱히 추가할게 없어요 ^^;;;; 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 21. jQuery API 정복 - radio 버튼 찾기 : radio :radio 는 input 의 type 이 radio 인 요소를 찾아줍니다. 원문 링크 http://api.jquery.com/radio-selector/ radio selector jQuery(':radio') 예 제 소스닫기 type 이 radio 인 버튼을 찾아 빨간색을 두릅니다. Option Button 미리보기 흔히 쓰는 성별을 가져오기 위해서 사용할려면 $('input[name=gender]:radio') 이런식으로 사용하시면 된다고 하네요. 남/녀 찾기 참 쉽죠잉~ input 에 관련된 선택자들은 참 사용하기 쉬운 것 같습니다. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 21. jQuery API 정복 - type=password 인 것 찾기 : password :password 는 input 의 type이 password 인 요소를 찾습니다. 원문 링크 http://api.jquery.com/password-selector/ password selector jQuery(':password') 예 제 소스닫기 input 중에 password 타입을 찾아서 빨간색을 두릅니다. Option Button 미리보기 평이합니다. 패스~ 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 18. jQuery API 정복 - 다른 요소를 포함한 요소 찾기 : parent :parent 는 텍스트 노드를 포함한 요소를 가지고 있는 상위 요소를 찾습니다. 원문 링크 http://api.jquery.com/parent-selector/ parent selector jQuery(':parent') 음, 느낌으로만 보자면 parent 선택자가 마치 부모요소를 찾는 선택자인 것처럼 보입니다만, jQuery.com의 설명은 조금 다릅니다. 부모를 선택하는 것은 맥락상 맞지만 조금 관점이 다른 것 같네요. 부연 설명을 보시죠. 이 선택자는 :empty 선택자와 반대 선택자입니다. (:child 가 아닌것에 주목하세요.) 한가지 중요한 사실은 :parent (또는 :empty) 선택자는 text 노드도 자식 요소로 여긴다는 점입니다. W3C 에 따르면 태그는 적어도 하나의 자식 노드를 .. 2011. 2. 18. jQuery API 정복 - 유일한 자식 요소 찾기 : only-child :only-child 자기가 유일한 자식인 요소를 찾아 줍니다. 원문 링크 http://api.jquery.com/only-child-selector/ only-child selector jQuery(':only-child') 예 제 소스닫기 형제가 없는 버튼을 찾아서 색을 바꿔줍니다. Sibling! Sibling! Sibling! None Sibling! Sibling! Sibling! Sibling! 미리보기 딱 보시면 아시겠죠? 외아들 또는 외동딸 보면 티 나잖아요. 하하;;; 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 2. 17. jQuery API 정복 - 홀수번째 요소 찾기 : odd :odd 선택자는 요소 집합에서 index 기준으로 색인이 홀수인 요소를 찾아줍니다. 원문 링크 http://api.jquery.com/odd-selector/ odd selector jQuery(':odd') 색인 기준으로 보면 홀수지만 눈으로 보이는 것은 짝수번째 인것처럼 보입니다. 그건 우리가 숫자를 배울때 1부터 배워서 그런건데요. 프로그램에서는 0이 시작점입니다. 그러니까 색인 기준으로 홀수번째 요소를 선택하고 싶으시면 이 선택자를 사용하시면 됩니다. 예 제 소스닫기 테이블에서 홀수번째 rows 를 선택해서 색을 입힙니다. (index 1, 3, 4 etc) 기억하세요 : 색인의 초기값은 0 입니다. Row with Index #0 Row with Index #1 Row with Index #2.. 2011. 2. 17. 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. 이전 1 ··· 6 7 8 9 10 11 12 다음