[jQuery] selector 1

[jQuery selector]

1. 문법

jQuery 또는 $ 로 사용한다.

jQuery("h1"). 또는 $("h1").

2. 태그 셀럭터

$("태그명").

3. id 셀렉터

$("#id명").

4. class 셀렉터

$(".class명").

5. not 셀렉터

$(":not 태그명").

6. 그룹 셀렉터

$("태그명, 태그명").

7. 자식 셀렉터

$("태그명1 태그명2").

- 태그명1의 자식들 중 태그명2의 요소를 선택

$("태그명1 > 태그명2").

- 태그명1의 1단계 자식들 중 태그명2의 요소를 선택

8. 인접 셀렉터

$("태그명1 ~ 태그명2").

- 태그명1 다음의 모든 태그명2의 요소를 선택

$("태그명1 + 태그명2").

- 태그명1 바로 다음의 태그명2의 요소를 선택

9. 셀렉터 속성

$("태그명[속성=값]").

- 태그 elements 중 '속성'이 '값'인 요소를 선택

$("태그명[속성!=값]").

- 태그 elements 중 '속성'이 '값'이 아닌 요소를 선택

$("태그명[속성^=값]").

- 태그 elements 중 '속성'이 '값'으로 시작하는 요소를 선택

$("태그명[속성*=값]").

- 태그 elements 중 '속성'이 '값'이 들어가는 요소를 선택

$("태그명[속성$=값]").

- 태그 elements 중 '속성'이 '값'으로 끝나는 요소를 선택

[jQuery selector 예제]

$(function() {
    $("*").css("font-size", "15px");
    $("span").css("color", "red");
    $("span, label").css("font-family", "궁서");
    $("#div1").css("color","tomato");
    $(".c1").css("background", "#00ff00");
    $("form input").css("background", "yellow");
    
    $("form input[type=text]").css("border", "none");
    $("form input[type=text]").css("border-bottom", "1px solid red");
    
    $("input[name=aa1]").css("font-family", "궁서");
    
    $("form input[name^=aa]").css("color", "blue");
    $("form input[name*=aa]").css("color", "blue");  
    
    $("form input[name$=2]").css("border-top", "1px solid blue");
    
    $("form :not(input[type=text])").css("background", "tomato");
    
    $("span ~ b").css("background", "#ffff00");
    
    $("div > b").css("border", "1px solid black");
    $("div b").css("color", "blue");
    
    $("span a[href^=mailto]").css("color","tomato");
});
 

$("*").css("font-size", "15px");

 -> 모든 elements에 대해 font-size 를 15px로 설정

$("span").css("color", "red");

 -> <span>에 대해 글씨색을 "red"로 설정

$("span, label").css("font-family", "궁서");

 -> <span>과 <label>에 대해 글씨체를 "궁서"로 설정

$("#div1").css("color","tomato");

 -> id가 div1인 element에 대해 글씨색을 "tomato"로 설정

$(".c1").css("background", "#00ff00");

 -> class가 c1인 elements에 대해 배경색을 "#00ff00"으로 설정

$("form input").css("background", "yellow");

 ->  <form> 안에 있는 <input>에 대해 배경색을 "yellow"로 설정

$("form input[type=text]").css("border", "none");

 -> <form> 안의 <input>의 type이 text인 elements에 대해 "boarder"를 "none"으로 설정

$("form input[type=text]").css("border-bottom", "1px solid red");

 -> <form> 안의 <input>의 type이 text인 elements에 대해 "border-bottom"을 "1px solid red"로 설정

$("input[name=aa1]").css("font-family", "궁서");

 -> <input> name이 aa1인 elements의 글씨체를 "궁서"로 설정

$("form input[name^=aa]").css("color", "blue");

 -> <form> 안의 <input>의 name이 aa로 시작하는 elements의 글씨색을 "blue"로 설정

$("form input[name*=aa]").css("color", "blue");  

 -> <form> 안의 <input>의 name에 aa이 들어가는 elements의 글씨색을 "blue"로 설정 

$("form input[name$=2]").css("border-top", "1px solid blue");

 -> <form> 안의 <input>의 name이 2로 끝나는 elements의 "border-top"을 "1px solid blue"로 설정 

$("form :not(input[type=text])").css("background", "tomato");

 -> <form> 안의 <input>의 type이 text가 아닌 elements의 배경색을 "tomato"로 설정

$("span ~ b").css("background", "#ffff00");

 -> <span> 다음의 모든 <b> elements의 배경색을 "#ffff00"으로 설정

$("span + b").css("background", "#ffff00");

 -> <span> 바로 다음의 <b> elements의 배경색을 "#ffff00"으로 설정

$("div > b").css("border", "1px solid black");

 -> <div> 안의 1단계 자식 <b> elements의 "border"를 "1px solid black"으로 설정

$("div b").css("color", "blue");

 -> <div> 안의 모든 (손자 포함) <b> elements의 글씨색을 "blue"로 설정

$("span a[href^=mailto]").css("color","tomato");

 -> <span> 안의 <a>의 href가 mailto로 시작하는 elements의 글씨색을 "tomato"로 설정

<h3>selectors 예제</h3>
 
<span><a href="test.com">test</a></span><br>
<span><a href="mailto:admin@test.com">관리자 이메일</a></span><br>
<p>
    <input type="button" value="확인">
    <input type="checkbox">
    <input type="radio">
</p>
 
<div id="subject">과목</div>
<div>
    <b>자바</b>
    <span>객체지향 프로그래밍</span><br>
    <b>HTML5</b>
    <span>웹 프로그래밍</span><br>
    <b>스프링</b>
    <span>프레임워크</span><br>
    <p>
        <b>css</b>
        <span>스타일 시트</span><br>
    </p>
</div>
 
<div id="div1">테스트1</div>
<div id="div2" class="c1">테스트2</div>
<span>테스트3</span><br>
<span>테스트4</span><br>
<div id="div3" class="c1">테스트5</div>
<span class="c1">테스트6</span><br>
<label class="c2">테스트7</label><br><br>
 
<input type="text" name="aa1"><br><br>
<form>
    <input type="text" name="aa1"><br><br>
    <input type="text" name="aa2"><br><br>
    <input type="text" name="bb1"><br><br>
    <input type="text" name="bb2"><br><br>
    <input type="button" value="등록하기">
    <input type="reset" value="다시입력">
</form>

결과 :