Practice makes perfect

Plug In이란? : 개발자가 jQuery 자체를 확장하여 사용할 수 있도록 제공해 주는 jQuery 라이브러리의 한 형태 medienfreunde.de/lab/innerfade/ InnerFade with jquery InnerFade with JQuery What is it? InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce y medienfreunde.de ..

1. 해당 엘리먼트를 사라지게 하기 Show it Hide it Show it slow Hide it slow 2. 해당 엘리먼트를 사라지게 하기(2) Show Hide it Show it slow Hide it slow 3. Sliding slideDown - 밑으로 내려오도록 합니다 . slideUp - 위로 올라가도록 합니다. slideTogggle - 천천히 내려오도록 합니다. slideTogggle - 천천히 올라가도록 합니다. 4. 해당 엘리먼트를 서서히 보이게 하기 - display : none 숨겨져 있음 - fadeIn 매서드를 활용하여 서서히 보이도록 합니다. 5. 페이딩 - 기본 환경 - - fadeIn - - f..

1. 이벤트 연결1 on() : 이벤트 연결 사용 형태 1) $(selector).on(eventName, function(event){ }); click - 마우스 click시 이벤트 연결 ( 함수 호출 ) click 할 때, ' + ' 가 추가 되어 출력 사용 형태 2) $(selector).on(object); mouseenter : 마우스가 해당 태그 안으로 들어가는 순간 이벤트 수행 - 마우스가 들어가는 순간 reverse 추가 mouseleave : 마우스가 해당 태그를 벗어나는 순간 이벤트 수행 - 마우스가 벗어나는 순간 reverse 제거 - 마우스가 태그에 들어갔을 때 - 마우스가 태그에 벗어났을 때 2. 이벤트 연결2 hover():mouseenter 이벤트..

1. 문서 객체의 클래스 속성 추가 - addClass() : 문서 객체의 클래스 속성을 추가 예제1. 매개변수에 문자열 입력 - 추가적인 변화를 주고 싶을 때 사용. 예제2. 매개변수에 함수 입력 2. 문서 객체의 클래스 속성 제거 - removeClass(): 문서 객체의 클래스 속성을 제거. - 여러 개의 클래스 속성 중 선택적으로 제거. 3. 문서 객체의 속성 검사 -attr(): 속성과 관련된 모든 기능 수행, 첫번째 문서 객체의 속성 출력. 4. 문서 객체의 스타일 검사 css(): 스타일과 관련된 모든 기능을 수행 5. 문서 객체의 내부 검사 - 기존 자바스크립트에서 문서 객체의 innerHTML 속성과 관련된 jQuery 메서드 1)..

1. 기본 필터링 메서드 filter() 메서드 사용 두 가지 형태 ① $(selector).filter(selector); ② $(selector).filter(function(index){}); 예제 : 짝수 번째 속성 적용 ( index 시작 0으로 출력값 볼 때는 홀수 번째 위치로 보입니다) 요소 : even -> 짝수 번째에 위치한 문서 객체 선택 filter() 메서드 적용 형태 1 filter() 메서드 적용 형태 2 3의 배수 줄의 기능 제공 (0,3,6,9...) 0을 제외한 3의 배수만 출력하고 싶을 때, 3n+2 2. 문서 객체 탐색 종료 예제1 - 체이닝을 사용해 한 줄로 서로 다른 문서 객체에 스타일 적용 가능 메서드 체이닝 = 매서드를 ..

$(document).ready(function(){}); - jQuery 의 매서드 , 문서가 준비 완료되면 매개변수로 전달된 함수를 실행하라는 의미 - jQuery 를 통해서 함수를 전달 할 수 있다. (javascript의 onload와 같은 효과) $(function(){}); = 간단한 형식 정의 , 더 많이 사용됩니다. jQuery 기본 선택자 - jQuery 메서드의 가장 기본적인 형태 문서 객체를 다룰 때 사용하는 형태 css의 선택자를 그대로 사용할 수 있도록 만듬. jQuery에서 가장 많이 사용하는 형태 => $('h1').css('color', 'red'); // 선택자. 스타일시트 활용 가능 전체 선택자 태그 선택자 아이디 선택자 - # ..

배열 배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 데이터는 순차적으로 저장되며 중복이 가능합니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다. each() 메서드 사용 매개 변수로 입력한 함수 사용으로, for in 반복문처럼 객체나 배열의 요소 검사하는 메서드 - 모든 데이터를 읽어오면서 기능을 수행하기 때문에 코드를 간단하게 할 수 있으며, 구현에 편리성 존재 - 각 객체에 서로 다른 class 속성을 설정하고 싶을 때 each() 메서드 사용 each() 메서드의 형태 $.each(object, function(index, item){}); : 반복문과 같이 object 값을 읽어옵니다. 예제 1) 개발자 도구에서 확인한 화면에 나타난 코드 (현재 브라우저에 나..

jQuery 개요 : 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리. - jQeuery 기능 1) DOM과 관련된 처리를 쉽게 구현 (가장 큰 장점) 2) 일관된 이벤트 연결을 쉽게 구현 3) 시각적 효과를 쉽게 구현 4) ajax 애플리케이션을 쉽게 구현 사용 방법 1 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use A..