망할고양이의 도피처

jQuery에 대해서 업무 중 교육을 할 일이 생겨 정리합니다.

• jQuery를 왜 사용하는 것인가?

   jQuery는 Selector가 없다면 사용을 안 할 수도 있다 라는 생각이 될 정도로 편리한 Selector를 제공합니다. 

   CSS 선택자를 그대로 사용할 수 있어 코드 선택이 매우 간단합니다. 물론 document.querySelector   

   와 document.querySelectorAll이 있기도 하지만 모르는 사람이 더 많을뿐더러 이미 jQuery가 자리 잡은 상황이기

   때문에 jQuery가 개발하는 사람들에게는 더 친숙합니다. 

jQuery Selector를 사용함에 있어 몇 가지만 알아도 사용하는 데에는 큰 무리가 없습니다. 

• Id로 해당 Object 찾기(#)

단순히 #뒤에 아이디를 입력하여 해당 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementById('objId');

//jQuery
$('#objId');

• class로 Object 찾기(.)|

단순히. 뒤에 해당 css class 명을 입력하여 해당 오브젝트를 선택할 수 있습니다. 이때 동일한 class가 여러 개인 경우

. eq(숫자)를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementsByClassName('your_class_name');

//jQuery
$('.your_class_name');

// 4번째 오브젝트 선택 (0부터 시작)
$('.your_class_name').eq(3);

• tag로 Object 찾기

$() 안에 해당 tag를 입력하여 사용할 수 있습니다. 또한 여러 개의 동일한 tag가 존재하는 경우 eq()를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다. 

//javascript
document.getElementsByTagName('table');

//jQuery
$("table");

//첫번째 table
$("table").eq(0);

• 속성으로 Object 찾기( [ ] )

해당 기능은 javascript는 제공하지 않으므로 별도의 함수를 만들어서 사용해야 합니다. 

[ ] 안에 속성명 또는 속성에 해당하는 값의 형태로 작성하여 사용할 수 있습니다. 

//jQuery
$('[type]'); // type 라는 속성을 가진 Object

$('[type="button"]'); // type이 button인 Object

$('[type="button"]').eq(1);