본문 바로가기

jquery

[기타] 이벤트 사용할 때 고려해야 할... 사용자가 사용할 컨트롤만 사용하도록 보여지게하고 당장 사용하지 않는 컨트롤들은 보이지 않도록 하는 사용성을 좋게하려할 때 점진적인 공개(progressive disclosure) 원칙을 적용 체크박스가 label 엘리먼트에 포함되도록 함으로써 텍스트를 클릭해도 체크박스 컨트롤을 클릭한 것과 동일하게 컨트롤의 선택 상태를 변경하여 사용성을 높여준다. Fried Imperial rolls (2) CSS를 사용하여 엘리먼트를 감출수도 있지만, $('fieldset div div').hide(); 스크립트를 사용하면 페이지를 로드할 때 부하가 좀 더 걸리긴 하지만 스크립트 사용 옵션을 꺼두는 사용자에게도 유용한 인터페이스를 제공할 수 있다...? $('div', $(this).parents('div:first'.. 더보기
jQuery 이벤트 모델 jQuery의 이벤트 구현 특징 . 이벤트 핸들러를 할당할 수 있는 통합 메서드를 제공 . 엘리먼트의 이벤트 타입마다 여러 핸들러를 할당 . click, mouseover 같은 표준 이벤트 타입명을 사용 . 핸들러의 매개변수를 써서 Event 인스턴스를 사용 . 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용 . 이벤트 해제와 기본 행동을 막는 통합 메서드를 제공 캡쳐 단계를 지원하지 못하며, 하나의 API로 표준 호환 브라우저와 인터넷 익스플로러를 모두 지원 . bind( eventType=String, data=Object, listener=Function ) 일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당 eventType : 핸들러를 할당할.. 더보기
인터넷 익스플로러 이벤트 모델 인터넷 익스플로러 6과 7은 DOM 레벨2 이벤트 모델을 지원하지 않는다. 버블 단계와 유사한 자신만의 인터페이스를 제공 attachEvent(eventName, handler) eventName : DOM 레벨0 모델의 엘리먼트 프로퍼티와 동일한 이름을 사용 handler : 핸들러로 덧붙일 함수 Event 인스턴스는 window.event 프로퍼티에서 참조해야 더보기
DOM 레벨2 이벤트 모델 DOM 레벨0 이벤트 모델의 단점은 엘리먼트의 특정 이벤트 타입에 한 이벤트 핸들러만 할당할 수 있다는 것 . 이벤트 할당하기 DOM 레벨2에서는 특정 엘리먼트 메서드를 사용하여 이벤트 핸들러를 할당 각 DOM 엘리먼트는 이벤트 핸들러를 덧붙일 수 있는 addEventListener()메서드를 정의 addEventListener( eventType, listener, useCapture ) eventType : DOM 레벨0 이벤트 모델의 이벤트명에서 'on' 접두어를 뺀 것. click, keydown등 listener : 핸들러로 할당할 함수의 참조나 인라인 함수 useCapture : event 캡처 단계에서 사용할지의 Boolean값. true - 캡처 단계 핸들러로 실행, false - 버블 단.. 더보기
DOM 레벨0 이벤트 모델 . 브라우저 이벤트 모델 이해하기 브라우저의 이벤트 처리표준이 생기기 전 네스케이프 내비게이터(Netscape Navigator) 브라우저에 이벤트 핸들링 모델을 도입한 것을 DOM 레벨0 이벤트 모델 참고 - DOM레벨은 W3C DOM명세를 구현의 요구 수준을 지칭하는데 사용한다. 사실 DOM레벨0 이라는 것은 없다. 다만 DOM 레벨1 이전에 구현한 것들을 비공식적으로 지칭한다. W3C는 2000년 11월 DOM 레벨2를 발표 파이어폭스나 카미노(Camino)와 같은 모질라 기반 브라우저, 사파리, 오페라(Opera)와 같은 최신 표준을 준수하는 브라우저들이 이 모델을 지원한다. 인터넷 익스플로러(Internet Explorer)는 자체 표준이 있으며 자신만의 인터페이스를 사용하긴 하나 DOM 레벨2.. 더보기
폼 엘리먼트 값 다루기 . val() 일치하는 집합에 있는 첫 번째 엘리먼트의 value 프로퍼티를 반환 다중선택이 가능한(multiple 어트리뷰트가 true인) 엘리먼트는 배열을 return ※ 체크박스, 라디오 버튼이 선택되었는지에 관계없이 value 어트리뷰트의 값을 return한다. 아무것도 선택되지 않았다면 undefined를 return $('[name=radioGroup]:checked').val() . val(value) 매개변수로 전달된 값을 일치하는 모든 폼 엘리먼트의 value 프로퍼티로 설정 . val(values=Array) 전달된 values 배열의 값과 일치하는 확장 집합에 있는 체크박스, 라디오 버튼을 선택하고, 엘리먼트의 옵션을 선택 $('input,select').val(['하나','둘','셋.. 더보기
엘리먼트 콘텐츠 설정하기 . html() 일치하는 집합에서 첫 번째 엘리먼트의 HTML 콘텐츠를 가져온다. 엘리먼트의 innerHTML 프로퍼티 값과 동일 . html(text) 전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정 . text() 확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 return . text(content) 모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정 content에 ''를 포함한다면, HTML 엔티티로 대체된다. ※ ''는 '>'로 대체 ※ http://www.w3schools.com/HTML/html_entities.asp . append(content=String|Element|Object) 일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML코드나 엘리먼트를 덧붙인다. $('p.. 더보기
엘리먼트 스타일 변경하기 . addClass(names) 매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가 여러 클래스명을 추가할 때는 공백으로 구분 . removeClass(names) 매개변수로 전달된 하나 이상의 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거 . toggleClass(name) 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거 각 엘리먼트 개별로 처리되므로 추가되기도 제거되기도 한다. function swap() { $('tr').toggleClass('striped'); } . css(name, value=String|Number|Function) 일치하는 각 엘리먼트에 name 매개변수의 CSS 스타일 프로퍼티를 value 매개변수로 설정.. 더보기
프로퍼티와 어트리뷰트 조작하기 . 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출 : each(iterator) 함수의 인자 n은 0 부터 시작하는 인덱스를 매개변수로 받는다. 함수로 처리된 확장 집합을 return한다. $('img').each( function(n) { this.alt = '아이디가 ' + this.id + '인 image['+n+']이다.'; } ); var allAlts = new Array(); $('img').each( function(n) { allAlts.push( this.alt ); } ); . 일치하는 집합의 첫 번째 엘리먼트에서 명시된 어트리뷰트의 값을 얻는다. : attr(name) 일치하는 집합이 없거나, 첫 번째 엘리먼트에 어트리뷰트가 없다면 undefined를 반환 $("#myIm.. 더보기
확장 집합 다루기 . 확장된 집합의 크기(개수) : length, size() $('#someDiv').html('페이지에는 총 '+$('a').size()+'개의 링크가 있다.'); . 확장된 집합에서 (하나 또는 모든) 엘리먼트 획득하기 : [0], get(0) $('img[alt]')[0] 또는 $('img[alt]').get(0) var allLabeledButtons = $('label+button').get(); . 인덱스 확인 : index(element) 발견되지 않으면 -1 return var n = $('img').index( $('img#findMe')[0] ); * element 집합을 전달할 경우, 첫 번째 엘리먼트의 인덱스를 반환 . 확장 집합에 다른 엘리먼트 추가하기 : add(jQuery셀렉터.. 더보기