• Q&A
  • 회원가입
  • 로그인

[Selector] JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)

452  
목차
  1. Selector 정의
  2. Selector 구문
  3. HTML 요소명 선택자
  4. CSS id 선택자
  5. CSS class 선택자
  6. 그외 다양한 선택자 ★ 
  7. 한번에 여러 선택자 사용 ★
  8. 선택자 연습용 HTML 소스
 

Selector 정의


작동을 수행시킬 HTML 요소 (=태그) 선택하는 역할 함.
HTML요소이름, 요소속성, 속성값, CSS id, CSS class 등 여러 방법 이용해 HTML 요소 선택 가능.

 

Selector 구문 

 

$(selector).method()


[구문 분석]

$
jquery 의미

selector
작동시킬 HTML 요소. HTML 요소 선택 시, CSS 선택자 이용 가능. (예) $('div')

method()
선택한 HTML 요소가 어떤 작동을 할지 정의 (예) click()

 

 
 

HTML 요소명 선택자

※ 모든 <p> 요소 선택


$("p")

 

PS1. 요소명은 <> 기호 없이 적어야 함.

PS2. 요소명은 반드시 따옴표로 묶어야 함.
PS3. 따옴표는 (큰따옴표/작은따옴표) 무방.


[예제]


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").hide();

    });

});

</script>


<style>

button {width:300px; text-align:center;}

</style>


<h2>홈짱닷컴 Homzzang.com</h2>

<p>HTML, CSS, JS, jQuery, SQL, PHP</p>

<p>웹 초보 가이드</p>


<button> <xmp><p> 요소 숨기기</xmp></button>


결과보기

 

CSS id 선택자

※ id=hz 선택


$("#hz")

 

PS1. 아이디는 # 붙인 후, 따옴표로 묶음.

PS2. 따옴표는 (큰따옴표/작은따옴표) 무방.


[예제]


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").hide();

    });

});

</script>


<style>

button {width:300px; text-align:center;}

</style>


<h2>홈짱닷컴 Homzzang.com</h2>

<p>HTML, CSS, JS, 

jQuery, SQL, PHP</p>

<p id="hz">웹 초보 가이드</p>


<button> <xmp><p> 요소 숨기기</xmp></button>


결과보기

 

CSS class 선택자

※ class=hz 선택


$(".hz")

 

PS1. 클래스명은 반드시 앞에 마침표 ( . ) 찍고 따옴표로 묶어야 함.
PS2. 따옴표는 (큰따옴표/작은따옴표) 무방.


[예제]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $(".hz").hide();

    });

});

</script>


<style>

button {width:300px; text-align:center;}

</style>


<h2>홈짱닷컴 Homzzang.com</h2>

<p>HTML, CSS, JS, jQuery, SQL, PHP</p>

<p class="hz">웹 초보 가이드</p>


<button><xmp><p> 요소 숨기기</xmp><button>


결과보기


그외 다양한 선택자 ★

(모든 / 현재) 선택자

 

$("*") 
모든 요소를 선택
   ※ 따옴표 붙여야 함.

$(this) 
현재 요소를 선택   ※ 
소문자로 적어야 하며, 따옴표 안 붙임.

  


(요소/ id / class ) 선택자

 
$("h1")  
모든 <h1> 요소를 선택
 
$("#hz")  
id="hz"인 요소를 선택


$(".hz")  
class="hz"인 모든 요소를 선택

 


선택자 결합해 선택 범위 좁히기 ★★★★★


$("p.hz")
class="hz"인 모든 <p> 요소를 선택
 
$("p:first") 
첫 번째 <p> 요소를 선택

$("ul li:first")
첫 번째 <ul> 요소의 첫 번째 <li> 요소를 선택  ★

$("ul li:first-child")
모든 <ul> 요소의 첫 번째 <li> 요소를 선택 ★

$("a[target='_blank']") 
target="_blank" 속성 가진 모든 <a> 요소 선택

$("a[target!='_blank']")
target="_blank" 속성 안 가진 모든 <a> 요소 선택.
 
$('#hz:text')
id="hz" type="text"인 폼요소


(처음/마지막)선택자


$("p:first")  
첫번째 <p> 요소를 선택


$("p:last")  
마지막 <p> 요소를 선택
 

(홀/짝)선택자

 
$("tr:even") 
모든 짝수 번째 <tr> 요소 선택  ※ <th> 라인은 빼고 작동함.

$("tr:odd") 
모든 홀수 번째 <tr> 요소 선택
  ※ <th> 라인은 빼고 작동함.
 

자식순번선택자


$("p:first-child")  
<body> 제외한 어떤 요소의 첫 번째 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>

$("p:first-of-type")  
<body> 고려한 모든 요소의 첫 번째 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>

$("p:last-child") 
<body> 제외한 어떤 요소의 마지막 자식 요소로 있는 <p> 요소 선택
 

(예) <body> <div><p></p><p></p></div><p></p><p></p></body>


$("p:last-of-type")  
<body> 포함한 모든 요소의 마지막 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>

$("li:nth-child(1)")   
자식 요소로 있는 모든 첫 번째 <li> 요소 선택.

$("li:nth-last-child(1)")   
자식 요소로 있는 모든 <li> 요소 중, 마지막부터 셌을 때 첫 번째인 요소들 선택.

$("li:nth-of-type(2)")  
자식 요소로 있는 모든 <li> 요소 중, 처음부터 셌을 때 두 번째인 요소들 선택.

$("li:nth-last-of-type(2)")   
자식 요소로 있는 모든 <li> 요소 중, 마지막부터 셌을 때 두 번째인 요소들 선택.

$("b:only-child")  
유일한 자식 요소로 있는 모든 <b> 요소 선택.

$("h3:only-of-type")  
<body> 고려해 유일하게 자식 요소로 있는 <h3> 요소를 선택.
 

(자식/자손/형제)선택자

 
$("div > p")  
모든 <div> 요소의 자식 요소로 있는 모든 <p> 요소를 선택  ※ <div> 바로 밑의 <p> 요소

$("div p")  
모든 <div> 요소의 자손 요소로 있는 모든 <p> 요소를 선택  ※ <div> 안에 있는 모든 <p> 요소

$("ul + h3")  
각 <ul> 요소 다음에 위치하는 모든 <h3> 요소를 선택

$("ul ~ table")
각 <ul> 요소와 형제 관계 (=동위)에 있는 모든 <table> 요소를 선택


가상선택자

 
$("ul li:eq(0)")
각 <ul><li> 구조에서 첫 번째 위치하는 <li> 요소를 선택  
※ eq = equal  
※ 가장 첫 번째는 0부터 시작

$("ul li:gt(0)")  
각 <ul><li> 구조에서 첫 번째 이후의 모든 <li> 요소를 선택  
※ gt = greater than

$("ul li:lt(2)")  
각 <ul><li> 구조에서 세 번째 미만의 모든 <li> 요소를 선택  
※ lt = less than

$(":header")  
<h1>, <h2>.....<h6> 등 모든 문단 제목 요소를 선택

$(":header:not(h1)")  
<h1> 요소를 제외한 모든 문든 제목 요소를 선택

$(":animated")  
모든 애니메이션 요소를 선택

$(":focus")  
현재 focus된 요소를 선택


$(":contains(Hz)")  
Hz 글자 포함하는 모든 요소 선택


$("div:has(p)")  
<p> 요소를 갖는 모든 <div> 요소를 선택


$(":empty")    
<input />처럼 닫는 태그 없이 사용하는 모든 요소를 선택


$(":parent")  
글자를 포함해 어떤 요소의 부모 요소가 되는 모든 요소를 선택


$("p:hidden")  
현재 숨김 처리되어 결과에 나오지 않는 모든 <p> 요소를 선택


$("table:visible")  
보이는 모든 <table> 요소 선택


$(":root")  
해당 웹문서의 최상위 요소 선택

$("p:lang(ko)")  
lang 속성의 속성값이 ko로 시작하는 모든 <p> 요소를 선택


속성선택자


$("[id]")  
id 속성을 가진 모든 요소를 선택

$("[href]")
href 속성 가진 모든 요소를 선택

$("[id=hz]")  
id 속성의 속성값이 hz인 모든 요소를 선택
(예) 
$("input[name=homzzang]" - 네임이 홈짱인 인풋 요소

$("p[id!=hz]")  
id 속성의 속성값이 hz이 아닌 모든 요소를 선택  
※ id 속성 자체를 안 가진 <p> 요소도 선택됨.

$("[id$=zzang")  
id 속성의 속성값이 zzang으로 끝나는 모든 요소 선택.

$("[id|=hz]")  
id 속성의 속성값이 hz 또는 hz- 인 모든 요소 선택.

$("[id^=L]")  
id 속성의 속성값이 대문자 L로 시작하는 모든 요소 선택. 예제보기

$("[title~=hz]")  
title 속성의 속성값에 hz 단어가 들어가는 모든 요소 선택. 

$("[id*=hz]")  
id 속성의 속성값에 hz 문자열이 들어가는 모든 요소 선택.


input 타입 선택자


$(":input")  
모든 input 요소 선택

$(":text")  
type="text"인 모든 폼 요소를 선택
 
$(":password")  
type="password"인 모든 폼 요소를 선택

$(":radio")  
type="radio"인 모든 폼 요소를 선택

$(":checkbox")  
type="checkbox"인 모든 폼 요소 선택.

$(":submit")  
type="submit"인 모든 폼 요소 선택.

$(":reset")  
type="reset"인 모든 폼 요소 선택.

$(":button")  
type="button"이거나 요소가 <button>인 모든 폼 요소를 선택.

$(":image")  
type="image"인 모든 폼 요소 선택.

$(":file")    
type="file"인 모든 폼 요소 선택.

$(":enabled")    
enabled 속성 (= 활성화된 상태)인 모든 폼 요소 선택.

$(":disabled")  
disabled 속성 (= 비활성화된 상태)인 모든 폼 요소 선택.

$(":selected")  
드롭다운 리스트에서 선택된 모든 옵션 요소 선택.

$(":checked")  
체크된 모든 폼 요소 선택.

 

※ 그외도 아주 다양하나, 위 예제 정도 공부하면 충분히 응용 가능. 
 

한번에 여러 선택자 사용 ★

 

$(selector1, selector2, selector3, .....)

※ 쉼표 ( , ) 이용해 나열


[예제]

 

$("h1, p")  
모든 <h1> 요소와 모든 <p> 요소를 선택

 
$(".hz, #hz")  
class="hz"인 요소와 id="hz"인 모든 요소를 선택.
(※ 여러 요소 선택 시 쉼표로 구분) 

 

 

선택자 연습용 HTML 소스

※ li 관련 선택자는 아래 소스로 선택자 바꿔가며 테스트.

<ul>
  <li>홈짱1</li>
  <li>
    홈짱2
         <ul>
          <li>홈짱2-1</li>
          <li>홈짱2-2</li>
          <li>홈짱2-3</li>
          <li>홈짱2-4</li>
        </ul>
  </li>
  <li>홈짱3</li>
  <li>홈짱4</li>


찾아주셔서 감사합니다. Since 2012