요소의 판별

요소의 판별

---

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>

HTML 요소의 속성제어

---

특정 요소에 적용되어 있는 속성값 조회하기

var foo = $("#bar").attr('속성이름');

특정요소의 적용하기

개별적용

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

일괄적용 (json형태 사용)

$("#bar").attr({

속성이름: '값',

속성이름: '값',

속성이름: '값'

...

});

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

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

data-*속성

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

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

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

...

</div>

data속성값 조회하기

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

data 속성값 적용/변경하기

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