[jQuery] Effects

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가 기본적으로 가지고 있는 ..

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 8.
• textsms

[jQuery] Event

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

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 8.
• textsms

[jQuery] Attribute/CSS

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

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 8.
• textsms

[jQuery] DOM Manipulation

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

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 8.
• textsms

[jQuery] Traversing

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

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 7.
• textsms

[jQuery] Wrapper

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

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 7.
• textsms

[jQuery] Selector

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

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 7.
• textsms

[JavaScript] 이벤트 타입

이벤트 타입 아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다. 사용자 정보가 유효한지 여부를 확인하기 위해 이벤트를 많이 사용한다.웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다. 1. 폼폼과 관련된 이벤트 타입을 알아보자. (1) submit- submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.- form 태그에 적용된다.아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다. name (2) change- change는 폼 컨트롤(value의 값)의 `값이 변경 되었을 때 발생하는 이..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 이벤트 등록방법

이벤트 등록방법 1. inline인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.(해당 태그안에 이벤트가 속성으로 직접 들어간 경우) 다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.자바스크립트에서 this는 어떤 함수에서 this를 사용한다는 것은 그 함수가 속해있는 객체를 의미(자기 자신을 의미) this는 이벤트가 동작하고 있는 엘리먼트(input)을 가리킨다. --> 짧고 편리하게 코드를 작성할 수 있다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 ..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 이벤트

이벤트 1. 이벤트란?이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. (1) event targettarget은 이벤트가 일어날 객체(button)를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다. (2) event type이벤트의 종류를 의미한다. 위..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms