Meadows of wild horses

본문

속성 추가하기

id속성값을 개별적으로 attr()으로 적용 해주기 위해 each()를 사용하여 적용하여 주고 있다. index는 0부터 시작하여 증가한다.

$(document).ready(function() {
  $('div.chapter a[href*=wikipedia]').each(function(index) {
var $thisLink = $(this);
$(this).attr({
  'rel': 'external',
  'id': 'wikilink-' + index,
  'title': $thisLink.text() + '에 대한 자세한 정보는 위키 피디아에 있습니다.'
});
  });
});

앵커 삽입

앵커 위치를 정하기 위해 body에 prependTo()로 삽입한다. 앵커 버튼이 굳이 다 있을 필요는 없고 화면 밖에 존재 부터 하기 위해 p:gt(4) 5번째(0부터 시작) 문단 부터 적용 시킨다

$('<a href="#top">맨 앞으로 돌아가기</a>').insertAfter('div.chapter p:gt(4)');
$('<a id="top" name="top"></a>').prependTo('body');

주석 표시, 숫자 부여, 컨텍스트 연결

챕터가 끝난지점 후에 리스트 목록인 >ol<만들어준다. 클래스가 footnote

$('<ol id="notes"></ol>').insertAfter('div.chapter');
$('span.footnote').each(function(index) {
  $(this).before('<a href="#foot-note-' + (index+1) +
'" id="context-' + (index+1) + '" class="context"><sup>'
+ (index+1) + '</sup></a>')
  .appendTo('#notes')
  .append( '&nbsp;(<a href="#context-' + (index+1) + '">context </a>)' )
  .wrap('<li id="foot-note-' + (index+1) + '"></li>');
});

Command Action

Learn jQuery 4장

Jun 12th, 2012 | Comments

Source

본문

인라인 CSS 변경

폰트 크기 구하기

$('div.speech').css('fontSize')

반환된 값이 숫자와 단위 문자열이 합쳐져 있으므로 각각 나누기 위해 변수를 따로 저장 변수 이름에 $는 변수명에 쓰이며 jQuery객체를 저장하고 있다는 의미로 사용된다.

var $speech     = $('div.speech');
var currentSize = $speech.css('fontSize');

문자열에서 숫자까지만 변환하여 추출(10진수 옵션 설정) 숫자가 아니면 NaN(Not a Number)반환

var num         = parseFloat(currentSize, 10);

fontSize의 유닛을 구함(px, em)

var unit        = currentSize.slice(-2);

현재 클릭된 버튼의 아이디를 확인하여 숫자연산 후 css에 fontSize 적용

if (this.id == 'switcher-large') {
  num *= 1.4;
} else if (this.id == 'switcher-small') {
  num /= 1.4;
}
$speech.css('fontSize', num + unit);

css-part

$('div.button').click(function() {
  var $speech     = $('div.speech');
  var currentSize = $speech.css('fontSize');
  var num         = parseFloat(currentSize, 10);
  var unit        = currentSize.slice(-2);

  if (this.id == 'switcher-large') {
    num *= 1.4;
  } else if (this.id == 'switcher-small') {
    num /= 1.4;
  }
  $speech.css('fontSize', num + unit);
});

hide와 show

jQuery 효과에 속도를 지정할때는 ‘slow’, ‘normal’, ‘fast’(각각 0.6, 0.4 0.2초)를 지정할수 있으며 밀리초 단위의 시간을 조정할수 있다(근데 난 차이를 모르겠다..)

$('document).ready(function() {
  $('div.speech p:eq(1)').hide();
  $('span.more').click(function() {
$('div.sppech p:eq(1)').show();
$(this).hide();
  });
});

show는 .animate()메서드의 약식 메서드이다.

$(document).ready(function() {
  $('p:eq(1)').hide();
  $('span.more').click(function() {
$('p:eq(1)').animate({height: 'show', width: 'show', opactity: 'show'}, 'slow');
$(this).hide();
  });
});

사용자형 애니메이션 생성하기

버튼의 높이를 키우면서 이동, 이동이 멈추면 크기 고정

$(document).ready(function() {
  $('div.label').click(function() {
$('div.butoon').animate({left: 650, height: 38}, 'slow');
  });
});

숫자 이해하기

height의 38값인 이유는 우리가 버튼을 50으로 만들기 위해서 이다. css에 padding은 5px, border는 1px 로 정의 하였으므로 top + bottom값을 더한후(12) 50 - 12 = 38값이 나오게 되었다.

CSS로 위치 변경

.animate()를 사용하여 작업할때 CSS속성이 relative 또는 absolute로 설정 되어있어야 한다 모든 블록 요소가 가지는 CSS position 속성은 static이다.

버튼의 너비 계산

버튼의 넓이와 패딩 보더 넓이를 모두 구하여 더해준후 div.speech p의 넓이에 맞추어서 값을 구하였다. 그렇게 함으로써 글자 오른쪽 모서리에 맞춤이 이루어 진다.

$(document).ready(function() {
  $('div.label').click(function() {
  var paraWidth        = $('div.speech p').width();
  var $button          = $('div.button');
  var buttonWidth      = $button.width();
  var paddingRight     = $button.css('paddingRight');
  var paddingLeft      = $button.css('paddingLeft');
  var borderRightWidth = $button.css('borderRightWidth');
  var borderLeftWidth  = $button.css('borderLeftWidth');

  //총너비 연산
  var totalButtonWidth =
  parseInt(buttonWidth, 10) +
  parseInt(paddingRight, 10) +
  parseInt(paddingLeft, 10) +
  parseInt(borderRightWidth, 10) +
  parseInt(borderLeftWidth, 10);
  var rightSide = paraWidth - totalButtonWiidth;
  $button.animate({left: rightSide, height: 38}, 'slow');
  });
});

동시효과

불투명해짐과 배경색이 동시에 변경되며 이동을 한후 불투명도가 들어오고 사라지게 된다

$('div.label').click(function() {
  $('div.button')
  .fadeTo('slow', 0.5)
  .animate({left: 650}, 'slow')
  .fadeTo('slow', 1.0)
  .css('backgroundColor', '#f00')
  .slideUP('slow');
});

연속효과

버튼을 클릭 하게 되면 투명해지고 이동한다. 그리고 투명도를 다시 돌리고나서 배경색을 변경한다. 그리고 사라진다 이게 연속적으로 이루어 지게 되어있다. 콜백을 이용하여 효과들이 모두 진행된 후에 그 다음 순서로 배경색을 바꾸는 비효과 메서드를 적용 하였다.

$('div.label').click(function() {
  $('div.button')
  .fadeTo('slow', 0.5)
  .animate({left: 650}, 'slow')
  .fadeTo('slow', 1.0, function() {
$(this).css('backgroundColor', '#f00')
  }).slideUP('slow');
});

다중 효과

$('div.speech p:eq(3)').css('backgroundColor', '#fcf').hide();
$('div.speech p:eq(2)').css('backgroundColor', '#cff').click(function() {
  var $thisPar = $(this)
  $(this).next().slideDown('slow', function() {
$thisPar.slideUp('slow');
  });
});

Command action

fadeIn()과 fadeOut(): 불투명도(opacity)

fadeOut(speed, callback)

일치하는 엘리먼트 중 드러난 엘리먼트의 불투명도 0%로 줄여가면서 화면에서 제거한다. 불투명 도가 변경되는 지속시간은 speed 매개변수에 따라 변한다. 이미 감춰진 엘리먼트는 영향을 받지 않 는다.

매개변수

speed

(Numbe|String)효과의 지속 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열 slow, normal, fast

가운데 하나로 명시한다. 생략되면 기본값인 normal을 이용한다.

callback

(Function) 선택사항으로 애니메이션이 완료된 뒤 호출되는 함수다. 이 함수는 어떤 매개변수도 받지 않는다. 하지만 애니메이션이 수행되는 엘리먼트가 함수 콘텍스트인 this로 설정된다.

반환값

확장집합
fadeTo: 불투명도(opacity)

fadeOut(speed, opacity, callback)

확장 엘리먼트의 불투명도를 현재의 러정 값에서 opacity 매개변수 값으로 설정한다.

매개변수

speed

(Numbe|String)효과의 지속 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열 slow, normal, fast

가운데 하나로 명시한다. 생략되면 기본값인 normal을 이용한다.

opacity (Number)

(Number) 0.0에서 1.0 사이의 값으로 엘리먼트에 적용될 불투명도 값

callback

(Function) 선택사항으로 애니메이션이 완료된 뒤 호출되는 함수다. 이 함수는 어떤 매개변수도 받지 않는다. 하지만 애니메이션이 수행되는 엘리먼트가 함수 콘텍스트인 this로 설정된다.

반환값

확장집합
slideDown()과 slideUp(): 높이(height)

slideDown(speed, callback)

감춰진 모든 일치하는 엘리먼트가 높이 값이 증가하면서 나타난다. 드러나 잇는 엘리먼트는 영향을 받지 않는다

매개변수

speed

(Numbe|String)효과의 지속 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열 slow, normal, fast

가운데 하나로 명시한다. 생략되면 기본값인 normal을 이용한다.

callback

(Function) 선택사항으로 애니메이션이 완료된 뒤 호출되는 함수다. 이 함수는 어떤 매개변수도 받지 않는다. 하지만 애니메이션이 수행되는 엘리먼트가 함수 콘텍스트인 this로 설정된다.

반환값

확장집합

slideDown(speed, callback)

감춰진 모든 일치하는 엘리먼트가 점차적으로 높이 값이 감소하면서 화면에서 제거된다.

매개변수

speed

(Numbe|String)효과의 지속 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열 slow, normal, fast

가운데 하나로 명시한다. 생략되면 기본값인 normal을 이용한다.

callback

(Function) 선택사항으로 애니메이션이 완료된 뒤 호출되는 함수다. 이 함수는 어떤 매개변수도 받지 않는다. 하지만 애니메이션이 수행되는 엘리먼트가 함수 콘텍스트인 this로 설정된다.

반환값

확장집합

Learn jQuery 3장

Jun 11th, 2012 | Comments

Source

본문 - 이벤트 트리거 사용하는 방법

button click event

페이지 시작시 노말페이지로 보이도록 모든 클래스를 해제한다. removeClass()는 다른 파악되지 않은 Class까지 해제 하지만 현재 예제 코드 에서는 생각치 않도록 쓴다.

$('body').removeClass();

현재 버튼이 클릭된 id값을 확인하여 일치 하였을경우 클래스를 추가 하도록 한다.

if (this.id == 'switcher-narrow') {
  $('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
  $('body').addClass('large');
}

강조되는 글씨를 표현하기 위해 우선 클래스를 해제하고 현재 버튼에 클래스를 추가 해준다.

$('#switcher .button').removeClass('selected');
$(this).addClass('selected');

이벤트 객체 사용시 버블링을 중단 하기 위해 다음과 같이 추가해 준다. (버블링을 추가안해줄시 노말 버튼 클릭시에도 버튼칸이 사라지게 된다.)

event.stopPropagation();

부분 코드

부분코드 - 01

$('#switcher .button').click(function(event) {
  $('body').removeClass();

  if (this.id == 'switcher-narrow') {
    $('body').addClass('narrow');
  }
  else if (this.id == 'switcher-large') {
    $('body').addClass('large');
  }

  $('#switcher .button').removeClass('selected');
  $(this).addClass('selected');

  event.stopPropagation();
});

버튼 강조하기

버튼에 hover(마우스 가져다 대면) 띠면(체인으로) hover삭제

부분 코드

부분코드

$('#switcher .button').hover(function() {
    $(this).addClass('hover');
    }, function() {
      $(this).removeClass('hover');
  });

이벤트 핸들러

핸들러를 나중에 다시 사용할 수 있도록 핸들러 함수에 이름을 부여

var toggleStyleSwitcher = function() {
  $('switcher .button').toggleClass('hidden');
};

핸들러를 활성화 시켜준다.

$('#switcher').click(toggleStyleSwitcher);

노말 상태에서만 토글 기능 활성화

$('switcher-normal').click(function() {
  $('#switcher').click(toggleStyleSwitcher);
});

$('#switcher-narrow, #switcher-large').click(function() {
  $('#switcher').unbind('click', toggleStyleSwitcher);
});

시작시 접힘 기능(인자를 지정하지 않는경우 히벤트에 해당하는 행위를 발생시킴)

$('#switcher').click();

Command action

unbind(event Type, listener)

unbind(event)

확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 핸들러를 선택적으로 제거한다.

매개변수를 제공하지 않으면 엘리먼트의 모든 리스터를 제거한다.

매개변수

eventType

   (String)매개변수를 제공하면 지정된 이벤트 타입에 할당된 리스너만 제거한다.

listener

  (Function)매개변수를 제공하면 지정된 리스너와 동일한 것만 제거한다.

eventType

  (Event) Event 인스턴스의 정보로 알 수 있는 이벤트가 발생했을 대 호출될 리스너를
  제거한다

반환값

확장 집합

Lear jQuery 2장-02

Jun 11th, 2012 | Comments

Source