웹동네 스터디 4주차-제이쿼리기초4

1. Javascript & jQuery
실무제작 기초 스터디
4주차 - 요소 찾기
김세환(hidepink@naver.com) / 2014.12.14 (sun)

2. 여러개의 요소들 중에서
순서 찾기

3. eq(순서)
eq(2)
지정한 순서의 요소를
가져옵니다.
<ul>
<li class=“lesson”>영어</li>
<li class=“lesson”>수학</li>
<li class=“lesson”>과학</li>
<li class=“lesson”>문학</li>
<li class=“lesson”>국어</li>
<ul>

4. index()
<ul>
<li class=“lesson”>영어</li>
<li id=“math” class=“lesson”>수학</li>
<li class=“lesson”>과학</li>
<li class=“lesson”>문학</li>
<li class=“lesson”>국어</li>
<ul>
var n = $(“.math”).index(); // n == 1
내가 몇번째 순서인지 리턴합니다.

5. 그럼 $(this)는 뭘까요?

6. $(this)
<ul>
<li id=“eng” class=“lesson”>영어</li>
<li id=“math” class=“lesson”>수학</li>
<li id=“science” class=“lesson”>과학</li>
<li id=“literature” class=“lesson”>문학</li>
<li id=“korean” class=“lesson”>국어</li>
</ul>
$(“.lesson”).click( function(){ alert( $(this).attr(id) )});
http://jsfiddle.net/hidepink/z8b3kyse/

7. $(this)는…
같은 일을 하는 여러개의 요소들 중에
지금 막 뭔가 일이 일어난
딱 하나의 요소입니다

8. 아래 처럼 마우스오버처럼 만들어진 상태에서
여러 메뉴중 마우스가 딱 저 버튼에 올라갔을때!
$(‘.btns’).mouseover(function(){
$(this).css(‘background’, ‘#ff4500’);
});
$(this)는 TGIF STORY 요소를 가리키게 됩니다.

9. 같은 이벤트를 설정한
여러 요소중에서
지금 이벤트가 발생한
요소를 알아낼때 쓰는게
$(this)입니다

10. this 개념은 프로그래밍에서
이해하기 어려운 개념중에
하나입니다. 차차 익힌다고 생각하세요!