제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명

주니어 기초 코딩공부/Javascript & jQuery

제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명

jju_developer 2023. 1. 12. 17:11

728x90

안녕하세요 jju_developer입니다.

이번 시간부터는 제이쿼리(jQuery) 탐색 선택자에 대해서 알아보도록 하겠습니다😆

▼▼▼제이쿼리 직접선택자?▼▼▼

https://jju240.tistory.com/146

제이쿼리(jQuery)란? + 선택자 상세 설명

안녕하세요 jju_developer입니다. 지난 시간에는 자바스크립트에 대한 기초 지식에 대해서 알아봤습니다~ 이번 시간 부터는 제이쿼리에 대해서 알아보도록 하겠습니다😆 ▼▼▼자바스크립트란?▼

jju240.tistory.com

1. 제이쿼리 탐색 선택자란?

 탐색 선택자를 사용하면

직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있습니다.

1-1 위치 탐색 선택자

위치 탐색 선택자 종류	설명
$("요소").first() $("요소:first")	전체 요소 중 첫 번째 요소만 선택한다.
$("요소").last() $("요소:last")	전체 요소 중 마지막 요소만 선택한다.
$("요소:odd")	요소 무리중 짝수 번쨰 요소만 선택한다.
$("요소:even")	요소 무리중 홀수 번쨰 요소만 선택한다.
$("요소:first-of-type")	요소 무리 중 첫 번째 요소만 선택한다.
$("요소:last-of-type")	요소 무리 중 마지막 요소만 선택한다.
$("요소:nth-child(n)")	요소 무리중 n 번째 요소만 선택한다.
$("요소:nth-child(숫자n)")	요소 무리 중 n의 배수 요소만 선택한다.
$("요소:nth-last-of-type(n)")	요소 무리 중 마지막 위치로부터 n번째에 있는 요소만 선택한다.
$("요소:only-child")	부모 요소내에 선택한 요소가 1개뿐인 요소만 선택한다.
$("요소:eq(index)") $("요소").eq(index)	요소중 인덱스 n이 참조하는 요소를 불러온다.
$("요소:gt(n)")	요소 중 인덱스 n보다 큰 인덱스가 참조하는 요소를 불러온다.
$("요소:lt(n)")	요소 중 인덱스 n보다 작은 인덱스가 참조하는 요소를 불러온다.
$("요쇼").slice(n) $("요쇼").slice(n, m)	"요소" 내에, 인덱스 n부터 참조하는 요소를 선택합니다. "요소" 내에, 인덱스 n이상, m미만인 요소를 선택합니다.

예제)

list 아이템이 6개일 때 첫 번째 꺼는 인덱스 0~5중 내용 4를 바꾸고 싶을 때 어떻게 할까요?

내용 4를 기준으로 바꾼 것 입니다.

   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="text/javascript">
      //<![CDATA[
      $(function () {
         //인덱스3은 내용4를 선택한 것
         $("li:eq(3)").css("background-color", "yellow");
         $("li:lt(3)").css("background-color", "pink");
         $("li:gt(3)").css("background-color", "lightgreen");
      });
//]]>
   </script>
</head>

<body>
   <h1>탐색 선택자</h1>
   <ul>
      <li>내용1</li>
      <li>내용2</li>
      <li>내용3</li>
      <li>내용4</li>
      <li>내용5</li>
      <li>내용6</li>
   </ul>
</body>

1-2 속성 탐색 선택자

 선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해 오는 선택자입니다.

속성 탐색 선택자 종류	사용법	설명
$("요소 선택[속성]")	$("li[title]")	li 중 title속성이 포함된 요소만 선택.
$("요소 선택[속성=값]")	$("li[title='리스트']")	li 중 title 속성값이 '리스트'인 요소만 선택.
$("요소 선택[속성^=텍스트]")	$("a[href^='http://']")	href 속성값이 'http://'로 시작하는 요소만 선택.
$("요소 선택[속성$=텍스트]")	$("a[href$='.com']")	href 속성값이 '.com'으로 끝나는 요소만 선택.
$("요소 선택[href*=텍스트]")	$("a[href*='on_sunday']")	href 속성값 'on_sunday'를 포함하는 요소만 선택.
$("요소 선택:hidden")	$("li:hidden")	li 중 숨겨져 있는 요소만 선택.
$("요소 선택:visible")	$("li:visible")	li 중 보이는 요소만 선택.
$(".text")	$(".text")	input 중 type 속성값이 "text"인 요소만 선택.
$(".selected")	$(".selected")	selected 속성이 적용된 요소만 선택.
$(".checked")	$(".checked")	checked 속성이 적용된 요소만 선택.

예제)

인풋태그의 text를 찾아서 스타일에 빨간색 테두리를 하고 싶을 때 탐색 선택자를 사용할 수 있습니다.

$(function () {

$(":text").css("border", "2px dashed #f00");

$(":checked").attr("checked", false);

$(":selected").attr("selected", false);

});

체크 된 것을 찾아서 체크가 되지 않도록 설정하였습니다. => 체크박스

attr은 속성을 변경하려고 사용한 것 입니다.

selected된것도 기봅값으로 false로 해서 기본값이 네이버가 되도록 설정하였습니다.

▽▽전체 코드 보기▽▽

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title> 탐색 선택자 </title>
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="text/javascript">
      //<![CDATA[
      $(function () {
         $(":text").css("border", "2px dashed #f00");
         $(":checked").attr("checked", false);
         $(":selected").attr("selected", false);
      });
//]]>
   </script>
</head>

<body>
   <h1>탐색 선택자</h1>
   <p>
      <label for="user_name">이름</label>
      <input type="text" name="user_name" id="user_name" />
   </p>
   <p>
      <input type="checkbox" name="accept" id="accept" checked="checked" />
      <label for="accept">사용자 동의</label>
   </p>
   <p>
      <select name="rel_site" id="resl_site">
         <option value="네이버">네이버</option>
         <option value="티스토리" selected="selected">티스토리</option>
      </select>
   </p>
</body>

</html>

2. 제이쿼리 그 외의 선택자 – 콘텐츠 탐색 선택자

종류	사용법	설명
$("요소 선택:contains(텍스트)")	$("li:contains('내용2')")	li 중 '내용2'라는 텍스트를 포함하는 요소만 선택.
$("요소 선택").contents()	$("p").contents()	선택 요소중 가장 가까운 하위요소 선택.
$("요소 선택:has(요소명)") $("요소 선택").has(요소명)	$("li:has('span')") $("li").has('span')	li 요소 중 span을 포함하는 요소만 선택.
$("요소 선택:not(:제외요소)") $("요소 선택").not(:제외요소)	$("li:not(:first)") $("li")	li 중 첫번째 요소만 제외하고 선택.
$(요소 선택).fillter(필터요소)	$("li").fillter(".list2")	li 중 calss 값이 "list2"인 요소만 선택.
$(요소 선택).find(요소선택2)	$("li").find("strong")	li 요소의 하위 요소인 <strong> 만 선택.
$("요소 선택1").closest("요소선택2")	$("strong").closest("div")	<strong>을 감싸는 상위 <div>중 가장가까운 상위 요소 선택.
$("요소 선택").탐색 선택자().end()	$("li").children("a").end()	필터링이 실행되기 이전의 요소인 li가 선택.

<기본코드>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title> 탐색 선택자 </title>
   <style type="text/css">
      #menu li {
         margin: 5px 0;
      }
   </style>
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="text/javascript">
      //<![CDATA[
      $(function () {





      });
//]]>
   </script>
</head>

<body>
   <h1>탐색 선택자</h1>
   <div id="wrap">
      <div id="inner_wrap">
         <ul id="menu">
            <li>내용1</li>
            <li>
               <span>내용<strong>2</strong></span>
            </li>
            <li><a href="#">내용3</a></li>
            <li>내용4</li>
            <li>내용5</li>
         </ul>
      </div>
   </div>
</body>

</html>

여기서 이제

$(function () {

});

안의 내용을 채워보겠습니다.

<전체코드 보기>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title> 탐색 선택자 </title>
   <style type="text/css">
      #menu li {
         margin: 5px 0;
      }
   </style>
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="text/javascript">
      //<![CDATA[
      $(function () {
         $("#menu li:contains('내용3')").css("border", "3px dashed red");
         $("#menu li:has('strong')").css("border", "3px solid yellow");
         $("#menu li").not(":first").css("background-color", "lightgreen");
         $("#menu li:eq(1)").find("strong").css("font-size", "27px");
         $("#menu").closest("div").css("border", "10px double green");
      });
//]]>
   </script>
</head>
<body>
   <h1>탐색 선택자</h1>
   <div id="wrap">
      <div id="inner_wrap">
         <ul id="menu">
            <li>내용1</li>
            <li>
               <span>내용<strong>2</strong></span>
            </li>
            <li><a href="#">내용3</a></li>
            <li>내용4</li>
            <li>내용5</li>
         </ul>
      </div>
   </div>
</body>

</html>

$(function () {

$("#menu li:contains('내용3')").css("border", "3px dashed red");

$("#menu li:has('strong')").css("border", "3px solid yellow");

$("#menu li").not(":first").css("background-color", "lightgreen");

$("#menu li:eq(1)").find("strong").css("font-size", "27px");

$("#menu").closest("div").css("border", "10px double green");

});

여기서 핵심은 closest입니다.

가장 가까운 div를 선택하고 싶을 때 해주시면 됩니다.

여기까지 제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명이었습니다~!!

다음시간에 선택자와 함께 사용하면 편리한 메서드들에 대해 알아보겠습니다.

감사합니다.

728x90

'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글

제이쿼리(jQuery) 객체 조작, 속성 조작 메서드 (0)	2023.01.12
제이쿼리(jQuery) 선택자와 함께 사용하면 편리한 메서드들 (0)	2023.01.12
제이쿼리(jQuery)란? + 선택자 상세 설명 (1)	2023.01.12
자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법 (1)	2023.01.11
자바스크립트JavaScript 내장 객체, 브라우저와 관련된 객체 알아보기 (1)	2023.01.11

현재글제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명

developer_jju's_day

Back-End 백엔드 (재직중) - 웹개발, 서버개발, 데이터베이스 설계 - 영어

프로그래머스, level0, 프로그래머스 0단계, Database, 문제풀이, 0단계, 자바 프로그래머스, 자바 문제풀이, level00, Programmers, oracle, REACT, java 문자열, 프로그래머스 자바, SQL, java, sql 기초, 파이썬 기초, 리액트 기초, Java 기초,

Today :
Yesterday :

developer_jju's_day