메뉴 건너뛰기

2018.10.27 03:38

jQuery 엘리먼트 선택

조회 수 1732 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

조작하려는 엘리먼트 선택하기

전 장에서도 간단히 살펴보았지만 우선 jQuery매소드를 사용하기 위해선 페이지에서 조작할 엘리먼트를 선택해야 한다. 여기선 이런 엘리먼트를 선택하는 방법에 대해 알아보자.
  • 기본 CSS 선택자를 이용해 선택하기
  • 위치로 선택하기
  • jQuery 정의 선택자로 선택하기
위의 세가지 방법을 이용해 엘리먼트를 선택하는 것에 대해 알아보자.

기본 CSS 선택자 사용하기

CSS를 사용해 본 유저라면 이 선택 기법은 익숙할 것이다.엘리먼트의 ID, CSS 클래스명, 태그명, 페이지 엘리먼트의 DOM 계층 구조를 이용해 엘리먼트를 선택하는 기법이 그것들이며 아래의 예를 보자.
  • a - 모든 링크 엘리먼트와 일치하는 선택자
  • #specialID - specialID를 아이디로 가지는 엘리먼트와 일치하는 선택자
  • .specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 선택자
  • a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 링크와 일치하는 선택자
  • p a.specialClass - 단락 엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든 링크와 일치하는 선택자
이러한 기존의 CSS 선택자를 이용하여 엘리먼트를 선택할 수 있게 되는데, jQuery가 지원하는 선택자들은 아래와 같다.
선택자내 용
*모든 엘리먼트
E태그명이 E인 모든 엘리먼트
E FE의 자손이면서 태그명이 F인 모든 엘리먼트
E>FE의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트
E+FE의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F
E~FE의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F
E:has(F)태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트
E.C클래스명 C를 가지는 모든 엘리먼트 E
E#I아이디가 I인 엘리먼트 E
E[A]속성 A를 가지는 모든 엘리먼트 E
E[A=V]값이 V인 속성 A를 가지는 모든 엘리먼트 E
E[A^=V]값이 V로 시작하는 속성 A를 가지는 모든 엘리먼트 E
E[A$=V]값이 V로 끝나는 속성 A를 가지는 모든 엘리먼트 E
E[A*=V]값이 V를 포함하는 속성 A를 가지는 모든 엘리먼트 E
위의 선택자를 활용하는 방법에 대해 예제를 통해 알아보자.(예제보기)

위치로 선택하기

때로는 페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택해야 한다. 예를 들어 페이지에서 첫 번째 링크나 홀수 및 짝수 번째 문단 등을 선택하는 기법이 필요할 때가 있다. 이에 대해 정리한 것이 아래의 표이다.
선택자설 명
:first페이지에서 처음으로 일치하는 엘리먼트
:last페이제에서 마지막으로 일치하는 엘리먼트
:first-child첫 번째 자식 엘리먼트
:last-child마지막 자식 엘리먼트
:only-child형제가 없는 모든 엘리먼트를 반환
:nth-child(n)n번째 자식 엘리먼트
:nth-child(even|odd)짝수 혹은 홀수 자식 엘리먼트
:nth-child(Xn+Y)전달된 공식에 따른 n번째 자식 엘리먼트
:even / :odd페이지 전체의 짝수/홀수 엘리먼트
:eq(n)n번째로 일치하는 엘리먼트
:gt(n)n번째 엘리먼트 이후의 엘리먼트와 일치
:lt(n)n번째 엘리먼트 이전의 엘리먼트와 일치

jQuery 정의 선택자 사용하기

CSS 선택자를 이용해 우리는 원하는 DOM 엘리먼트를 선택할 수 있었지만 때로는 이것만으로 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 한다. 예를 들어 라디어 버튼 중 check가 된 엘리먼트만을 선택하기에는 CSS선택자만으로는 부족하다. 이렇듯 부족한 부분을 jQuery 정의 선택자를 이용하여 채울 수 있다.
선택자설 명
:animated현재 애니메이션이 적용되고 있는 엘리먼트
:button모든 버튼을 선택
:checkbox체크박스 엘리먼트 선택
:checked선택된 체크박스나 라디오 버튼을 선택
:contains(foo)텍스트 foo를 포함하는 엘리먼트 선택
:disabled인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택
:enabled인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택
:file모든 파일 엘리먼트를 선택
:header헤더 엘리먼트 선택
:hidden감춰진 엘리먼트 선택
:image폼 이미지를 선택
:input폼 엘리먼트만 선택
:not(filter)필터의 값을 반대로 변경
:parent빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트
:password패스워드 엘리먼트 선택
:radio라디오 버튼 엘리먼트 선택
:reset리셋 버튼을 선택
:selected선택된 엘리먼트 선택
:submit전송 버튼을 선택
:text텍스트 엘리먼트 선택
:visible보이는 엘리먼트 선택
여러 jQuery 정의 선택자가 폼과 관련되며 덕분에 특정 엘리먼트의 타입이나 상태를 세련되게 표현할 수 있다. 선택자 필터도 조합할 수 있다. 예를 들어 활성화 되고 선택된 체크박스만 일치시키려 한다면 다음과 같다.
 
 
:checkbox:checked:enabled

새로운 HTML 생성하기

jQuery() 함수는 페이지의 엘리먼트를 선택할 뿐 아니라 새로운 HTML을 생성할 수도 있다.
 
$("<div>안녕</div>")
이 표현식은 페이지에 추가할 새로운 <div> 엘리먼트를 생성한다. 다음의 코드를 이용하여 <div> 엘리먼트를 두 개 생성해보자.
 

$("<div class='foo'>내가 foo를 가졌다.</div><div>나는 foo를 가지지 않았다.")

.filter(".foo").click(function(){ alert("내가 foo이다."); })

.end().appendTo("#someParentDiv");

위의 코드는 <div> 엘리먼트를 생성하는데 첫번째 <div> 엘리먼트는 foo 클래스가 있고, 다른 하나에는 없다. 생성한 첫번째 <div> 엘리먼트를 클릭하면 alert()가 실행된다. 마지막으로 end()메서드를 이용해 필터링 이전의 두 <div>엘리먼트를 지닌 집합으로 돌아간 뒤, 이 집합을 id가 someParentDiv인 엘리먼트에 덧붙인다.



  1. HTML 화면을 PDF로 출력

    Date2019.01.08 Views5200
    Read More
  2. == / === / != / !== 차이

    Date2018.11.07 Views1443
    Read More
  3. 오늘 날짜 구하기

    Date2018.11.07 Views1411
    Read More
  4. jQuery 엘리먼트 선택

    Date2018.10.27 Views1732
    Read More
  5. 자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode()

    Date2018.10.27 Views1911
    Read More
  6. 자바스크립트 배열 중복값 다루기

    Date2018.10.27 Views3898
    Read More
  7. JavaScript 출생년도에 따른 나이 계산 자바스크립트

    Date2018.09.28 Views3252
    Read More
  8. 엔터키 / enter key submit form

    Date2018.09.28 Views1528
    Read More
  9. 팝업창 차단 "허용 메시지"

    Date2018.09.28 Views1738
    Read More
  10. 테이블에서 해당 열의 인덱스 값 얻는 방법

    Date2018.08.29 Views2785
    Read More
  11. key pressing 누르거나 클릭중인 이벤트 예제

    Date2018.08.29 Views1616
    Read More
  12. 유용한 스크립트 모음

    Date2018.07.24 Views2291
    Read More
  13. cross site scripting을 막기위한...javascript

    Date2018.07.24 Views1596
    Read More
  14. 다음 우편번호(주소) api 예시

    Date2018.07.04 Views4897
    Read More
  15. 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기

    Date2018.07.04 Views3956
    Read More
  16. 반복문 사용할때 태그 식별하기 data-item

    Date2018.07.04 Views1849
    Read More
  17. SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기.

    Date2018.07.04 Views4010
    Read More
  18. 체크박스(CheckBox) 전체 선택, 전체 해제 checked

    Date2018.07.04 Views2904
    Read More
  19. 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징)

    Date2018.07.04 Views2711
    Read More
  20. Javascript selectbox selected 컨트롤

    Date2018.06.21 Views10046
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved