본문 바로가기
내마음대로만들어보자/JS

제이쿼리 선택자

by 소농민! 2021. 8. 16.
728x90

1. 선택자 란?

선택자는 HTML 요소를 선택하여 가져온다. (선택한 요소의 디자인 속성을 적용할때 사용, 동적으로 스타일 적용가능)

 

2. 선택자 사용하기

방법1 (잘못된 적용방법) 방법2 (정상 적용) 방법3 (정상 적용)
<head>
...
<script src="js/jquery.js"></script>
<script>
    $("#txt).css("color","red");
</script>
</head>
<body>
    <p id="txt">내용</p>
</body>		 <head>
...
<script src="js/jquery.js"></script>
<script>
   $(document).ready(function(){
      $("#txt).css("color","red");
   });
</script>
</head>
<body>
   <p id="txt">내용</p>
</body>		 <head>
...
<script src="js.jquery.js"></script>
<script>
   $(function(){
      $("#txt).css("color","red");
   });
</script>
</head>
<body>
   <p id="txt">내용</p>
</body>

방법1과 같이 작성할 경우, <body>객체를 불러오기전에 제이쿼리가 먼저 실행이되게 되어 문서 객체를 선택할 수 없으므로,

문서 객체를 먼저 불러온 다음 선택자를 사용할 수 있도록 방법2,방법3과 같이 작성해줘야한다.

 

* 기본형

1. 선택한 요소에 지정한 스타일을 적용하는 방법
    $("CSS 선택자").css("스타일 속성명","값");

2. 선택한 요소에 지정한 속성을 적용하는 방법
    $("CSS 선택자").attr("속성명","값");

 

* 제이쿼리의 아이디 선택자를 적용하여 글자 색상을 바꾸는 예제를 해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#title").css("color","red");
});
</script>
</head>
<body>
<h1 id="title">제목</h1>
</body>
</html>

 

3. 기본 선택자

 

* 기본 선택자 종류

구분 종류 사용법 설명
직접 선택자 전체 선택자 $("*") 모든 요소를 선택
아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택
클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요소를 선택
요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택
그룹 선택자 $("선택1, 선택2, ..., 선택n") 선택1, 선택2, ... 선택n에 지정된 요소들을 한번에 선택
종속 선택자 $("p.txt_1")
$("p#txt_1")		 <p>요소 중 class값이 txt_1인 요소 또는 id값이 txt_1인 요소를 선택
인접 관계 선택자 부모 요소 선택자 $("요소 선택").parent() 선택한 요소의 부모 요소를 선택
상위 요소 선택자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택
가장 가까운 상위 요소 선택자 $("요소 선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택
하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택
자식 요소 선택자 $("요소 선택 > 자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택
자식 요소들 선택자 $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택
형(이전) 요소 선택자 $("요소 선택").prev() 선택한 요소의 바로 이전 요소를 선택
형(이전) 요소들 선택자 $("요소 선택").prevAll() 선택한 요소의 이전 요소 모두를 선택
지정 형(이전) 요소들 선택자 $("요소 선택").prevUntill("요소명") 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택
동생(다음) 요소 선택자 $("요소 선택").next()
$("요소 선택 + 다음요소")
 선택한 요소의 다음 요소를 선택
동생(다음) 요소들 선택자 $("요소 선택").nextAll() 선택한 요소의 다음 요소 모두를 선택
지정 동생(다음) 요소들 선택자 $("요소 선택").nextUntill("h2") 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택
전체 형제 요소 선택자 $(".box_1").siblings() class값이 box_1인 요소의 형제 요소 전체를 선택

위에 간략하게 정리한 사용법과 설명등은 참고하며, 자세하게 다시 공부해보자.

 

4. 직접 선택자

주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다.

 

- 전체 선택자

  전체 요소를 선택할 때 사용한다. 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
$("*").css("border","1px solid blue");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>

 

- 아이디 선택자

   아이디 속선에 지정한 값을 포함하는 요소를 선택한다. 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title> 선택자 </title>
    <script src="js/jquery.js"></script>
    <script>
        $(function() {
            $("#tit").css("background-color", "#ff0")
                .css("border", "2px solid #f00");
        });

    </script>
</head>

<body>
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접 선택자</h3>
</body>

</html>

※ 체이닝기법이란?

   메서드를 연속해서 사용할 수 있으며, 마치 체인이 엮인 모양과 같다고하여 체이닝 기법이라고 한다. 

   제이쿼리에서는 한 객체에 다양한 메서드를 줄줄이 이어서 사용할 수있다. 완료되면 마지막에는 세미콜론(;)을 붙여준다.

 

- 클래스 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".tit").css("background-color","#ff0")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 class="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>

 

- 요소명 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("h2").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>

- 그룹선택자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("h1, #tit3").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접 선택자</h3>
<h3>인접 선택자</h3>
</body>
</html>

- 종속 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("h1.tit").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1 class="tit">제이쿼리</h1>
<h2>선택자</h2>
<h3 class="tit">직접 선택자</h3>
</body>
</html>

5. 인접 관계 선택자

직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음) 요소를 선택할 때 사용한다. 

 

※ 문서 객체 구조와 관계 

<body>
    <div id="wrap">                     (a)
         <div id="inner_wrap">     (b)
               <h1>제목1</h1>           (d)      (c) 는 <h1> , <h2> , <p> 전체를 일컫는다. 
               <h2>제목2</h2>         (e)
               <p>내용1</p>              (f)
              <p>내용2</p>
         </div>
   </div>
</body>


a는 c의 상위 요소(closest)
c는 a의 하위 요소

b는 c의 부모 요소(parent)
c는 b의 자식 요소(children)

d는 e의 형 요소(prev)
f는 e의 동생 요소(next)

예를들어, 

1) 동생 요소 선택자인 next()함수를 사용하여 <h2>의 동생요소인 <p>를 선택한 다음 글자색을 초록색으로 바꿔준다.

    $("h2").next().css("color","green");

 

2) 부모 요소 선택자인 parent()함수를 사용하여 <h2>의 부모요소인 b를 선택한 다음 두께를 조절해준다.

    $("h2").parnet().css("border","1px solid #f00");

 

 

자주쓰이지는 않기때문에 필요할때마다 교재 178page 참고하면 좋을것 같다.

저작자표시

'내마음대로만들어보자 > JS' 카테고리의 다른 글

even/odd 선택자  (0) 2021.08.18
first/last 선택자  (0) 2021.08.18
객체 생성자 함수  (0) 2021.08.15
함수 스코프(Scope)  (0) 2021.08.15
함수에서 return문의 역할  (0) 2021.08.14

관련글

티스토리툴바