여우의 개발 기록

7.0 저수준 애니메이션 메서드와 정의된 효과를 가지고 있다. - 토글 방식으로 요소를 보여주고 숨기기 - 크기 조절과 동시에 요소를 페이드 인/아웃 하기 - 슬라이드 업 또는 슬라이드 다운 그리고 토글하기 - 페이드 인과 페이드 아웃 그리고 투명도 지정 미리 정의 된 메서드 같은 경우 속도와 후에 실행될 콜백 함수도 지원한다. 1. Animate 메서드 animate 메서드를 사용하면 1.1 css속성(숫자값)제어 1.2 scrollTop, scrollLeft DOM속성을 제어 (요소의 overflow시) 1.3 종점 값을 위해 css의 계측 단위인 pixel, em, inche, %사용가능 1.4 요소의 현재 상태에 대한 상대값 또는 고정값으로 효과의 종점 지정 1.5 상태를 전환하기 위한 값으로 t..

6.1 Window와 Document의 영역 알아내기 윈도우나 문서의 너비와 높이를 픽셀값으로 얻어내기 위한 방법 jQuery(document.ready(functino(){ alert('Window height:'+ jQuery(window).height()); // 화면상 표시되는 영역 높이 alert('Window width:' + jQuery(window).width()); // 화면상 표시되는 영역 너비 alert('Document height:'+ jQuery(document.height()); // document의 높이 alert('Document height:'+ jQuery(document.width()); // document의 너비 :: window의 높낮이는 현재 보이고 있는 웹브..

5장은 챕터가 많기 때문에 반으로 나누어 요약 정리한다. 5.12 순수 루프 작성하기 $.each( array, function(){ // this로 실행 } $('.lotsOfElements').each( function() { // this 또는 $(this)로 실행 }); ::위 호출은 매번 호출을 해야해서 로드 시간이 길어진다. for( var item, i = -1; item = array[++i] ) { // item을 사용하여 작업 } :: 문제는 배열중 false요소를 가지게 되면 루프가 돌지 않는다. :: null값이 없다 확신할때 가장 빠른 방법 for( var i = -1, n = array.length; ++i

5장은 챕터가 많기 때문에 반으로 나누어 요약 정리한다. 5.2 $(this)에 무슨 문제가 있을까? # 1번코드 ======================================== $(document).ready( function() { $('.clicky').click( function() { $(this).addClass('clicked'); setTimeout( function(){ $(this).removeClass('clicked'); }, 1000 ); }); }); ======================================== :: setTimeout을 이용하여 1초간 대기하다 clicked란 클래스를 제거하려는 목적 하지만 동작 하지 않는다. :: setTimemout의 ..

4.1 jQuery.support로 기능 찾기 (function ($){ $(document).ready(function(){ $('a').filter(function(){ var href = $(this).attr('href'); if(!jQuery.support.hrefNormalized){ //URL을 표준 링크로 만든다. var loc = window.location; href = href.replace(loc.protocol + '//' + loc.host + loc.pathname, ''); } return (href.substr(0, 1) == '#'); //앵커 태그 형태가

3.1 선택된 결과의 집합을 루프 돌면서 처리하기 jQuery는 선택된 DOM요소의 집합에 대해 루프를 돌면서 처리 할 수 있는 기본 메서드 $().each 를 제공한다. $("ul > li").each(function(i){ if(i%2 ==1){ $(this).addClass("odd"); } else{ $(this).addClass("even"); } }); Unsorted List의 하부 list중 홀수, 짝수번째 요소들마다 클래스를 다르게 적용한다는 예인데 each의 반복성에 대해 설명해 준다. $("ul>li:odd").addClass("odd")

2.0 CSSselector jQuery('#content p a'); // #context 안에있는 모든 단락(p태그) 요소내의 모든(a태그) 요소를 선택한다. jQuery('#content p a').addClass('selected'); // selected란 클래스를 a태그안에 추가한다. 2.1 직속 자식 요소 찾기 직속 자손 결합자 (>) jQuery('#nav li>a'); //nav 안의 li의 직속 a만 선택한다. jQuery('>p', '#content')이것은 jQuery('#content >p')와 동일하다 jQuery('#content').children(); //#content요소의 모든 자식 요소를 가져온다. var anchors = jQuery('a'); //a태그의 자식 요..

1.1 jQuery Library code 삽입 1) jQuery 최신버전 삽입 Google의 CDN이용 2) jQuery.com 에서 최신버전 받아 서버나 로컬에서 삽입 1.2 DOM로드후 jQuery/java script 실행 ( .ready()이벤트 ) jQuery(document).ready(function(){//아직 DOM이 로드 되지 않았기에 ready 이벤트를 사용해야한다.alert(jQuery('p').text());}); jQuery(function(){}); //가능 속도향상을 위해 바로 앞에 .ready()이벤트를 처리할 수 있는 스크립트를 넣어도 좋다. 1.3 Selector 와 jQuery 함수를 사용하여 DOM요소 선택하기 jQuery('a'); : HTML내의 모든 태그 요소..