Jquery(제이쿼리) - 요소 찾기 (제이쿼리 셀렉터)

2020.03.29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기

Javascript (자바스크립트) - 요소(Element) 찾기

 

자바스크립트의 요소 찾기와 다르게

제이쿼리의 경우엔 좀더 간단하게 요소를 찾을 수 있다.

 

1. 기본 셀렉터

Selector	설명
$("#id")	# 문자를 사용하여 해당 아이디를 사용하는 요소를 검색
$(".class")	. 문자를 사용하여 해당 클래스를 사용하는 요소들을 검색
$("Tag")	태그명을 입력해서 해당 태그들을 검색

위 요소를 사용하는 예시를 들자면 아래와 같다.

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 반환
  console.log(paragraph);  // <p>예시용 설명글 입니다.</p> 반환
</script>

 

*사용시 주의사항

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
  <div class="box">
    <span>안녕</span>
  </div>
  <p class="dsc">안내사항을 전달 드립니다.</p>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 2영역을 배열 형식으로 반환
  console.log(paragraph);  // <p>예시용~</p>, <p class="dsc">안내사항을~</p> 2영역을 배열형식으로 반환
</script>

위와 같은 경우라고 했을 때

 

<div class="box">

  <span>안녕</span>

</div>

 

이라는 영역을 가져오고 싶어서

var box = $(".box") 를 사용하여 해당 요소를 찾았지만

 

<div class="box">

  <p>예시용 설명글 입니다.</p>

</div>

 

영역까지 같이 검색이된다.

 

그렇기 때문에 페이지에 하나만 존재하는 id값을 검색해서 사용하는 경우가 아니라면

클래스 검색, 태그 검색시 주의해야할 필요가 있다.

 

2. 특정 상황, 속성별 셀렉터

Selector	설명
$("input:checked")	input radio 혹은 checkbox에 체크가 된 input을 가져온다.
$(".box + .text")	.box 클래스 바로 뒤에 오는 형제 요소인 .text 클래스를 가진 요소를 가져온다.
$("p[class^='dsc']")	p태그 중 클래스가 .dsc로 시작하는 요소를 가져온다.
$("선택자[속성]")	특정 선택자와 속성 값이 일치하는 요소를 가져온다.

위의 예시들 처럼

css 작성할 때와 마찬가지로

특정 속성 및 상황별 선택자를 사용하면

제이쿼리에서 원하는 영역을 가져올 수 있다.