JQuery 기본 및 선택자 가이드

이기원·2021년 5월 28일
0

Web 공부

목록 보기
5/5

JQuery는 JavaScript를 사용할때 간단하게 DOM 요소의 이벤트 처리를 손쉽게 구현 할 수 있도록 개발된 오픈소스 기반 라이브러리이다. JSP를 하다보면 가장 맨처음 접하게 되는 lib인데 이는 Ajax가 JQuery에 포함되어있기때문.. (요즘도 Ajax쓰냐곤 하는데 다른걸 봐도 딱히 Ajax를 안쓸이유는 못느끼겠다) 그중 JQuery로 DOM 요소에 접근하는 방법인 선택자와 기본 문법에 대해 간단히 적어본다.

기본적인 문법은 '$(선택자).동작();' 의 형태인데 이 중 동작은 '메소드 체이닝'이라는 문법으로 여러개를 중첩해서 쓸 수도 있다. (예를 들어, 어떤 DOM 요소 A의 자식요소로 B가 있고, B의 자식요소인 C가 있다고 치면, C의 DOM요소를 선택할때 단순히 $(C) 로 선택할수도 있지만, $(A).children().children() 으로도 선택가능하다는 뜻.. 자식의 자식의 자식 이런느낌으로 뒤에 계속 붙일수 있다.)

선택자의 종류 및 선택 방법 정리

$('tag') -- 특정한 tag 모두를 선택 ex) $('h1')
$('#name') -- DOM 요소의 특정 Id를 선택
$('.class') -- DOM 요소의 특정 class를 선택
$('elemenet[property 부등호 value]') -- DOM 요소와 속성안의 값이 특정 조건일때 선택 
				       (부등호는 =,|=,~= 등이 있으니 자세한 내용은 검색참조)

위의 4가지 내용이 가장 기초적이며, 가장 많이 쓰이는 형태이고 더 복잡하거나 자세한 내용은 구글검색을 참조하는게 더 낫다. (너무 많아서 실제로 쓰는 거외에는 정리하기 힘듬..)

profile
초급 / 전산 / MES

0개의 댓글