본문 바로가기

프로그래밍376

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.
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.

티스토리툴바