프로그래밍/jQuery237 jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() .andSelf() 함수는 기존에 선택된 요소에 신규로 선택된 요소들을 스택(stack) 구조로 추가할 수 있습니다. 원문 링크 http://api.jquery.com/andSelf/ .andSelf()Returns: jQuery .andSelf() .end()함수 소개 때에 다시 다루겠지만, jQuery 객체는 매칭되는 요소들의 집합의 구조가 스택(stack)구조로 되어 있습니다. DOM을 검색하는 함수를 사용하면 신규 매칭 요소 집합은 스택 구조로 구성이 됩니다. 만일 이전에 구성되어 있는 요소집합에 이어붙이기를 하시길 원하면 .andSelf함수를 사용하시면 됩니다. jQuery 얘기 중에 스택이 나올 줄은 몰랐네요. ^^;; 먼저 스택에 대해 간단하게 소개드리겠습니다. 스택이란 자료구조의 한 부분입.. 2011. 3. 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 정복 - 폼의 value 가져오기, val() .val() 양식(form)에 들어있는 value 들을 제어할 수 있는 함수입니다. 원문 링크 http://api.jquery.com/val/ 함수들 val() .val() val( value ) .val( value ) .val( function(index, value) ) .attr( attributeName )Returns : String, Array 개요 : 선택된 요소 집합에서 첫번째 요소의 value를 반환한다. .val() .val() 함수는 양식(form) 요소들의 값을 위해 많이 사용되는 함수입니다. 만일 라는 태그에 val() 함수를 사용하면 선택된 옵션(option)들의 value를 배열(array)로 반환해 줍니다. 선택박스(select)나 체크(checkbox)에 사용한다면 :se.. 2011. 3. 17. jQuery API 정복 - 클래스 토글하기, toggleClass .toggleClass() 함수는 특정한 클래스의 추가/제거를 한번에 처리할 수 있습니다. 원문 링크 http://api.jquery.com/toggleClass/ .toggleClass( className )Returns: jQuery 개요 : 선택자에 의해 선택된 요소 집합에 클래스를 설정/제거 할수 있습니다. 클래스를 변경할 조건을 설정할 수도 있습니다. .toggleClass( className ) className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명 .toggleClass( className, switch ) className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명 switch 클래스가 추가되거나 삭제될 조건문 .togg.. 2011. 3. 15. jQuery API 정복 - 클래스 제거, removeClass() .removeClass() 함수는 특정한 클래스를 요소에서 제거할 수 있습니다. 원문 링크 http://api.jquery.com/removeClass/ .removeClass( [ className ] )Returns: jQuery 개요 : 특정 조건에 맞는 요소 집합에서 한개, 여러개, 모든 클래스를 제거할 수 있습니다. .removeClass( [ className ] ) className 특정 조건에 맞는 요소에서 제거될 클래스 명 .removeClass( function(index, class) ) function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the eleme.. 2011. 3. 14. jQuery API 정복 - 속성 제거, removeAttr() .removeAttr() 함수로 요소의 속성을 제거할 수 있습니다. 원문 링크 http://api.jquery.com/removeAttr/ .removeAttr( attributeName )Returns: jQuery .removeAttr( attributeName ) attributeName 제거할 속성명 .removeAttr() 함수는 자바스크립트의 기본 함수인 .removeAttribute() 함수를 이용한 것입니다. 하지만 jQuery 객체를 바로 사용할 수 있고 크로스 브라우징이 되는 장점이 있습니다. 예 제 소스닫기 버튼을 클릭하면 disable 속성이 제거되어 text 박스가 활성화 됩니다. Enable 미리보기 버튼을 클릭하면 텍스트 박스가 살아납니다. .attr() 은 추가 .remove.. 2011. 3. 11. jquery API 정복 - innerHTML 과 같은 표현, html() .html() 원문 링크 http://api.jquery.com/html/ 함수들 html() .html() html( htmlString ) .html( htmlString ) .html( funtion(index, oldhtml) ) .html()Returns : String 개요 : 일치하는 요소 내부의 html을 문자열로 반환한다. .html() html() 함수는 XML 문서에는 사용할 수 없습니다. HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다. 만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다. 아래 예제를 보도록 하죠. $('div.demo-container').html(); 이 구문은 div 태그들중 dem.. 2011. 3. 10. jQuery API 정복 - 클래스가 있나 찾기, hasClass() .hasClass() 함수는 특정한 클래스가 있는지 찾습니다. 원문 링크 http://api.jquery.com/hasClass/ .hasClass( className )Returns: Boolean .addClass( className ) className 찾고자 하는 클래스명 요소들(elements)들은 하나 이상의 클래스명을 가질 수 있습니다. HTML 은 띄어쓰기(space)로 클래스명을 구분합니다. .hasClass() 함수는 클래스명이 일치하는 것이 있을 경우 true를 반환합니다. 여러개가 같이 사용된 클래스에 속해 있을 경우에도 같은 결과를 나타냅니다. 위의 HTML을 아래 예제와 같이 하면 true가 반환됩니다. $('#mydiv').hasClass('foo') foo 와 bar 가 같이.. 2011. 3. 3. jQuery API 정복 - attr(), 속성을 제어하기 .attr() 인자에 따라 2가지로 사용할 수 있습니다. 하나의 인자만 있다면 속성값을 가져오는 것이고 2개의 인자를 쓰면 속성값을 요소에 부여하는 것입니다. 아래 2가지 사용방법에 대해 설명되어 있습니다. 원문 링크 http://api.jquery.com/attr/ 함수들 attr( attributeName ) .attr( attributeName ) attr( attributeName, value ) .attr( attributeName, value ) .attr( map ) .attr( attributeName, function(index, attr) ) .attr( attributeName )Returns : String 개요 : 선택된 요소 집합에서 첫번째 요소의 attributeName에 해당.. 2011. 2. 25. 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. 이전 1 ··· 6 7 8 9 10 11 12 다음