본문 바로가기

프로그래밍376

jQuery API 정복 - 자식 요소 선택하기 : jQuery('ancestor descendant') jQuery('ancestor descendant') 는 부모(ancestor)에 속한 자식(descendant)를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/descendant-selector/ descendant selector 개요 : 자식요소를 찾는 선택자입니다. jQuery('ancestor descendant') ancestor 는 '조상, 부모' 의 뜻입니다. descendant 는 '후손, 자식' 의 뜻이죠. 아마 고딩2년 정도 수준의 단어 였던걸로 기억합니다. 전 구글 사전으로 검색했습니다. 쿨럭;; 한글로 된 도스가 있었다는 얘기는 들었는데, 영어만 잘 하면 이 공부도 좀 더 수월해 지지 않나 생각해 봅니다. 단어의 뜻만 알아도 이 선택자의 역할이 무엇인지 와.. 2011. 1. 27.
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) : 하위 요소 선택 ("parent > child") parent > child 는 parent 에 속한 child를 찾습니다. 원문 링크 http://api.jquery.com/child-selector/ Child Selector (“parent > child”) jQuery('parent > child') parent 유효한 선택요소 child parent 에 속한 자식 요소 parent > child 는 스타일시트의 표현방식입니다. parent 에 속하는 child 요소에 어떤 스타일을 주고 싶을 때 사용됩니다. 그런데 이 CSS 방법은 IE6 버젼에서는 호환이 되지 않습니다. 그러나 이 선택 방법을 이용하여 jQuery 에서는 해당 요소에 접근할 수 있도록 선택자를 만들었습니다. 부모의 하위에 있는 모든 자식요소들을 선택하는 것이 아닙니다. 바로 .. 2011. 1. 27.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크된 체크박스만 알아내기 :checked 는 체크박스나 라디오버튼 들 중에 체크가 되어 있는 요소만 찾는 선택자입니다. 원문 링크 http://api.jquery.com/checked-selector/ checkbox selector 개요 : 체크박스나 라디오버튼 태그 중에 선택되어 있는 요소를 찾습니다. jQuery(':checked') :checked 는 checkbox 나 radio buttons 들에 해당됩니다. 콤보(select) 박스는 :selected 선택자를 사용하세요. 예 제 소스닫기 체크박스를 클릭할 때마다 그 상태를 체크하여 만일 선택(체크)상태이면 체크된 상태인 개수를 알려줍니다. 미리보기 위 소스중에 보시면 n 2011. 1. 26.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크박스를 찾자 :checkbox 는 input 중에 체크박스를 찾는 선택자입니다. 원문 링크 http://api.jquery.com/checkbox-selector/ checkbox selector 개요 : input 태그 중에 type 이 checkbox 인 요소를 찾습니다. jQuery(':checkbox') $('checkbox') 는 $('[type=checkbox]') 로 사용할 수 있습니다. 가상 클래스(pseudo-class) 선택자(":" 와 같은)를 사용하실 때는 그 앞에 태그명이나 다른 선택자를 포함하시기를 권장합니다. 그렇지 않으면 모두 선택하기 선택자("*") 가 암묵적으로 사용하게 됩니다. 즉, $(':checkbox') 은 $('*:checkbox') 나 마찬가지입니다. 그래서 $('input.. 2011. 1. 26.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 :button 선택자는 button 요소 또는 input 요소중에 type이 button 인 요소를 찾아줍니다. 원문 링크 http://api.jquery.com/button-selector/ button selector 개요 : 문서에서 타입이 button 인 input 또는 button 요소를 찾아줍니다. jQuery(':button') 예 제 1. button 형태의 input 요소를 찾아서 배경색을 노란색으로 테두리를 3px 의 빨간색으로 처리합니다. 2. 그 후 문서에서 div 요소를 찾아서 그 안에 발견된 button 의 개수를 빨간색의 텍스트로 표시해 줍니다. Option Button 미리보기 html 의 form 을 표현하는 태그들은 종류가 여러가지입니다. 위에 보시면 아시겠죠? 그 중에 .. 2011. 1. 25.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name^="value"] [name^="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 시작부분에 포함되어 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-starts-with-selector/ attributeStartsWith selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 문자열이 시작부분에 포함되어 있는 요소를 찾아 줍니다. jQuery('[attribute^="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "news" 라는 단어로 시작하고 있는 요소를 .. 2011. 1. 24.
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.
jQuery 를 이용한 슬라이드 이미지 이번 포스팅은 이전에 제가 제작한 jQuery 를 사용하지 않은 자바스크립트 이미지 슬라이더에 버그가 있어서 jQuery 를 사용한 슬라이드를 긴급 제작하여 쓰는 글입니다. 역시 안정적인 라이브러리를 사용하는게 아주 중요합니다. ^^;; 음 그런데 한가지 제약이 있습니다. 이 스크립트를 사용하기 위해서는 HTML 과 StyleSheet 를 어느정도 수준으로 구사하실 수가 있어야 합니다. 그 부분까지 모두 다 설명드릴 수는 없는 점 양해 부탁드립니다. 일단 데모부터 확인해 주세요. 미리보기 jQuery.banner.js 파일이 필요합니다. 이 파일도 다운받아 적절한 위치에 가져다 놓으셔야 합니다. 소스는 하단에 첨부하겠습니다. 일단 사용법을 말씀드리면.$(function() { $("#image_list_.. 2011. 1. 22.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name="value"] [name="value"] 는 태그의 name 속성명에 들어가 있는 문자가 "value" 와 일치하는 요소를 찾습니다. 원문 링크 http://api.jquery.com/attribute-equals-selector/ attributeEquals selector 개요 : 태그가 가진 속성(attributes)의 값(value)과 문자열이 일치하는 요소를 찾아 줍니다. jQuery('[attribute="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 type 이 radio인 input 태그들 중에 name 속성(attribute)의 값이 "newsletter" 인 요소를 찾아서 그 다음 요소(태그)의 텍스트를 "is newsletter" 로 바꿉니.. 2011. 1. 22.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name$="value"] [name$="value"] 는 태그의 name 속성명에 들어가 있는 문자의 끝에서 부터 "value" 에 해당되는 문자가 포함되어 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-ends-with-selector/ attributeEndsWith selector 개요 : 태그가 가진 속성(attributes)의 값(value)의 뒷쪽부터 문자열이 포함되어 있는 요소를 찾아 줍니다. jQuery('[attribute$="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값의 뒷쪽부터 "letter" 이라는 단어를 포함하고 있는 요.. 2011. 1. 22.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name~="value"] [name~="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 구분되는 단어로 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-word-selector/ attributeContainsWord selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 선택자로 주어진 문자열이 단어의 형태로 들어가 있으면 반환해 줍니다. jQuery('[attribute~="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "man" 이라는 단어.. 2011. 1. 21.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name*="value"] [name*="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 위치에 상관없이 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-selector/ attributeContains selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 문자열이 포함되어 있는 요소를 찾아 줍니다. jQuery('[attribute*="value"]') attribute 태그의 속성 value 속성의 값, 따옴표를 사용해야 합니다. 예 제 문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "man" 이라는 단어를 포함하고 있는 요소를 찾아서 'man .. 2011. 1. 21.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"] [name|="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 앞쪽에 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-prefix-selector/ attributeContainsPrefix selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 하이픈(-)이 포함되어 있을 때 해당 문자열로 시작되는 요소를 찾아 줍니다. jQuery('[attribute|="value"]') attribute 태그의 속성 value 속성의 값 예 제 문서에 모든 링크 중에 hreflang 속성(attribute)의 값이 "en" 으로 시작되는 요소를 찾아서 3px 의 테.. 2011. 1. 20.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : ":animated" ":animated" 는 화면에서 움직이는 요소를 찾아내는 선택자입니다.원문 링크 http://api.jquery.com/animated-selector/animated selector개요 : 화면에서 움직이는(animated) 요소를 찾아줍니다.예 제 화면에서 움직이는 요소를 찾아 색깔을 바꿔 줍니다. Run 미리보기 와. 간단하네요. jQuery 좋지 않으세요? ^^.그럼 즐프하세요. 2011. 1. 20.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selectors) : All Selector ("*") 선택자(selector)는 jQuery에서 가장 중요한 요소입니다. 화면에서 원하는 곳을 선택하기 위해 적절한 선택자를 사용해야 하고, 그것을 원활히 처리할 수 있는 방법으로 마크업 구조를 짜야 합니다. 선택자에 할당된 내용은 꽤 많습니다. 하나당 하나씩 포스팅을 할 예정입니다. 예제가 많은 편이라 재미있는 내용이 되겠네요. jQuery 의 Selector 시작하겠습니다. All Selector ("*") 모든 요소를 선택할 때 사용합니다. 원문 링크 http://api.jquery.com/all-selector/ all selector 개요 : CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열을 사용합니다. jQuery("*") 주의 : 이 선택자는 사용하지 않.. 2011. 1. 19.
개발용 폰트 개발할때 영(0)하고 대문자(O) 이런거 잘 구분안된다. 그리고 소문자 엘(l), 대문자 아이(I) 진짜 구분안된다. 그래서 난 andale mono 폰트를 사용한다. 구분 잘 되서 좋다.. 더 자세한건 이 분의 포스트를 보시면 됩니다.. 사용 하실 분은 첨부파일 거거 http://lohan.tistory.com/64 2011. 1. 19.
[ASP] AJAX 한글 처리 와우 한참 찾았다. 상품 리스트를 뿌려야 하는데.. 페이지들을 utf-8로 바꾸는게 영 못마땅해서 걍 처리할 수 있는 방법이 없나 찾았다. 아무리 찾아도 여러가지 인코딩, 디코딩 다 했는데.. 난 또 asp 에서 js 에 있는 함수를 호출하는거라 잘 안됬는데..... 답은 너무도 간단... ㅡㅡㅋ 내 구조는 asp + js 에서 상품리스트반환.asp 를 호출하고 상품반환리스트.asp 에서 response.write 를 하면 ajax콜백 메소드가 위치한 js 파일의 함수를 호출하게 되어 있는데... 이것 저것 해보다가.. 상품반환리스트.asp에서 2011. 1. 19.
[javascript] AJAX + JSON 의 eval() 함수 사용의 문제 상품등록 화면을 ajax로 처리하다 보니 데이터의 자료구조를 잘 만들어야 할 필요가 있다. 그래서 json 의 사용.. 배열과 크게 다를건 없지만 걍 객체지향 냄새가 좀더 난다는거.. 그리고 배열 요소(인덱스) 처리하느라 골머리 썩지 않는 점은 참 좋다. 직관적이기도 하고.. 그런데 json 데이터를 객체화 하기 위해 자바스크립트의 eval! 메소드를 사용해야 하는데.. 이게 악성코드를 실행시킬 위험이 있단다. 그래서 json.org/json2.js 배포파일이 필요하게 됬다. 더 상세한건 http://blog.outsider.ne.kr/257 요분의 포스팅이 참 도움이 된다. 땡큐베리 감사... 어찌됬든 eval!(o.responseText) 가 아닌 JSON.parse(o.responseText)로.. 2011. 1. 19.

티스토리툴바