JQuery Selector ( 기본 선택자, 필터 선택자, 전체 선택자 )

FrontEnd/JQuery

by H_Develop 2022. 7. 12. 18:27

$ 기호의 ()안에 문자열 형태로 들어가는데, $("제이쿼리_선택자")로 사용한다.
기본 선택자, 자식/후손 선택자, 필터 선택자로 나뉜다.

기본 선택자
전체 선택자 $("*") 전체 요소 선택
요소 선택자 $("p") 모든 <p> 요소 선택
아이디 선택자 $("name") id="name" 인 요소 선택
클래스 선택자 $(".red") class="red"인 요소 선택
그룹 선택자 $("p, div, h2") 모든 <p>, <div>, <h2> 요소 선택

자식 선택자
자식 선택자 $("div > span") <div> 요소의 자식 중, <span>요소 선택
후손 선택자 $("div span") <div> 요소의 후손, 하위에 있는 <span> 요소 선택

필터 선택자
:eq(index) $("li:eq(0)") <li>요소에서 인덱스 0(첫 번째) 요소 선택
:first $("p:first") 첫 번째 <p> 요소 선택, eq(0)과 동일
:last $("p:last") 마지막 <p> 요소 선택
:even $("tr:even") 짝수 <tr> 요소 선택
:odd $("tr:odd") 홀수 <tr> 요소 선택
:nth-child(n) $("p:nth-child(2)") 부모의 두 번째 자식이 <p>인 모든 요소 선택
:first-child $("p:first-child") 부모의 첫 번째 자식이 <p>인 모든 요소 선택
:last-child $("p:last-child") 부모의 마지막 자식이 <p>인 모든 요소 선택
:last-of-type $("p:last-of-type") 부모의 마지막이 <p>인 모든 요소 선택
:only-child $("p:not(:only-child)") 단 하나의 자식이 아닌 모든 <p> 요소 선택
:not $("p:not(:only-child)") 단 하나의 자식이 아닌 모든 <p> 요소 선택
:text $(":text") type="text"인 모든 <input> 요소 선택
:password $(":password") type="password"인 모든 <input> 요소 선택
:radio $(":radio") type="radio"인 모든 <input> 요소 선택
:checkbox $(":checkbox") type="button"인 모든 <input> 요소 선택
:button $(":button") type="submit"인 모든 <input> 요소 선택
:submit $(":submit") type="reset"인 모든 <input> 요소 선택
:reset $(":reset") type="selected"인 모든 <input> 요소 선택
:selected $(":selected") selected(선택) 된 모든 <input> 요소 선택
:checked $(":checked") checked(체크) 된 모든 <input> 요소 선택

전체 선택자

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
	<script>
    	$(document).ready(function() {
        	$("*").css("border","solid 1px blue"); // border:solid 1px blue가 아님
        });
    </script>
<body>
	<h2>전체 선택자</h2>
    <p>전체 선택자 *는 페이지의 모든 요소를 선택한다.</p>
    <ul>
    	<li>항목1</li>
    	<li>항목2</li>
    </ul>
</body>

요소 선택자, 태그 선택자

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
	<script>
    	$(document).ready(function() {
        	$("p").css("background-color","yellow");
        });
    </script>
<body>
	<h2>요소 선택자</h2>
    <p>요소 선택자는 태그 선택자로도 불리는데,
    페이지에서 해당 요소를 선택한다.</p>
    <ul>
    	<li>항목 1</li>
    	<li>항목 2</li>
    </ul>
</body>

아이디 선택자

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</haed>
	<script>
    	$(function() {
        	// $("#title").css("border","solid 5px skyblue");
            // $("#title").css("padding","10px");	// 위 두줄을 아래 한줄로 변경 가능.
            $("#title").css({"border":"solid 5px skyblue","padding":"10px"});
        });
    </script>
<body>
	<h2 id="title">아이디 선택자</h2>
    <p>아이디 선택자는 태그 페이지에서 id 속성 값을 선택한다.</p>
</body>

클래스 선택자

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
	<script>
    	$(document).ready(function() {
        	$(".red").css({"color":"red","font-style":"italic"});
        });
    </script>
<body>
	<h2>클레스 선택자</h2>
    <p>클레스 선택자는 요소의 <span class="red">class 속성 값</span>으로
    해당 요소를 선택해서 만들어 준다.</p>
    
    <ul>
    	<li>항목1</li>
    	<li class="red">항목2</li>
    	<li>항목3</li>
    	<li class="red">항목4</li>
    </ul>
</body>

그룹 선택자

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
	<script>
    	$(document).ready(function() {
        	$("h2,span,div").css("text-decoration","underline");
        });
    </script>
<body>
	<h2>그룹 선택자</h2>
    <p>그룹 선택자는 요소의 <span>여러 요소들을 동시에 선택</span>해서 변경해준다.</p>
    <div>박스 1</div>
    <div>박스 2
    	<ul>
        	<li>항목 1</li>
        	<li>항목 2</li>
        </ul>
    </div>
</body>

자식 선택자 $("div > span") 꺽세를 반대로 < 사용하면 적용이 안됨.

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
	<script>
    	$(document).ready(function() {
        	$("div > span").css("background-color","skyblue");
        });
    </script>
<body>
	<div>
    	<h2>h2 요소 (자식)</h2>
        <span>span 요소 (자식)</span>
        <span>span 요소 (자식)</span>
        <span>span 요소 (자식)</span>
        <!-- div 바로 밑에 span에만 적용 -->
    </div>
    <div>
    	<h2>h2 요소(자식)</h2>
        <p>p 요소(자식)
        	<span>span 요소(후손)</span>
        	<span>span 요소(후손)</span>
        </p>
        <p>p 요소(자식)</p>
    </div>
</body>

후손 선택자 $("div span")

	<script>
    	$(document).ready(functioin() {
        	$("div span").css("background-color","skyblue");
        });
    </script>
    <style>
    	div {border : solid 3px red;}
    </style>
</head>
<body>
    <div>
        <h2>h2 요소(자식)</h2>
        <span>span 요소(자식)</span>
        <span>span 요소(자식)</span>
        <span>span 요소(자식)</span>
        <!-- div 바로 밑에 span에만 적용 -->
    </div>
    <div>
        <h2>h2 요소(자식)</h2>
        <p>p 요소(자식)
        <!-- $("div span") 처리로 모든 div의 span이 적용 -->
            <span>span 요소(후손)</span>
            <span>span 요소(후손)</span>
        </p>
        <p>p 요소(자식)</p>
    </div>
</body>

필터 선택자 $("div li:eq(0)") // index 0부터 셈을 시작

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(function() {
        	$("div li:eq(0)").css("background-color","skyblue");
            // div 후손 li 중, index(0)은 첫 번째 요소 지정.
            $("div li:eq(3)").css("background-color","yellow");
        });
    </script>
</head>
<body>
	<div>
    	<h2>eq(index) 필터</h2>
        <ul>
            <li>항목 1</li>
            <li>항목 2</li>
            <li>항목 3</li>
            <li>항목 4</li>
            <li>항목 5</li>
        </ul>
    </div>
</body>

필터 선택자 $("div .row:even") $("div .row:odd") $("div tr:first")

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(functioin() {
        	$("div .row:even").css("background-color","skyblue");
            $("div .row:odd").css("background-color","yellow");
            $("div tr:first").css("background-color","gray");
        });
    </script>
</head>
<body>
	<div>
    	<h2>:even/:odd 필터</h2>
        <table>	<!-- table 안에서 tr은 행, th는 첫 번째 제목 행, td는 각 셀 -->
            <tr><th>인덱스 번호</th><th>1열</th><th>2열</th></tr>
            <tr class="row"><td>행 인덱스 : 0</td><td>1행 1열</td><td>1행 2열</td></tr>
            <tr class="row"><td>행 인덱스 : 1</td><td>2행 1열</td><td>2행 2열</td></tr>
            <tr class="row"><td>행 인덱스 : 2</td><td>3행 1열</td><td>3행 2열</td></tr>
            <tr class="row"><td>행 인덱스 : 3</td><td>4행 1열</td><td>4행 2열</td></tr>
            <tr class="row"><td>행 인덱스 : 4</td><td>5행 1열</td><td>5행 2열</td></tr>
            <tr class="row"><td>행 인덱스 : 5</td><td>6행 1열</td><td>6행 2열</td></tr>
        </table>
    </div>
</body>

필터 선택자 $("li:nth-child(2)") $("li:eq(2)")

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(function() {
        	$("li:nth-child(2)").css("background-color","yellow");
        	$("li:eq(2)").css("border","solid 3px red");
            $("li:eq(4)").css("border","dotted 3px skyblue");
        });
    </script>
    <style>
    	ul {border : solid 1px blue;}
    </style>
</head>
<body>
	<h2>:nth-child(n) 필터</h2>
    <ul>
    	<li>항목1</li>
    	<li>항목2</li>
    	<li>항목3</li>
    </ul>
    <ul>
    	<li>품목1</li>
    	<li>품목2</li>
    	<li>품목3</li>
    </ul>
</body>

$("li:eq(4)") 는 두번째 ul의 두번째 li에 적용된다. ( 전체 li에서 4번째를 찾기 때문. )

index가 0부터 시작해서 4번째에 적용되고, ul이 감싸주는 것에 영향을 받지 않고, 전체 li에서 index 4에 적용된다.

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(function() {
        	$("li:first-child").css("background-color","yellow");
            $("li:last-child").css("border","solid 3px red");
            $("li:first").css("border","dotted 3px skyblue");
            $("li:last").css("border","dotted 3px black");
        });
    </script>
    <style>
    	ul {border : solid 1px blue;}
    </style>
</head>
<body>
	<h2>:nth-child(n) 필터</h2>
    <ul>
    	<li>항목 1</li>
    	<li>항목 1</li>
    	<li>항목 1</li>
    </ul>
    <ul>
    	<li>품목 1</li>
    	<li>품목 1</li>
    	<li>품목 1</li>
    </ul>
</body>

$("li:first-child") 는 ul 별, li의 첫번째에 적용이되며,
$("li:last-child") 는 ul 별, li의 마지막에 적용된다. ( $("li:last").css("border","dotted 3px black");에 가려 보이지 않음 )
$("li:first") 는 전체 li 에서 첫번째에 적용되며,
$("li:last") 는 전체 li에서 마지막에 적용된다.

필터 선택자 :text :button :submit :radio input:checked option:selected

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(function() {
        	$(":text, :password").css("border","solid 1px pink");
            // input 글쓰기 칸
            $(":button").css({"background-color":"yellow","border":"solid 1px black"});
            // 아이디 중복 체크 버튼
            $(":submit, :reset").css({"background-color":"pink","border":"solid 1px black"});
            // 제출하기, 입력 취소 버튼
            $(":radio, :checkbox").wrap("<span style='background-color:yellow'></span>");
            // 남성 친구
            $("input:checked").wrap("<span style='background-color:red'></span>");
            // 여성 인터넷 기타
            $("option:selected").css("background-color","red");
            // option 태그의 selected 설정되어있는 것은 option 창을 내리면 홀로 CSS가 적용되어 있다.
        });
    </script>
</head>
<body>
    <h2>회원 가입 양식</h2>
    <form>
        <ul>
            <li>
                아이디 : <input type="text">             
                <input type="button" value="아이디 중복 체크">
            </li>
                <li>
                    이름 : <input type="text">
                </li>
                <li>
                    비밀번호 : <input type="password">
                </li>
                <li>
                    이메일 : <input type="text">@
                    <select>
                        <option value="naver">naver.com</option>
                        <option value="hanmail" selected>hanmail.net</option>
                        <option value="gmail" >gmail.com</option>
                    </select>
                </li>
                <li>
                    성별 : <input type="radio" name="gender"> 
                    남성 <input type="radio"  name="gender" checked> 여성
                </li>    
                <li>
                    가입경로 : <input type="checkbox" name="h1" checked> 인터넷 
                    <input type="checkbox" name="h2"> 친구
                    <input type="checkbox" name="h3" checked> 기타
                </li>        
            </ul>   
            <div>
              <input type="submit" value="체출하기">
              <input type="reset" value="입력취소">
            </div>  
        </form> 
</body>

제이쿼리에서 wrap() 메써드는 $(선택자).wrap(HTML_요소)로써,

제이쿼리 선택자에 대해 선택된 요소를 HTML 요소로 감싼다.

$("input:checked").wrap("<span style='background-color:red'></span>"); 에서 $("input:checked") 는

<input> 요소에서 checked가 설정된 요소들을 선택한다.

따라서 '여성' 라디오 버튼 요소 하나와 '인터넷'과 '기타' 체크박스 요소 두개의 배경색을 빨간색으로 설정된다.

'FrontEnd > JQuery' 카테고리의 다른 글

마우스이벤트(click(),dbclick(),mouseenter(),mouseleave())키보드이벤트(keypress(),keydown(),keyup())폼이벤트(focus(),blur(),change())문서윈도우이벤트(ready(),resize(),scroll()) (0)	2022.07.13
parent(), find(), siblings() (0)	2022.07.12
JQuery ( addClass(), removeClass(), css() ) (0)	2022.07.12
JQuery Method( append(), prepend(), befor(), after(), remove() ) (0)	2022.07.11
JQuery Method ( text(), html(), val(), attr() ) (0)	2022.07.11