[jQuery] 요소 판별

요소의 판별

---

index() 함수

- 특정 요소가 부모 태그 안에서 갖는 인덱스번호를 리턴하는 함수 (0부터 시작함)

<div>
    <a href="#">...</a>
    <div id="hello"></div>
    <p class="memo"></p>
</div>
 
<script>
    // 부모 <div>를 기준으로 2번째 요소이므로 인덱스 1이 리턴된다.
    var idx = $("#hello").index();
</script>

$(this)

- 복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체

<button class="btn">button1</button>
<button class="btn">button1</button>
<button class="btn">button1</button>
 
<script>
    // 'btn' 이라는 클래스를 갖는 모든 요소에 대해서 일괄적으로 적용되는 이벤트
    $('.btn').click(function(){
        // 버튼은 한번에 하나씩만 누를 수 있다.
        // 이 안에서 $(this)는 클릭된 주체를 의미한다.
    });
</script>

특정 요소의 적용하기

개별적용

$("#bar").attr('속성이름', '값');

일괄적용(json 형태 사용)

$("#bar").attr({
    속성이름: '값',
    속성이름: '값',
    속성이름: '값',
    ...
});

- 속성이름에 공백이나 -기호가 포함된 경우 반드시 따옴표 사용

- 그 외에는 따옴표 처리가 필수는 아님!

data-* 속성

- data-OOO 형태로 개발자가 필요에 따라 직접 정의하는 속성.

- JAVASCRIPT에서 사용할 변수값을 숨겨놓기 위한 목적으로 사용한다.

<div id="foo" data-hello="안녕하세요" data-world="jQuery">
    ...
</div>

data 속성값 조회하기

var foo = $("#bar").data('hello');

data 속성값 적용/변경하기

$("#bar").data('hello', '반갑습니다');