jQuery - 셀렉터(selector) 선택자 (속성을 이용하여 요소선택)

2022. 3. 12. 15:32

이번 정리할 내용은 속성을 사용하여 요소 선택을 하는 총 다섯 가지 선택하는 방법에 대해 정리해 본다.

이 다섯 가지 선택자에 대한 예제 샘플을 보면서 확인해 보자.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
    $(document).ready(function(){
        $('a[href^="http://"]').css({'color':'green'}); // ----1
        $('div[title^="Tag"]').css({'border':'2px solid red'}); // ----2
        $('a[href$=".pdf"').css({'background':'yellow'}); // ----3
        $('p[class|="main"]').css({'color':'red'}); // ----4
        $('article[data-index-number~="12314"]').css({'background':'blue', 'color':'white'}); // ----5
    });
  </script>
</head>
<body>
    <div title="aTagHttp">
        <h2>첫 번째 테스트</h2>
        <a href="http://naver.com">네이버</a>
        <a href="http://daum.net">다음</a>
        <a href="https://google.com">구글</a>
    </div>
    <hr>
    <div title="TagSelect">
        <h2>두번 째 테스트</h2>
    </div>
    <hr>
    <div title="pdfLink">
        <h2>세번 째 테스트</h2>
        <a href="pathUrl/fileName.pdf">pdf 링크</a>
    </div>
    <hr>
    <div title="className">
        <h2>네번 째 테스트</h2>
        <p class="main-first"> 내용 콘텐츠 -1</p>
        <p class="main-two"> 내용 콘텐츠 -2</p>
        <p class="thr-main"> 내용 콘텐츠 -3</p>
        <p class="main"> 내용 콘텐츠 - 4</p>
    </div>
    <hr>
    <div title="dataSelect">
        <article data-columns="3" data-index-number="12314" data-parent="cars">
          <h2>다섯 번째 테스트</h2>
        </article>
    </div>  
</body>
</html>

위 코드를 복사해서 직접 테스트를 하면 바로 감이 올 것이다.

자 하나씩 설명해보자.

▶ 속성을 사용하여 요소 선택 방법 1번

$('a [href^="http://"]'). css({'color':'green'}); // ----1
→ http:// 로 시작하는 href 값이 있는 링크를 선택할 수 있다.

$('a[href^="http://"]')

이렇게 a 태그의 링크 중 http:// 로 시작되는 모든 태그를 선택할 수 있다. 위 선택자를 보면

a [href^="http://"] 이렇게 있는데 이 중 캐럿 문자^ 이 부분을 의미하는 바는 http:// 이 값을 찾기 위해

일치가 값의 시작 부분에서 발생해야 함을 지정하는 데 사용된다.

결론은 저렇게 선택자를 사용하면 a 태그 중 href의 링크 값 중 http:// 이렇게 시작하는 태그를 전부

선택할 수 있다. 위 HTML 코드를 실행해보면, 구글 a 태그 부분에 https:// 이렇게 해놨는데 이 부분이

제외되는 현상을 볼 수 있다.

▶ 속성을 사용하여 요소 선택 방법 2번

$('div [title^="Tag"]'). css({'border':'2px solid red'}); // ----2
→ div 태그 중 Tag로 시작하는 title 속성이 있는 모든 div 요소가 선택된다.

$('div[title^="Tag"]')

이 선택 방법도 보면 div [title^="Tag"] 이 부분에 캐럿 문자 ^ 있는데 1번 설명과 내용은 같다.

Tag글자를 검색해 같으면 전부 찾는다.

▶ 속성을 사용하여 요소 선택 방법 3번

$('a [href$=". pdf"'). css({'background':'yellow'}); // ----3
→ a 태그의 href 링크 중 pdf를 참조하는 모든 a 태그를 요소를 선택한다.

$('a[href$=".pdf"')

선택자 a [href$=". pdf"] 중에 이번엔 ^ 캐럿 문자가 아닌 $ 달러 기호가 쓰였다. 이 의미도 크게 다를 바가

없다. 해석은 a 태그의 href 링크 중에 pdf 파일을 참조하는 모든 링크를 찾아 선택한다.

▶ 속성을 사용하여 요소 선택 방법 4번

$('p [class|="main"]'). css({'color':'red'}); // ----4
→ p 태그의 클래스 명 중 main 글자가 있거나 main으로 시작하는 클래스 이름이 있다면 전부 선택된다.

$('p[class|="main"]')

이 선택자를 보면 p [class|="main"] 중 | 기호는 지금까지 알아본 의미와 비슷하다.

단지 이 선택자는 p 태그의 class 명중 main 이거나 main으로 시작하는 모든 요소들을 선택한다.

당연 p 태그 말고도 div, span 등등 많은 태그 요소들이 들어갈 수 있다.

결론은 클래스명 중 같거나 아니면 시작하는 단어가 같으면 해당되는 요소들을 전부 선택한다

라고 생각하면 된다.

▶ 속성을 사용하여 요소 선택 방법 5번

$('article [data-index-number~="12314"]'). css({'background':'blue', 'color':'white'}); // ----5
→ 데이터 속성을 사용하는 요소만 선택하는 선택 자이다.

$('article[data-index-number~="12314"]')

위 HTML 코드를 보면 article 태그에 data- 속성을 사용하여 태그를 작성하였다.

선택자를 보면 article [data-index-number~="12314"] ~ 기호도 다른 것과 사용하는

의미는 비슷하다. 이렇게 data- 속성으로 작성된 태그 요소에도 위 방법으로 요소를

선택할 수 있다.

이렇게 다섯 가지 방법으로 요소를 선택하는 방법을 알아봤는데 각각 선택하는 요소마다 들어가는

기호 문자들은 달랐지만 의미는 같았다.

이렇게 여러 가지 방법으로 요소를 선택하는 방법에 있어서 링크, 파일명, 클래스 명 등등 각각 선택하고자

하는 방법에 맞게 기호를 적용해서 요소를 선택하면 될 것 같다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 셀렉터(selector) 선택자 (자식필터를 사용하여 요소선택 - nth-child()) (0)	2022.03.14
jQuery - 셀렉터(selector) 선택자 (위치필터를 이용하여 요소 선택- first, last, even, odd, eq(), gt(), lt()) (0)	2022.03.12
jQuery - 셀렉터(selector) 선택자 (기본, 계층별 요소선택) (0)	2022.03.11
jQuery - 태그 삽입, 태그 넣기 tag insert (0)	2022.03.10
jQuery - 선택자 :eq() 인덱스 사용자 지정 선택기 (0)	2022.03.07

열공의 기록