Event 사용자의 반응을 기다리거나 그 사건이 일어날 때까지 기다리다가 그 사건이 일어났을 때에 바로 프로그램이 실행되도록 해주는 개념이 바로 '이벤트'이다. jQuery에서는 기본적으로 마우스 관련 이벤트 뿐만아니라 문서로딩, 폼, 키보드, 스트롤과 관련되 많은 이벤트가 제공된다. 기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되지만 함수로 묶인 부분은 호출되지 않으면 실행되지 않는다.이러한 이유 때문에 원하는 시점에 원하는 기능을 실행하기 위해서는 프로그램 실행의 계기가 되는 점이 필요하다. 이러한 역할을 하는 것이 Event이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다. 1. JQuery 이벤트 처리 방식 (1) 객체에 직접 이벤트를 등록$("#obj")..

Attribute/CSS Selector를 사용하여 조작을 원하는 HTML 노드를 선택했다면, 이제는 선택한 노드에 어떠한 작업을 할 순서이다.선택한 노드의 속성 값을 가져오거나 텍스트를 변경할 수 있고, CSS() 함수를 사용하면 CSS에 의해 적용되는 상태를 동적인 상황에서도 변경할 수 있다. jQuery의 강력한 기능 중 하나는 CSS를 조작할 수 있다는 것이다. 일반적인 CSS는 HTML의 구조에 표현을 입히는 작업이라 할 수 있는데, jQuery의 CSS 관련 메서드는 동적으로 CSS를 변경할 수 있다는 것이 가장 큰 장점이다. 변경을 할 때에 클래스를 추가할 수도 있고, 제거할 수도 있기 때문에 매우 유용하다. ※ 태그의 배경색을 빨간색으로 설정 CSS jQuery.CSS() p {backgr..

DOM Manipulation DOM Manipulation은 DOM 구조를 변경할 수 있는 jQuery 메서드들이다. 동적으로 문서 구조를 변경할 수 있고, 특정 노드의 내.외부 삽입과 삭제도 가능하다. 1. DOM Insertion, Inside 메서드 기 능 append() 선택된 내부의 맨 뒤에 자식 노드를 새로 추가한다. appendTo(target) 새로운 노드를 target에 해당하는 노드 내부의 마지막에 추가한다. prepend() 선택된 노드 내부의 맨 앞에 자식 노드를 새로 추가한다. prependTo(target) 새로운 노드를 target에 해당하는 노드 내부의 첫 번째로 추가한다. html() 노드 내부의 HTML을 읽고 쓸 수 있다. text() 노드의 텍스트를 읽고 쓸 수 있다..

Traversing Traversing에 나열되어 있는 jQuery 메서드들은 jQuery의 선택자를 기준으로 하여 새로운 노드를 찾아가는 방법을 제공한다. 1. 트리 구조 탐색(Tree Traversal)DOM에 접근하여 원하는 노드를 찾는 방법을 제공한다. 즉, DOM Tree 구조를 기반으로 찾아가는 방식이다. 이 방법을 잘 활용하며 DOM에 id나 class를 최소한으로 사용할 수 있다.선택한 노드를 기준으로 형제, 자식, 부모 등으로 접근하는 다양한 방법이 있다.ex.)jQuery('li).parent().css('background-color','red');// parent() 메서드는 현재 지정된 li의 부모 노드를 의미한다. 따라서 li 노드들의 부모를 선택하여 배경색을 빨간색을 설정한다...

Wrapper 1. 레퍼(wrapper)란? --> jQuery의 시작점jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환 2. 레퍼의 안전한 사용$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리(다른 라이브러리도 $를 쓴다.)들과의 충돌 때문에 다음과 같은 방법을 사용한다.(1) 첫번째 방법: $대신 고유명사 jQuery를 쓴다. (2) 두번째 방법 3. 제어 대상을 지정하는 방법- jQuery( selector, [context] )([context]는 옵션이다.)- jQuery( element )예제 1. jQuery( selector, [context] ) te..

Selector 문서 구조에서 원하는 HTML 노드를 선택하기 위해 Selector를 사용한다. 1. 기본 선택자(Basic)$('h2')웹 페이지에서 태그를 모두 선택 $('.group')웹 페이지에서 class 속성이 group인 것을 모두 선택 $('#main')웹 페이지에서 id 속성이 "main"인 것을 선택 $('p, div, #nav')웹 페이지에서 , , id 속성이 nav인 노드를 모두 선택 $('*')웹 페이지에서 모든 노드를 선택 2. 계층 선택자(Hierarchy)$('div#container li')id 속성이 #container인 태그의 자손 태그중 태그를 모두 선택 $('div > p') 태그의 자식 태그 중 (자손태그는 포함하지 않음) 태그를 선택 $('#first + li'..

[jQuery] jQuery API (7/7) - 선택자 - "*" : 전체 선택자 속성 선택자 - [name] : name 속성이 있는 요소를 선택 - [name = "value"][name2 = "value2"] : name 속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 - [name = "value"] : name 속성의 값이 value인 요소를 선택한다. - [name != "value"] : name 속성의 값이 value가 아닌 요소를 선택한다. - [name ^= "value"] : name 속성의 값이 value로 시작하는 요소를 선택한다. - [name |= "value"] : name 속성의 값이 value 이거나 value로 시작하는 요소를 선택한다. ..

[jQuery] jQuery API (6/7) - Ajax 6. Ajax$.param() : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다. var params = {width : 1680, height : 1050}; // 배열 선언 var str = $.param(params); // Ajax로 전송가능하도록 직렬화 // $.param({a:[2,3,4]}); // "a[]=2&a[]=3&a[]4" // $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5" .serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다. / $("#name").serialize(); // i..

[jQuery] jQuery API (5/7) - Event 5. Event - event 제어 .bind() : event가 발생하면 실행될 함수를 지정한다. (이미 생성된 DOM에 대하여) / $("#image").bind("mousedown", function(){ // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 });.unbind() : bind()를 해제한다. .live() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 발생 가능) / $("#image").live("click", function(){ // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 });.die() : live() 제거 .delegate() : 동적으로 ..

[jQuery] jQuery API (4/7) - 효과4. 효과.animate() : 해당 객체의 CSS 변화 효과를 준다. /$('p').animate({CSS Map}, {options}); / $('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', complete : function(){....}}); {queue:false} .delay() : 해당 시간만큼 실행을 delay 시킨다. / $("div").slideDown().delay(5000).slideUp(); // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다. .stop() : 실행중인 애니메이션을 중지한다. $("div")..