jquery api187 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 정복 - 마지막 자식 요소 찾기 : 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 정복 - 제목 태그(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 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. 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(':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) : [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. 이전 1 ··· 6 7 8 9 10 다음
