jQuery 관련 내용

1+) 경마장 뺑끼 랜덤 알고리즘

Math.floor(Math.random() * [몇개]) //0~갯수 까지

뺑끼는 신경쓰지 말자. 걍 구라라는 뜻이니까
몇개의 부분에는 다양한게 올 수 있다. 예를 들어 0~9까지는 총 10개의 숫자가 있으니까, 걍 [몇개] 부분에 10 때려박아도 되고, 만약에 h2의 갯수만큼으로 랜덤뺑끼 하고 싶으면 $('h2').length 하면 된다.

2) 여러 이미지의 속성값을 받으면?

가끔 우리의 기괴성을 자극하는 것들이 있다. 여러개의 이미지 속성값들을 받으면 어떻게 되는지 물어보는 이런 경우들이 대표적인 예이다. 실험정신이 투철하다....? 뭐 어쨌든, 한번 보자.

<img src="park.png" alt="박">
<img src="jung.png" alt="정">
<img src="jin.png" alt="진">
<img src="god.png" alt="갓">

이런 HTML에 대해서 다음과 같은 jQuery 코드를 돌리면 결과가 어떻게 될까?

alert($('img').attr('alt'));

어...? 이미지는 분명히 4개가 있는데?
알림창이 4번 뜨나? 뭐지?

결과적으로는 맨 처음의 이미지의 alt값만 긁어와서 알림창에는 박이 딱 한번 뜬다.
일반화하면, 대개 이런 케이스들은 맨 처음 녀석의 것만 긁어온다.

4, 6) 앞뒤에 이리저리 붙혀보기

이번 시험에는 아무래도 append, prepend, after, before를 가지고 우리를 능욕하는 문제들이 많이 나올 것 같다. 한번 더 복습해보는 시간을 갖자.

before

after

예제 소스를 보자.

$('img').first().appendTo('div');

이미지 태그 중 맨 처음 객체를 div의 맨 마지막으로 붙혀넣는다. 와 같이 이해하면 된다. 반대로 맨 마지막 객체를 맨 앞으로 옮기려면 다음과 같이 하면 된다.

$('img').last().prependTo('div');

추가 : 앞에 있는 걸 복사해서 붙혀넣으려면 어떻게 할까?

간단하다. 위에 있는 코드에서 append하기 이전에 clone() 메소드를 추가해주면 된다.

$('img').first().clone().appendTo('div');

5, 7) bind와 one 메소드들

bind()는 이벤트들을 연결해줄 때 사용한다.
one()는 bind()의 일회용 젓가락 버전이다. 한번 쓰고 버린다
개발할 때 코드 환경 파괴에 살짝 일조하는 경향도 있다

bind() 나온 김에 이것도 알아두자 삘이 안좋다

<div>
  <h2>Click here to clone me!</h2>
</div>

on()으로 bind() 구현

$(document).ready(function() {
  $('h2').on('mousedown', function(event) {
    switch(event.which) {
      case 1:
        $(this).clone().css('color', 'red').appendTo('div');
        break;
      case 3:
        $(this).clone().css('color', 'blue').prependTo('div');
        break;
      case 2:
        $(this).clone().css('color', 'green').insertAfter('div');
        break;
    }
  });
});

on()으로 live() 구현

$(document).ready(function() {
  $(document).on('mousedown', 'h2', function(event) {
    switch(event.which) {
      case 1:
        $(this).clone().css('color', 'red').appendTo('div');
        break;
      case 3:
        $(this).clone().css('color', 'blue').prependTo('div');
        break;
      case 2:
        $(this).clone().css('color', 'green').insertAfter('div');
        break;
    }
  });
});

bind()와 다르게 document 전체를 넘기고 그 중에서 h2를 찾는 형태를 띈다.

on()으로 delegate() 구현

$(document).ready(function() {
  $('div').on('mousedown', 'h2', function(event) {
    switch(event.which) {
      case 1:
        $(this).clone().css('color', 'red').appendTo('div');
        break;
      case 3:
        $(this).clone().css('color', 'blue').prependTo('div');
        break;
      case 2:
        $(this).clone().css('color', 'green').insertAfter('div');
        break;
    }
  });
});

bind()와 다르게 div를 넘기고 그 중에서 h2를 찾는 형태를 띈다.

3) [ ? ]Class()들에 대하여

형성평가에 클래스 관련 문제가 나왔다. 다시 한번 체크해보는 시간을 가지면 좋을듯 하다.
아마 시험에는 CSS 속성과 연계해서 배경색이랑 색깔 왔다갔다해서 결과가 어떻게 되느냐의 문제가 나올 수도 있을것 같다.

쓰는 방법

이런 식으로 쓴다.

$('#akapo').addClass('webp');
$('#akapo').removeClass('webp');
$('#akapo').toggleClass('webp');