Chain 1. Chain이란?jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다.이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 예제1. jQuery를 이용해서 코딩하는 경우 jQuery 예제2. javascript의 DOM을 이용해서 코딩하는 경우 jQuery cp.) 보충 예제 jQuery 태그의 속성을 변경함 chain의 원리jQuery('#tutorial')--> 리턴값.attr('href', 'http://www.naver.com')--> 리턴값.attr('target', '_blank')--> 리턴값.css('color', 'green')-->사슬처럼 연속적으로 명령문을 칠 수 있다. jQuery 2. chain의 장점- 코드가 간결해진..

Animation 지금까지 학습한 effect는 기본적으로 jQuery에 내장된 함수이다.만약 height 말고 width를 조절하고 싶은 경우, 컬러를 부드럽게 조절하고 싶은 경우, 스크롤을 부드럽게 움직이게 하는 효과를 주고 싶은 경우 등 개인적으로 커스터마이징하여 요소에 효과를 주고 싶을 때,jQuery는 이러한 것들을 해결할 수 있는 함수를 제공해주는 데 그것이 바로 animate() 함수이다. .animate(properties [, duration] [, easing] [, complete])returns: jQuery- properties: 움직임을 만들어 낼 수 있는 CSS 속성들- duration: 애니메이션 시간- easing: 애니메이션에 가.감속을 조절- complete: 애니메이션..

Effects 플래시 전용으로만 생각되었던 다양한 모션 그래픽과 애니매이션 그리고 인터랙티브들을 웹 표준에서 작업할 수 있게 제공해주는 것이 바로 JQuery의 Effects와 Custom와 Custom Animations이다. 1. effect 함수의 매개변수(1) duration시간 값으로, 1/1000밀리세컨드 단위이다.문자열로 "show", "normal", "fast"를 사용할 수도 있으며, 이는 각각 200, 400, 600 밀리세컨드를 의미한다.매개변수 생략시 기본 값은 normal이며 400밀리세컨드로 움직이게 된다.(show(), hide() 제외) (2) easingeasing 함수란, 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미한다.jQuery가 기본적으로 가지고 있는 ..

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 노드들의 부모를 선택하여 배경색을 빨간색을 설정한다...