wrkbrs

[jQuery] 셀렉터(Selector) 사용하기 / 특정 단어 셀렉터 본문

jQuery

[jQuery] 셀렉터(Selector) 사용하기 / 특정 단어 셀렉터

zcarc 2019. 1. 11. 01:54

Jquery 셀렉터로 특정 단어로 시작해서 특정 단어로 끝나는

(ex: a-xxxx-b)

값을 지정할수있다


예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
 
<html>
 
<head>
 
<style>
 
.siblings * { 
 
    display: block;
 
    border: 2px solid lightgrey;
 
    color: lightgrey;
 
    padding: 5px;
 
    margin: 15px;
 
}
 
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<script>
 
$(document).ready(function(){
 
   
 
    $( "li[id^='start-'][id$='-end']" ).css({"color": "red", "border": "2px solid red"});
 
});
 
</script>
 
</head>
 
<body>
 
 
 
<div style="width:500px;" class="siblings">
 
  <ul>ul (parent)  
 
    <li>li (sibling)</li>
 
    <li>li (sibling)</li>
 
    <li id="start-test-end">li (sibling with class name "start")</li>
 
    <li>li (the next sibling of li with class name "start")</li>
 
    <li>li (the next sibling of li with class name "start")</li>
 
    <li id="start-test2-end">li (the next sibling of li with class name "start")</li>
 
    <li id="start-test2-endd">li (sibling with class name "stop")</li>
 
  </ul>   
 
</div>
 
 
 
<p>In this example, we return all next sibling elements between the 
li element with class name "start" and the li element with class name "stop".</p>
 
 
 
</body>
 
</html>
cs



추가로 자주 사용하는 셀렉터를 정리해 보았다


1
2
3
4
5
6
$("div[id!='a']")// div 에 id가 a가 아닌 태그들 선택
$("div[id^='a']")// div 에 id가 a로 시작하는 태그들 선택
$("div[id$='a']")// div 에 id가 a로 끝나는 태그들 선택
$("div[id*='a']")// div 에 id가 a가 포함된 태그들 선택
 
 
cs


1
2
3
4
 $( "li[id^='start-'][id$='-end']" ) //and 개념
 $( "li[id^='start-'],li[id$='-end']" ) //or 개념
 
 
cs


===============================================================================================================

안녕하세요. 문학청년입니다. 정말 오랜만에 이렇게 글을 쓰는 것 같네요. 스터디 준비하랴.. 대회 준비하랴.. 요세 조금 바빠서 글 쓰는 것에 너무 소홀해버렸네요. 그럼 앞으로 다시 분발하여 열심히 쓰도록 하겠습니다.

잡설이 너무 길었네요. 오늘은 다름이 아니라 제가 처음이 연재 기획했던 것과는 달리 오늘은 기본 내용을 간략하게 정리해볼까 합니다. 물론 정리된 내용만 보면 재미가 없겠지요. 그래서 여러분들을 위해서 간단하게 할 수 있는 셀렉터 예제를 만들어봤습니다. 이 예제는 jQuery 오프라인 스터디에서도 사용을 했었는데요. 반응이 좋아서 이렇게 연재 강좌에도 예제로 사용해봤습니다.

한가지 팁을 드리자면 아래 정리된 내용을 출력하여 필요할 때마다 보는 것도 좋을 것 같구요.
아래 정리된 내용들을 살펴 본 뒤에 예제 페이지로 가서 직접 실습해보시면 이해하시는데 도움이 될 것입니다.

예제 페이지 이동하기



(1) Javascript 문법 스타일

기존의 프로그래밍 언어의 엄격한 문법 스타일에 적용되어 있는 사용자라면 분명히 자바스크립트의 자유 분방한 문법 스타일을 보고 적지않게 당황한적이 있을 것이다. 이러한 스타일은 단점이 될 수도 있으나 매우 유연하기 때문에 때에 따라서 매우 강력한 기능을 발휘한다. 그렇다면 가장 많이 사용되는 자바스크립트의 함수와 관련된 문법 스타일에 대해서 알아보도록 하자.

1. 함수를 변수에 설정할 수 있다.
1
2
3
var func = function() {
     alert("안녕");
};


2. 변수에 설정한 함수를 매개 변수로 사용하여 호출 할 수 있다.
1
showAlert(func);


3. 위와 같이 변수에 담지 않고 바로 함수를 매개 변수로 바로 설정 할 수 있다.
1
2
3
4
5
6
showAlert(function() {
     alert("안녕");
});

// 아래와 같이 한 줄로 사용하는 경우도 있다.
showAlert(function() { alert("안녕"); });


3번의 경우 조금 어렵게 생각할 수도 있는데 자세히 보면 그냥 함수 파라메터 값에 변수가 아닌 함수 그 자체가 들어가 있다고 간단하게 생각하면 된다. 이러한 표현식은 jQuery에서 상당히 많이 쓰이기 때문에 이러한 문법 스타일에 최대한 빨리 익숙해져야 한다.


(2) 셀렉터 요약 정리

셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를 얻기 위해 많이 쓰이는 방법은document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다.

하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을 쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있다.

아래 표에 나와 있는 자식/에트리뷰트/컨테이너 셀렉터는 가장 많이 사용되는 셀렉터 문법이다.

셀렉터 문법
문법 설명
*
모든 엘리먼트
E
태그 명이 E인 모든 엘리먼트
E F
E의 자손이면서 태그명이 F인 모든 엘리먼트
E>F
E의 바로 아래 자식이면서 태그 명이 F인 모든 엘리먼트
E+F
E의 형제 엘리먼트로 바로 다음에 오는 엘리먼트 F
E~F
E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F
E:has(F)
태그 명이 F인 자손을 하나 이상 가지는 태그 명이 E인 모든 엘리먼트
E.C
클래스 명 C를 가지는 태그 명이 E인 모든 엘리먼트. E의 생략은 *.C와 동일함
E#I
아이디가 I인 태그 명이 E인 엘리먼트. E의 생략은 *#I와 동일
E[A=V]
값이 V인 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A=V]
값이 V로 시작하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A$=V]
값이 V로 끝나는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A*=V]
값이 V를 포함하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A]
에트리뷰트 A를 가지는 태그 명이 E인 모든 엘리먼트
[자식/에트리뷰트/컨테이너 셀렉터]

아래 표는 jQuery가 지원하는 고급 위치 기반 셀렉터이며, DOM에서 위치를 기반으로 엘리먼트를 선택하며 첫 번째 링크나 홀수 번째, 짝수 번째와 같이 엘리먼트의 위치나 다른 엘리먼트와 관계를 기반으로 엘리먼트를 선택해야 하는 경우에 사용하면 된다.

셀렉터 문법
문법 설명
E:first
모든 엘리먼트 E 중에서 첫 번째인 엘리먼트
E:last
모든 엘리먼트 E 중에서 마지막인 엘리먼트
E:first-child
엘리먼트 E의 자식 엘리먼트 중에서 첫 번째인 엘리먼트
E:last-child
엘리먼트 E의 자식 엘리먼트 중에서 마지막인 엘리먼트
E:only-child
엘리먼트 E의 자식 엘리먼트 중에서 형제가 없는 엘리먼트
E:nth-child(n)
엘리먼트 E의 n번째 자식 엘리먼트
E:nth-child(even or odd)
엘리먼트 E의 홀수 or 짝수 자식 엘리먼트
E:even or E:odd
페이지 전체의 짝수 or 홀수 엘리먼트
E:eq(n)
태그 값이 E인 모든 엘리먼트 중에서 n번째로 일치하는 엘리먼트
E:gt(n)
태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트(포함 X) 이후의 엘리먼트
E:lt(n)
태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트 이전의 엘리먼트
[위치 셀렉터]

CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 하는 경우 아래 표에 나와 있는 셀렉터를 사용하면 된다.

셀렉터 문법
문법 설명
:animated
현재 애니매이션이 적용되고 있는 엘리먼트 선택
:button
모든 버튼 선택
:checkbox
체크 박스 엘리먼트만 선택 (input[type=checkbox])
:checked
선택된 체크 박스나 라디오 버튼만을 선택
:contains(foo)
텍스트 foo를 포함하는 엘리먼트만 선택
:disabled
인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택
:enabled
인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택
:file
모든 파일 엘리먼트를 선택 (input[type=file])
:header
헤더 엘리먼트 선택 (<h1>~<h6>)
:hidden
감춰진 엘리먼트만 선택
:image
폼 이미지만 선택 (input[type=image])
:input
폼 엘리먼트만 선택 (input, select, textarea, button)
:not(filter)
필터의 값을 반대로 변경함.
:parent
빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트
:password
패스워드 엘리먼트 선택 (input[type=password])
:radio
라디오 엘리먼트 선택 (input[type=radio])
:reset
리셋 버튼을 선택 (input[type=reset] or button[type=reset])
:selected
선택된 엘리먼트만 선택
:submit
전송 버튼을 선택 (input[type=submit] or button[type=submit])
:text
텍스트 엘리먼트만 선택 (input[type=text])
:visible
보이는 엘리먼트만 선택 
[jquery 정의 셀렉터]



(3) 자주 사용되는 함수 정리

$.유틸리티 함수, Event 관련 함수, Ajax 관련 함수는 이번 장에서 다루지 않을 것이다.


 
함수 명
함수 설명
엘리먼트 조작
each(Function)
선택된 엘리먼트가 다수일 경우에 each 함수를 사용하여 차례대로 엘리먼트를 선택한다.
에트리뷰트 조작
attr(name, value)
선택된 엘리먼트의 name 에트리뷰트의 값을 value로 설정
 
attr(name)
선택된 엘리먼트의 name 에트리뷰트의 값을 얻어옴.
 
attr(Attributes)
선택된 엘리먼트를 프로퍼티(json)형태로 설정할 수 있음
 
val()
엘리먼트의 value 에트리뷰트 값을 얻어옴. attr("value")와 동일함.
 
val(content)
엘리먼트의 value 에트리뷰트 값을 content로 설정함.
에트리뷰트 제거
removeAttr(name)
해당 어트리뷰트의 값이 초기화 된다.
스타일 변경
addClass(names)
선택된 엘리먼트에 CSS Class를 적용함. 만약에 다수의 Class를 적용하려면 공백으로 구분하여 할당하면 됨.
 
removeClass(names)
선택된 엘리먼트들을 제거함.
 
toggleClass(names)
특정 Class를 적용하지 않은 상태면 적용하고, 적용한 상태면 제거함.
스타일 얻고 설정
css(name, value)
선택된 엘리먼트의 name 에트리뷰트 값을 value로 설정함.
 
css(properties)
{"name1:" value1", "name2": "value2", } 와 같은 형태로 설정함.
 
css(name)
특정 name의 프로퍼티의 스타일 값을 얻을 수 있음.
 
width(value)
선택된 엘리먼트의 width 값을 설정함.
 
height(value)
선택된 엘리먼트의 height 값을 설정함.
 
width()
선택된 엘리먼트의 width 값을 얻어옴.
 
height()
선택된 엘리먼트의 height 값을 얻어옴.
 
offset()
선택된 엘리먼트의 left 값과 top 값을 E.offset().left, E.offset().top과 같은 방법으로 얻을 수 있음.
엘리먼트 내용 설정
html()
선택된 엘리먼트 태그 내용을 얻을 수 있음.
 
html(content)
선택된 엘리먼트의 태그 내용을 content로 설정함.
 
text()
선택된 엘리먼트의 태그 내용 중 텍스트 값만 얻을 수 있음.
 
text(content)
선택된 엘리먼트의 태그 내용을 content로 설정함.
엘리먼트 복사&이동
append(content)
선택된 엘리먼트의 내용 마지막에 새로운 content를 추가함.
 
appendTo(target)
선택된 엘리먼트가 단일이면 target으로 이동시키고 다수라면 복사됨.
 
prepend(content)
append와 달리 앞으로 추가함
 
prependTo(target)
appendTo와 달리 앞으로 복사 또는 이동함
 
before(),
insertBefore()
엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 추가함.
 
after(),
insertAfter()
엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 추가함
엘리먼트 감싸기
wrap(wrapper)
매개 변수로는 String과 엘리먼트 타입이 올 수 있으며, "<div class='hello'></div>" 형태로 매개 변수 값을 넘기면 됨.
 
wrapAll(wrapper)
선택된 모든 엘리먼트를 wrapper로 감쌈
엘리먼트 제거
remove()
페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제함.
 
empty()
일치하는 집합의 모든 엘리먼트의 Content를 제거함.
엘리먼트 복사
clone(copyHandlers)
일반적으로 엘리먼트를 복사한 확장 집합을 만들면 이들은 DOM 어딘가에 덧붙일 수 있음
[함수 정리 (1)]


(4) 그 밖에 함수 정리

아래 표에 정리된 함수들은 확장된 엘리먼트 집합을 관리하는 함수들이다.

 
함수 명
함수 설명
확장 집합 크기 얻기
size()
해당 엘리먼트의 개수를 반환한다.
확장 집합에서 특정 엘리먼트 얻기
get(index)
확장 집합에서 index번째의 엘리먼트를 가져온다. (배열과 유사함)
 
get()
모든 확장 엘리먼트를 일반 자바스크립트 배열로 얻는다.
 
index(element)
확장 집합에서 특정 엘리먼트의 index 값을 가져온다.
확장 집합 재편성 하기
add(element)
기존의 확장 집합에 다른 엘리먼트를 추가한다.
 
not(expression)
기존의 확장 집합에서 expression와 일치하는 엘리먼트를 제외시킨다.
 
filter(expression)
기존의 확장 집합에서 expression와 일치하는 엘리먼트만 가져온다.
확장 집합의 부분 집합 얻기
slice(begin, end)
기존의 확장 집합에서 begin번째부터 end번째까지의 엘리먼트만 가져온다.
확장 집합 관련 그 밖에 함수들
find(selector)
기존의 확장 집합에서 selector와 일치하는 엘리먼트들로 새로운 확장 집합을 생성한다.
 
is(selector)
기존의 확장 집합에서 selector와 일치하는 엘리먼트가 있다면 true, 없다면 false를 반환한다.
jQuery 체인 관리하기
end()
이전 확장 집합을 반환한다.
 
andSelf()
커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다
관계를 이용하여 확장 집합 얻기
 
아래 표 참조.
[함수 정리 (2)]

함수 명
설명
children()
확장 엘리먼트의 고유한 자식으로 구성된 확장 집합 반환한다.
contents()
엘리먼트의 콘텐츠로 구성된 확장 집합을 반환한다.
next()
확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다.
nextAll()
확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다.
parent()
바로 위 부모로 구성된 확장 집합을 반환한다.
parents()
바로 위 부모와 모든 조상이 포함하는 확장 집합을 반환한다.
prev()
바로 이전에 나오는 형제로 구성된 확장 집합을 반환한다.
prevAll()
이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다.
siblings()
확장 엘리먼트 내에 모든 형제를 포함한 확장 집합을 반환한다.
[관계를 이용하여 확장 집합 얻기와 관련된 함수 정리]

 

 


Event 관련 함수 및 프로퍼티와 $.유틸리티 함수 역시 이번 편과 비슷한 형식으로 정리를 해볼까 합니다. jQuery는 꼭 필요한 기능들만 구현이 되어 있기 때문에 따지고 보면 별로 정리할 내용이 없기 때문에 이를 간단하게 요약하면 jQuery를 사용하실 때, 참고하신다면 분명히 도움이 되리라 생각됩니다.

그럼 이상으로 글을 마치겠습니다.


출처 : http://blog.naver.com/seogi1004/ 




출처: http://epthffh.tistory.com/entry/Jquery-셀렉터Selector-사용하기 [물고기 개발자의 블로그]

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

'jQuery' 카테고리의 다른 글

[jQuery] input 태그 타입 패스워드로 변경  (0) 2019.01.11
[jQuery] .each() (jQuery 반복문)  (0) 2019.01.11
[jQuery] .attr() / .prop()의 차이  (0) 2019.01.10
[jQuery] prop() 메소드  (0) 2019.01.10
[jQuery] 이벤트, 메소드, 기본셀렉트 정리  (0) 2019.01.10
'jQuery' Related Articles more