noname02

setTimeout을 사용한다. var delay = function() {동작} setTimeout(delay, timems); 이 때 timems가 같으면 결국 쓰나 안쓰나 똑같다. 따라서 .each(function(i) { var delay ... setTimeout(delay, timems * i);} 와 같이 i를 이용해 시간을 눌려주는 방법을 생각해볼 수 있다.

셀렉터 :animated가 있다.이는 애니메이션중인 요소를 찾는다. 이를 is와 결합해서 $('selector').is(':animated'); 를 사용한다.애니메이션중이면 true, 아니면 false를 반환한다.

offset()과 position()은 DOM엘리먼트의 위치를 찾는데 사용되는 jQuery메서드다.각각 top, left값이 담긴 위치 오브젝트를 반환한다.여기서 offset()은 document에서의 위치를 반환하고, position()은 parent엘리먼트에서의 위치를 반환한다.여기서 중요한 점은 position()을 사용할 때에는 당연히 css의 position 속성이 적용되어있어야 한다는 점이다. 예를 들어서 와 같이 되어있고, box1은 200x200, box2는 100x100이라고 치자.근데 box1에는 position 속성이 없고 box2에는 position: relative; 속성이 있는 경우box2에 대한 position()을 하면 box1에 대한 위치값이 아닌 body에 대한 위치값, ..

※내용의 정확성은 보장 못함. 비전문가인 본인이 이해하기 쉽게 정리하는 글임을 밝힘. Deferred 객체는 여러가지 용도로 쓰인다.jQuery API 문서를 보면 A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. 라고 설명되어있다. 즉 콜백큐, 동기/비동기 작업에 대한 성공/실패에 따른 콜백을 다룰 수 있게 한다.대체적으로 ajax에 사용되고..

live메서드는 현재와 미래의 요소에 대해 이벤트를 바인딩하는 메서드이다.코드를 짤 때, 셀렉터로 선택된 요소들은 스크립트가 로딩되었을 때에 있던 DOM 엘리먼트들이다.그런데 만약 append, appendTo 등으로 추가된 요소가 있다면 스크립트가 실행되지 않을 것이다.특히나 이벤트들이 그럴 수 있다. 이럴 때 사용하는게 live이다.그런데 live는 Deprecated 되었으므로 이는 on으로 대체하면 된다. 1$(document).on('event', 'selector', function() { ... });cs 으로 사용하면 된당.

1234$('select').on(load, function() { console.log('#1'); });console.log('#2');cs 이 경우 #2가 먼저 로그가 찍히고, 그 다음 #1이 로그가 찍힌다. 당연한 내용.그래서 이런 코드가 있다. 123456789101112131415161718192021222324$('#content > img').click( function() { var $this = $(this); var title = $this.attr('title'); $desc.html(title).show(); $loading.show(); $('').on('load', function() { var $img = $(this); $loading.hide(); $('#panel').a..

어떤 여러 메뉴들이 있고, 이 메뉴들에 대한 hover 이벤트에 대해 jQuery 애니메이션을 설정하는 경우가 있을 수 있다.보통 이러한 메뉴들은 class 이름이 같기 마련인데, 만약 이에 대해 아무 생각없이 $('class').hover~~ 와 같이 처리하게 된다면, 한 메뉴만 hover이벤트가 발생해도 다른 모든 메뉴들까지 덩달아 애니메이션이 되는 것을 볼 수 있다.이는 지극히 당연하게도 jQuery선택자가 모든 class 요소를 선택하였기 때문이다.따라서 커서가 올라간 메뉴에 대해서만 이벤트를 발생시키려면, jquery 선택자 두번째 매개변수에 $(this)를 줌으로써 실행 컨텍스트 범위를 한정시킬 수 있다.즉 $('class').hover(function() {$this = $(this);$('..

어떤 메뉴에 hover이벤트가 발생했을 경우 css 디자인이 바뀌는 경우가 있을 수 있다.그런데 이 메뉴에 hover 이벤트가 발생하면, 어떤 특정한 요소 A가 이 메뉴를 가리는 효과가 있다고 하자.그렇게 되면 A가 메뉴를 가리면서 마우스 포인터가 A위에 놓이게 되고, 이에 따라 메뉴 hover의 효과가 사라지는 경우가 발생할 수 있다.따라서 hover가 발생하면 :hover로 가상클래스로 css를 정의하지 말고, hover 클래스 등 특정 클래스를 add해주고 hover에서 나오는 경우 다시 hover 클래스를 remove해주는 식으로 하면 메뉴 위에 어떤 효과가 나타나서 hover이벤트가 풀려도 디자인은 그대로 hover가 되있는 것처럼 만들 수 있다. 참고예제 : http://tympanus.net..

123456var d = 1000;$('#menu span').each(function() { $(this).stop().animate({ 'top': '-17px' }, d += 250);});cs #menu의 span을 선택한 뒤 각각 animate를 적용하고있다.그런데 여기서 animate duration 값에 d += 250 을 주었다.이는 duration 매개변수의 수식이 일단 계산되고, 그 다음 값을 적용시키는데맨 처음엔 1250ms, 그다음 엘리먼트에는 1500ms, 그 다음 엘리먼트에는 1750ms ... 이런식으로 지연을 줌으로써엘리먼트들이 동시에 효과가 적용되는것이 아니라 각각 250ms씩 속도가 지연되면서 계단식으로 효과가보이는 효과를 줄 수 있다.

개발 작업을 간단하게 처리하거나 자동화하는 jQuery는 자바스크립트의 핵심 라이브러리가 된지 오래입니다. 많은 개발자들이 jQuery의 기본 기능을 사용하여 작업을 수행합니다. 하지만 더 나아가 플러그-인을 사용하여 jQuery를 확장하여 사용하기도 합니다. 이미 배포된 플러그-인을 적용해서 사용할 수 있지만 직접 플러그-인을 개발하여 프로젝트에서 활용한다면 개발팀의 기술 수준 뿐만 아니라 개발 생산성을 더 높일 수 있습니다. 오늘은 왜 플러그-인이 필요한 지 알아본 다음, 간단한 플러그-인을 예로, 플러그-인 설계 규칙과 개발 방법을 소개합니다. 왜 jQuery 플러그-인을 만드는가다음과 같은 두가지 이유가 있습니다.일관된 코드 스타일을 유지한다.jQuery의 기반 코드를 잘 활용한다.jQuery가 ..

$("Selector").length 로 판단! 0이면 없는 것.

우선 로딩클래스를 만들고 html 문서에 기본으로 설정한다.그리고 보통 html문서가 로딩되고 난 뒤, 스크립트가 로딩되는데 이 때 로딩클래스를 제거한다. AJAX를 사용하는 경우$body = $("body"); $(document).on({ ajaxStart: function() { $body.addClass("loading"); }, ajaxStop: function() { $body.removeClass("loading"); } });를 참고한다. (ajaxStart, ajaxStop을 사용한다.)

간단. -=와 +=를 사용하면 됨

우선 애니메이션 효과를 낼 큰 div 컨테이너를 만든다.페이지 돌입시에는 jQuery 맨 윗부분에 컨테이너에 효과를 부여한다. 페이지 이동시에는 페이지의 모든 앵커(a)를 대상으로 클릭시 효과를 부여한다.이 때, 앵커를 클릭하였을 경우 디폴트 값으로 이동되는 것을 막기 위해 return false;를 삽입하고클릭시 앵커의 속성값에 있는 url 주소를 변수로 저장한다. var url = $(this).attr("href"); 그리고 콜백 메서드에 document.location.href = url; 을 통해 이동을 시켜주면 된다. 간단한 예제>>12345678910111213141516171819$(function () { $("body div").fadeIn(500, function () { $(this..

bind() - bind( "이벤트1 이벤트2 이벤트3 ...", function() { } ); 와 같은 형태로 사용한다. - 여러개의 이벤트를 공통 메서드 하나로 연결할 수 있다. - bind({"이벤트1": function() { },"이벤트2": function() { },"이벤트3": function() { }}); 와 같은 JSON으로 묶을 수 있다. unbind() - bind 이벤트를 제거한다. on() - $(document).on( "이벤트", "셀렉터", function() { } ); - 동적으로 추가할 요소에 대한 이벤트를 정의하는 메서드이다. - 핵심적인 기능이다. off() - on 이벤트를 제거한다. one() - 이벤트를 한번만 실행시킨다. bind와 같은 방식으로 사용한다..

.next() - 현재 선택된 요소를 기준으로 다음 요소를 리턴한다. .prev() - 현재 선택된 요소를 기준으로 이전 요소를 리턴한다. .parent() - 현재 선택된 요소의 부모 요소를 리턴한다. .parents("Selector") - 현재 선택된 요소에서 Selector에 해당하는 가장 가까운 요소를 검색한다. - parent와의 차이점은, parent는 노드구조에 의해 바로 윗 단계만 검색되지만 parents는 단계에 상관 없이 검색된다. .children() - 현재 선택된 요소의 자식 요소들을 배열로 리턴한다. .find("Selector") - parents의 children 버젼. .eq(n) - 현재 선택된 요소의 n번째 자식 요소를 리턴한다. A.html(B) - A요소의 시작태그..

.css("CSS 속성이름"); - 해당 요소에 적용되어 있는 css값을 리턴한다. .css("CSS 속성이름", "값"); - 속성에 값을 지정한다. .css({"이름1": "값","이름2": "값","이름3": "값}); - JSON 형태로 값을 지정한다. .hasClass("클래스이름"); - 해당 요소가 클래스이름과 동일하면 true를 리턴한다. .addClass("클래스이름"); - 클래스를 부여한다. .removeClass("클래스이름"); - 클래스를 제거한다. .toggleClass("클래스이름"); - addClass removeClass .show() - 숨겨진 요소를 화면에 표시 .show(1000) - 숨겨진 요소를 1초에 걸쳐서 화면에 표시 .hide() - 요소를 숨김 .hide..

.val() - form태그 내의 요소에 입력된 값들을 리턴받는다. 파라미터를 전달하면 값을 설정할 수 있음. - 값이 없는 경우 null을 리턴한다. (조건문에서 false로 됨) .is() - 파라미터로 조건을 충족하는지 여부를 검사할 수 있다. .each() - 파라미터로 메서드를 전달하여 변수의 배열만큼 실행한다. .index() - 선택된 객체의 위치를 리턴한다. event.preventDefault() - 이 메서드를 선언하면 event의 기본값으로 설정된 액션을 취하지 않는다. $(window) - 브라우저 제어 객체. setTimeout(function, ims) - javascript 내장함수. function에 함수를 설정하고 ms는 1/1000초 단위인데 ms초 뒤에 function을..