jQuery 의 Selector
jQuery는 대상을 class, id, 태그 등 여러 속성을 이용해서 지정할 수 있다.
1.class
$(".a") : class="a"인 대상을 지정한다
2.id
$("#a") : id="a" 인 대상
3.태그
$("span") : span 태그인 대상
여러 대상을 한꺼번에 select 할 수 있고, 그에 대해 속성을 부여할 수도 있다.
다음과 같이 body>span , body span 두 대상을 select 하여 한번에 css 속성을 부여했는데, 두 대상의 차이점은 body>span은 body에 바로 하위에 있는 span 태그인 대상을 select하고, body span은 body 하위의 모든 span을 대상으로 하는 것이다.
jQuery 에서의 이벤트처리
jQuery에서는 javascript를 이용할 때보다 더 직관적인 이벤트처리가 가능하다. type='button'인 input을 대상으로 select한 후 click 시의 event에 function을 대입했다.
function은 alert()이고, 해당 버튼을 클릭하면 ()가 alert된다. 이런 이벤트 처리 방식을 javascript로 표현하면
위와 같은데, j에 id="j"인 대상을 select하고, click이라는 함수를 선언하고, 호출한다. click은 fp라는 매개변수를 갖고 있는데, onlick에 fp를 대입하여, click이라는 event가 발생하면 이 매개변수를 다시 호출하게 된다. 함수를 호출한 쪽의 함수를 역으로 다시 호출하는 이런 개념을 callback 방식이라고 한다.
javascript에서 closure를 이용해 5개의 이미지에서 각각의 index를 click시에 alert 하는 코드다. 이 코드를 jQuery를 이용해서 다시 작성하면,
위와같이 더 직관적이고 깔끔해진다. callback 을 사용해 closure를 사용할 필요없이 $(this)로 event가 발생한 이미지의 포인터를 얻어내 해당 이미지의 abcd 라는 속성을 얻어낼 수 있다. abcd라는 속성은 원래 없지만, jQuery를 통해 임의적으로 사용할 수 있다.
each를 이용해 this와 같이, 하나하나의 포인터를 각각 얻어내 idx를 얻어낸다. 그를 이용해서 idx=0인 option을 제외한 option을 remove한 후, jQuery문을 이용해서 새로운 option을 추가한다. option에 text부분을 작성해서 추가할 수도 있고, text와 value를 지정해서 추가할 수도 있다.
