💻 1. 웹개발_Front end/1-5 JQuery

[JQuary] 06-3 제이쿼리 탐색 선택자

달님🌙 2021. 9. 14. 14:02
반응형

 

탐색 선택자

 

- 탐색 선택자 기능 : 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색할 수 있음

- 탐색 선택자 종류 : 위치 탐색 선택자, 속성 탐색 선택자, (콘텐츠 탐색 선택자, 필터링 선택자)

 

위치 탐색 선택자

 

- 기본 선택자로 선택한 요소는 배열에 담긴다.

- 배열의 인덱스를 사용해 특정 요소를 좀 더 정확하게 선택할 수 있음

- 위치 탐색 선택자 종류

 

first / last 선택자

 

- first 선택자는 선택된 요소 중 첫 번째 요소만 선택

- last 선택자는 선택된 요소 중 마지막 요소만 선택

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first/last 위치 탐색 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>first/last 위치 탐색 선택자</h1>
    <ul id="menu">
        <li>내용1</li>
        <li>내용2</li>
        <li>내용3</li>
        <li>내용4</li>
    </ul>
    <script>
        //menu의 li중 첫 번째 요소 선택
        //내용1 선택
        
        //방법1.
        $("#menu li:first").css( {
            "border" : "1px solid red",
            "background-color" : "#ff0"
        });
        
        //방법2.
        // $("menu li").first.css( {
        //     "border" : "1px solid red",
        //     "background-color" : "#ff0"
        // });
        
        
        // menu 의 li중 마지막 요소 선택
        //내용4 선택
        
        //방법1.
        $("#menu li:last").css( {
            "border" : "1px dashed red",
            "background-color" : "skyblue"
        });
    	
        //방법2.
        // $("menu li").last.css( {
        //     "border" : "1px dashed red",
        //     "background-color" : "skyblue"
        // });
    </script>
</body>
</html>

 

even / odd 선택자

 

- even 선택자는 짝수 인덱스 요소만 선택

- odd 선택자는 홀수 인덱스 요소만 선택

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first/last 위치 탐색 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>first/last 위치 탐색 선택자</h1>
    <ul id="menu">
        <li>내용1</li>
        <li>내용2</li>
        <li>내용3</li>
        <li>내용4</li>
    </ul>
    <script>
        //menu의 li중 홀수 번째 요소 선택
        //내용1, 내용3 선택 - index = 0, 2
        $("#menu li:even").css( {
            "border" : "1px solid red",
            "background-color" : "#ff0"
        });
        // menu 의 li중 짝수 번째 요소 선택
        //내용2, 내용4 선택 - index = 1, 3
        $("#menu li:odd").css( {
            "border" : "1px dashed red",
            "background-color" : "skyblue"
        });
    </script>
</body>
</html>

 

eq(index) / lt(index) / gt(index) 탐색선택자

 

 

 

 

 

first-of-type / last-of-type 

 

 

nth-child(숫자 n) / nth-last-of-type(숫자) 선택자 

 

 

 

only-child / slice(index) 선택자

 

 

 

 

제이쿼리 배열 관련 메서드

 

 

 

 

 

each() / $.each() 메서드

 

 

map() / $.grep() 메서드

 

 

 

$.inArray() / $.isArray() / $.merge() 메서드

 

 

 

 

 

index() 메서드

 

 

 

 

 

속성 탐색 선택자

 

 

 

 

속성과 값에 따른 탐색 선택자

 

 

 

 

속성 상태에 따른 탐색 선택자

 

 

 

그 외의 선택자 - 콘텐츠 탐색 선택자

 

 

contains() / contents() / has() / not() / end() 

 

 

find() / filter() 탐색 선택자

 

 

선택자와 함께 알아두면 유용한 메서드

 

 

 

 

is() 메서드

 

 

 

 

 

반응형