티스토리 뷰

카테고리 없음

자바스크립트와 jQuery 선택자 기본 사용법 완벽 가이드

모바일게임 공식카페 2024. 11. 29. 03:03

자바스크립트와 jQuery 선택자 기본 사용법

jQuery는 자바스크립트 기반의 강력한 라이브러리로, HTML 문서의 요소를 간단하고 효율적으로 조작할 수 있도록 돕습니다. 특히 선택자(selector)는 jQuery의 핵심 기능으로, HTML 요소를 선택하고 이를 기반으로 다양한 작업을 수행할 수 있습니다. 이번 포스팅에서는 jQuery 선택자의 기본 사용법과 주요 활용 사례를 살펴보겠습니다.

 

 

👇👇👇 내용 자세히보기 👇👇👇 

영상 설명 바로가기

jQuery란 무엇인가?

jQuery는 자바스크립트를 더욱 간단하게 사용할 수 있도록 도와주는 라이브러리입니다. $() 기호를 사용하여 HTML 요소를 선택하고, 그 위에 다양한 동작(action)을 적용할 수 있습니다. 기본 문법은 아래와 같습니다:

$(selector).action();
  • selector: HTML 요소를 선택하는 CSS 스타일의 선택자.
  • action(): 선택된 요소에 적용할 메서드(예: hide(), show(), css() 등).

jQuery 선택자의 종류

jQuery는 CSS 선택자를 기반으로 다양한 형태의 선택자를 제공합니다. 이를 통해 HTML 요소를 직관적으로 선택하고 조작할 수 있습니다.

기본 선택자

유형 표현식 설명
전체 선택자 $(" * ") 모든 HTML 요소를 선택
태그 선택자 $("tag") 지정된 태그와 일치하는 모든 요소
ID 선택자 $("#id") 특정 ID를 가진 요소를 선택
클래스 선택자 $(".class") 특정 클래스를 가진 모든 요소를 선택

예제

<p id="intro">Hello, World!</p>
<p class="text">Welcome to jQuery!</p>
<script>
  $("#intro").css("color", "blue"); // ID가 intro인 요소의 텍스트 색상을 파란색으로 변경
  $(".text").hide(); // 클래스가 text인 모든 요소 숨기기
</script>

속성 기반 선택자

속성 값을 기준으로 요소를 선택할 수도 있습니다.

표현식 설명
[attribute] 특정 속성을 가진 모든 요소를 선택
[attribute=value] 특정 속성이 지정된 값과 일치하는 요소
[attribute!=value] 특정 속성이 지정된 값과 일치하지 않는 요소
[attribute^=value] 특정 값으로 시작하는 속성을 가진 요소
[attribute$=value] 특정 값으로 끝나는 속성을 가진 요소
[attribute*=value] 특정 값을 포함하는 속성을 가진 요소

예제

<a href="https://example.com">Example</a>
<a href="https://google.com">Google</a>
<script>
  $("a[href^='https']").css("color", "green"); // https로 시작하는 링크의 텍스트 색상을 초록색으로 변경
</script>

필터 선택자

필터 선택자를 사용하면 조건에 따라 더욱 세부적인 요소를 지정할 수 있습니다.

주요 필터

표현식 설명
:first 첫 번째 요소
:last 마지막 요소
:even 짝수 번째 요소
:odd 홀수 번째 요소
:eq(index) 지정된 인덱스의 요소
:gt(index) 지정된 인덱스보다 큰 인덱스를 가진 요소
:lt(index) 지정된 인덱스보다 작은 인덱스를 가진 요소

예제

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  $("li:first").css("font-weight", "bold"); // 첫 번째 리스트 항목을 굵게 표시
  $("li:odd").css("background-color", "lightgray"); // 홀수 번째 항목에 배경색 적용
</script>

폼 관련 선택자

폼(form) 내의 특정 입력 필드를 쉽게 찾을 수 있는 방법도 제공합니다.

주요 폼 선택자

표현식 설명
:input 모든 입력 필드
:text <input type="text"> 필드
:password <input type="password"> 필드
:checked 체크된 체크박스 또는 라디오 버튼
:selected 선택된 <option>

예제

<form>
  <input type="text" value="Name">
  <input type="checkbox" checked>
</form>
<script>
  $(":text").val("Updated Name"); // 텍스트 입력 필드의 값을 변경
  $(":checked").css("outline", "2px solid red"); // 체크된 입력 필드 강조 표시
</script>

jQuery로 자주 사용하는 메서드

jQuery는 단순히 HTML을 선택하는 것 외에도 다양한 메서드를 제공하여 동적인 웹 페이지를 쉽게 구현할 수 있습니다.

HTML 조작 메서드

  • .html(): HTML 콘텐츠 가져오기 또는 설정하기.
  • .text(): 텍스트 콘텐츠 가져오기 또는 설정하기.
  • .val(): 폼 입력값 가져오기 또는 설정하기.
  • .attr(): 속성 값 가져오기 또는 설정하기.

예제

$("#myDiv").html("<b>New Content</b>"); // HTML 콘텐츠 변경
$("#myInput").val("New Value"); // 입력 필드 값 변경

CSS 및 스타일링

  • .css(property, value): CSS 스타일 설정.
  • .addClass(className): 클래스 추가.
  • .removeClass(className): 클래스 제거.
  • .toggleClass(className): 클래스 토글.

예제

$("#myDiv").css("background-color", "yellow"); // 배경색 변경
$("#myDiv").addClass("highlight"); // highlight 클래스 추가

이벤트 처리

  • .click(), .hover(), .on(event, handler) 등 다양한 이벤트 리스너 제공.

예제

$("button").click(function() {
  alert("Button clicked!");
});

결론

jQuery는 간결한 문법과 강력한 기능을 통해 HTML 문서를 효율적으로 조작할 수 있는 도구입니다. 특히 다양한 선택자와 메서드를 활용하면 복잡한 작업도 손쉽게 처리할 수 있습니다. 이번 포스팅에서 소개한 내용을 바탕으로 jQuery의 기본기를 탄탄히 다지고, 실전 프로젝트에서 활용해 보세요.

 

자주 묻는 질문(FAQ)

Q1. jQuery와 JavaScript의 차이는 무엇인가요?
A1. jQuery는 JavaScript 라이브러리로, JavaScript 코드를 간결하게 작성하도록 돕습니다. JavaScript가 더 유연하지만 코드가 복잡해질 수 있는 반면, jQuery는 간단한 문법으로 빠르게 작업할 수 있습니다.

Q2. jQuery 없이도 동일한 작업이 가능한가요?
A2. 가능합니다. JavaScript의 DOM API(querySelector, addEventListener) 등을 사용하면 동일한 작업을 수행할 수 있지만, 코드가 길어질 수 있습니다.

Q3. jQuery는 여전히 유용한가요?
A3. React, Vue.js 같은 프레임워크가 대중화되었지만, 간단한 프로젝트나 기존 코드베이스에서는 여전히 유용합니다.

저작자표시 비영리 변경금지
반응형