[jQuery] jQuery의 기본, 선택자

티스토리 뷰

WEB/jQuery

[jQuery] jQuery의 기본, 선택자

춘햄 2021. 6. 2. 14:33

jQuery는 javaScript로 만들어진 라이브러리 중 하나로, 동적인 웹 프로젝트를 만들 때 아주 유용하게 쓰인다. jQuery에 대하여 알아보는 첫번째 포스팅이니, css와 같이 선택자부터 차근차근 나가보자.

원래는 수업 중 사용한 예제 코드와 개념을 재정리하여 포스팅하려고 했으나, 구글링 중 선택자를 정말 깔끔하게 정리해놓으신 블로그가 있어서 그대로 가져왔다.

출처: https://gangzzang.tistory.com/entry/제이쿼리jQuery-선택자

1. 기본 선택자

- $('h1').css('color', 'red'); - ('h1') 선택자와, css('color', 'red') 메서드

- 문서 객체를 다룰 때 사용하는 형태

- CSS 선택자와 유사

1.1. 전체 선택자 (Wildcard Selector) - *

- HTML 페이지에 있는 모든 문서 객체를 선택

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
    	$('*').css('color', 'red'); 
    });
</script>

1.2. 태그 선택자 - 태그명

- 특정한 태그를 선택

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$('h1').css('color', 'blue'); 
	$('h2, p').css('color', 'orange');
    });
</script>

1.3. 아이디 선택자 - #아이디명

- 특정한 id 속성이 있는 문서 객체를 선택

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$('h1#target').css('color', 'red'); 
    }); 
</script> 
<body> 
	<h1 id="header1">Header</h1> 
</body>

1.4. 클래스 선택자 - .클래스명

- 특정한 class 속성이 있는 문서 객체를 선택

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript"> 
	$(document).ready(function() { 
      $('h1.item').css('color', 'red'); 
      $('.item1, .item2').css('color', 'blue'); 
      $('.item.select').css('color', 'orange'); 
      $('.item.cc').css('color', 'gray'); 
    }); 
</script> 
<body> 
  <h1 class="item1">Header1</h1> 
  <h1 class="item2">Header2</h1> 
  <h1 class="item">Header</h1> 
  <h1 class="item">Header</h1> 
  <h1 class="item cc">Header</h1> 
  <h1 class="item select">Header</h1> 
</body>

2. 자손 선택자와 후손 선택자

- 기본 선택자의 앞에 붙여 사용

- 기본 선택자의 범위를 제한

2.1. 자손 선택자

- 자손을 선택하는 선택자

- '요소A' > '요소B' 형태로 사용

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript"> 
	$(document).ready(function() {
    	$('body > *').css('color', 'red'); 
    });
</script>
<body> 
    <div> 
    	<ul> 
          <li>Dog</li> 
          <li>Cat</li> 
          <li>Pig</li> 
        </ul> 
    </div> 
</body>

2.2. 후손 선택자

- 후손을 선택하는 선택자

- '요소A 요소B' 형태로 사용

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript"> 
	$(document).ready(function() {
    	$('body *').css('color', 'red'); 
    });
</script>
<body> 
      <div> 
     	 <ul> 
          <li>Dog</li> 
          <li>Cat</li> 
          <li>Pig</li> 
        </ul> 
    </div> 
</body>

3. 속성 선택자

- 기본 선택자 뒤에 붙여 사용

- 입력 양식과 관련된 태그를 선택할 때 많이 사용

선택자 형태	설명
요소[속성 = 값]	속성과 값이 같은 문서 객체를 선택
요소[속성 \|= 값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택
요소[속성 ~= 값]	속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택
요소[속성 ^= 값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택
요소[속성 $= 값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택
요소[속성 *= 값]	속성 안의 값이 특정 값을 포함하는 문서 객체를 선택

4. 필터 선택자

- 선택자 중에 : 기호를 포함하는 선택자

4.1. 입력 양식 필터 선택자

- 속성 선택자 보다 간단한 방법으로 사용할 때 필터 선택자를 사용

- 기본 선택자 뒤에 사용

선택자 형태	설명
요소:button	input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택
요소:checkbox	input 태그 중 type 속성이 checkbox인 문서 객체를 선택
요소:file	input 태그 중 type 속성이 file인 문서 객체를 선택
요소:image	input 태그 중 type 속성이 image인 문서 객체를 선택
요소:password	input 태그 중 type 속성이 password인 문서 객체를 선택
요소:radio	input 태그 중 type 속성이 radio인 문서 객체를 선택
요소:reset	input 태그 중 type 속성이 reset인 문서 객체를 선택
요소:submit	input 태그 중 type 속성이 submit인 문서 객체를 선택
요소:text	input 태그 중 type 속성이 text인 문서 객체를 선택

선택자 형태	설명
요소:checked	체크되어 있는 입력 양식을 선택
요소:disabled	비활성화된 입력 양식을 선택
요소:enabled	활성화된 입력 양식을 선택
요소:focus	초점이 맞추어져 있는 입력 양식을 선택
요소:input	모든 입력 양식을 선택
요소:selected	option 객체 중 선택된 태그를 선택

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>hello_jQuery</title> 
    <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript"> 
    	$(document).ready(function() {
        	setTimeout(function() { // setTimeout 일정 시간 후에 코드 실행 
            var value = $('select > option:selected').val(); alert(value); 
            }, 5000); 
        }); 
    </script> 
</head> 
<body> 
    <select> 
      <option>Dog</option> 
      <option>Cat</option> 
      <option>Pig</option> 
    </select> 
</body> 
</html>

4.2. 위치 필터 선택자

- 위치와 관련된 필터 선택자

선택자 형태	설명
요소:odd	홀수 번째에 위치한 문서 객체를 선택
요소:even	짝수 번째에 위치한 문서 객체를 선택
요소:first	첫 번째에 위치한 문서 객체를 선택
요소:last	마지막에 위치한 문서 객체를 선택

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript"> 
	$(document).ready(function() {
    	$('tr:odd').css('background', '#F9F9F9'); 
        $('tr:even').css('background', '#9F9F9F'); 
        $('tr:first').css('background', '#000000').css('color', '#FFFFFF'); 
    }); </script> 
<body> 
	<table> 
    	<tr> 
          <td>이름</td> 
          <td>제조사</td> 
        </tr> 
        <tr> 
          <td>갤럭시S4</td>
          <td>삼성</td> 
        </tr> 
        <tr> 
          <td>갤럭시노트3</td> 
          <td>삼성</td> 
        </tr> 
        <tr> 
          <td>G2</td> 
          <td>엘지</td> 
        </tr> 
        <tr> 
          <td>Vu3</td> 
          <td>엘지</td> 
        </tr> 
        <tr> 
          <td>아이폰5S</td> 
          <td>애플</td>
        </tr> 
        <tr> 
          <td>아이폰5C</td> 
          <td>애플</td> 
        </tr>
    </table> 
</body>

4.3. 함수 필터 선택자

- 함수 형태의 필터 선택자

선택자 형태	설명
요소:contains(문자열)	특정 문자열을 포함하는 문서 객체를 선택
요소:eq(n)	n번째에 위치하는 문서 객체를 선택
요소:gt(n)	n번째 초과에 위치하는 문서 객체를 선택
요소:has(h1)	h1 태그가 있는 문서 객체를 선택
요소:lt(n)	n번째 미만에 위치하는 문서 객체를 선택
요소:not(선택자)	선택자와 일치하지 않는 문서 객체를 선택
요소:nth-child(3n+1)	3n+1번째에 위치하는 문서 객체를 선택

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
    	$('tr:eq(0)').css('background', '#000000').css('color', '#FFFFFF');
        $('td:nth-child(2n+1)').css('background', '#565656');
        $('td:nth-child(2n)').css('background', '#F9F9F9'); 
    });
</script>
<body> 
	<table> 
    	<tr> 
          <td>이름</td> 
          <td>제조사</td> 
        </tr> 
        <tr> 
          <td>갤럭시S4</td>
          <td>삼성</td> 
        </tr> 
        <tr> 
          <td>갤럭시노트3</td> 
          <td>삼성</td> 
        </tr> 
        <tr> 
          <td>G2</td> 
          <td>엘지</td> 
        </tr> 
        <tr> 
          <td>Vu3</td> 
          <td>엘지</td> 
        </tr> 
        <tr> 
          <td>아이폰5S</td> 
          <td>애플</td>
        </tr> 
        <tr> 
          <td>아이폰5C</td> 
          <td>애플</td> 
        </tr>
    </table> 
</body>

5. 배열 관리

- jQuery로 배열을 관리할 때는 each() 메서드를 사용

- $.each(object, function(index, item) {})

- $(selector.each(function(index, item) {})

5.1. 자바스크립트 배열 관리

- $.each() 메서드의 첫 번째 매개변수 배열, 두 번째 매개변수 index, item을 갖는 함수

- index는 배열의 인덱스 또는 객체의 키, item은 해당 인덱스나 키가 가진 값

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript"> 
  $(document).ready(function() {
    var array = [ 
      { name: 'Google', link: 'http://www.google.co.kr' }, 
      { name: 'Naver', link: 'http://www.naver.com' }, 
      { name: 'Daum', link: 'http://www.daum.net' }, 
    ]; 
  	$.each(array, function (index, item) {
      var output = ''; 
      output += '<a href="' + item.link + '">'; 
      output += '<h1>' + item.name + '</h1>';
      output += '</a>'; 
      document.body.innerHTML += output; 
  	}); 
  }); 
</script>

5.2. jQuery 배열 관리

- 선택자로 여러 개의 문서 객체를 선택할 때 생성

<style type="text/css"> 
  .high-light-0 { background: yellow; } 
  .high-light-1 { background: orange; } 
  .high-light-2 { background: blue; } 
  .high-light-3 { background: red; } 
  .high-light-4 { background: green; } 
  .high-light-5 { background: gray; } 
</style> 
<script type="text/javascript"> 
  $(document).ready(function() {
      $('h1').each(function(index, item) {
        // high-light 클래스 속성 추가 
        // $(item).addClass('high-light-' + index); 
        // this 키워드와 item은 의미가 같다 
        $(this).addClass('high-light-' + index); 
      }); 
	}); 
</script>
<body> 
  <h1>item0</h1> 
  <h1>item1</h1> 
  <h1>item2</h1> 
  <h1>item3</h1> 
  <h1>item4</h1> 
  <h1>item5</h1> 
</body>

'WEB > jQuery' 카테고리의 다른 글

[jQuery] hover() (0)	2021.06.02
[jQuery] toggle() (0)	2021.06.02
[jQuery] slice() (0)	2021.06.02
[jQuery] filter() (0)	2021.06.02
[jQuery] addClass() & removeClass() (0)	2021.06.02

공유하기 링크

Comments

Related Articles more

최근에 올라온 글

최근에 달린 댓글

TAG more

Total

Today

Yesterday

Jun's TID

티스토리 뷰