정리jQuery

jQuery 속성 선택자 정리

jQuery, 속성선택자

jQuery 속성 선택자 정리

jQuery는 CSS의 선택자(Selector) 방식을 사용해서 DOM에 접근한다. 선택자에는 여러 종류가 있는데, 자주 사용하는 선택자로는 id 선택자, class선택자, tag선택자 등이 있는데 아래 살펴볼 속성 선택자는 클래스 속성이나 id 속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정한다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식이다.

패턴 의미 CSS Level 지원하지 않는브라우저
E[attr] ‘attr’ 속성이 포함된 요소 E를 선택합니다. 2 IE6
E[attr=”val”] ‘attr’ 속성의 값이 정확하게 ‘val’과 일치하는 요소 E를 선택합니다. 2 IE6
E[attr~=”val”] ‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택합니다.(공백으로 분리된 값이 일치해야 합니다.) 2 IE6
E[attr^=”val”] ‘attr’ 속성의 값이 ‘val’으로 시작하는 요소를 선택합니다. 3 IE6
E[attr$=”val”] ‘attr’ 속성의 값이 ‘val’으로 끝나는 요소를 선택합니다. 3 IE6
E[attr*=”val”] ‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택합니다. 3 IE6
E[attr\ =”val”] ‘attr’ 속성의 값이 정확하게 ‘val’ 이거나’val-‘ 으로 시작되는 요소 E를 선택합니다. 2 IE6

예제를 통해서 하나하나씩 살펴보자

예제 Selector[name=”value”]

“Hot Fuzz”라는 value 값을 가진 input 태그를 찾아서 text를 수정한다.

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEquals demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>

<script>
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );
</script>

</body>
</html>

예제 Selector [name~=”value”]

value로 작성된 문자열에 선택자의 속성 값이 일치하면 그 값을 변경해준다.

!!단 공백으로 분리된 값이 일치해야한다. 아래 예제를 보면 알겠지만 man이 들어간 input이 첫 번째와 세 번째가 있지만 두 번째 input만 공백으로 분리된 값이 일치하기 때문에 두 번째 input값만 변경되었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsWord demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">

<script>
$( "input[name~='man']" ).val( "mr. man is in it!" );
</script>

</body>
</html>

예제 Selector [name*=”value”]

위의 예제와 똑같지만 다른점은 선택자*= 는 속성의 값이 value 값을 포함하는 요소를 선택한다. 그래서 이번에는 첫 번째 두 번째 세 번째 input 모두 다 name 속성의 값에 man 이 포함 되기 때문에 3개 다 값이 채워진 것을 확인할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>

</body>
</html>

예제 Selector [name|=”value”]

선택자의 속성의 값이 value로 시작되거나 value-(하이픈) 으로 시작되는 요소를 선택한다.

아래 예제처럼 en과 en- 으로 시작되는 요소를 선택해서 css를 변경해주었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsPrefix demo</title>
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>

<script>
$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
</script>

</body>
</html>

예제 Selector [name^=”value”]

선택자의 속성이 value 로 시작!하는 요소를 선택한다. 그냥 value로 시작하는 값으로 시작 하기만 하면 선택된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeStartsWith demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input name="newsletter">
<input name="milkman">
<input name="newsboy">

<script>
$( "input[name^='news']" ).val( "news here!" );
</script>

</body>
</html>

예제 Selector [name!=”value”]

선택자의 속성 값이 value가 아닌! 요소를 선택한다. jQuery 공식 문서에서는 :not([attr='value'])와 동등하다고 나와있다.

추가 노트로는 [name!=”value”] 는 CSS의 명세?부분이 아닌 jQuery의 확장 이다. [name!=”value”] 선택자는 순수 DOM 메서드인 querySelectorAll()의 빠른 퍼포먼스의 이점을 사용하지는 못한다. 최신 브라우저에서의 더 나은 퍼포먼스를 원한다면 $("your-pure-css-selector").not("[name='value']")를 사용하라고 나와있다!

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeNotEqual demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  <input type="radio" name="newsletter" value="Hot Fuzz">
  <span>name is newsletter</span>
</div>
<div>
  <input type="radio" value="Cold Fusion">
  <span>no name</span>
</div>
<div>
  <input type="radio" name="accept" value="Evil Plans">
  <span>name is accept</span>
</div>

<script>
$( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" );
</script>

</body>
</html>

예제 Selector [name$=”value”]

선택자의 속성 값이 value로 끝나는! 요소를 선택한다. 아래 예제만 봐도 이해가 될 것이다. 마지막에 letter로 끝나는 input에만 a letter라는 값이 추가되었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEndsWith demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input name="newsletter">
<input name="milkman">
<input name="jobletter">

<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>

</body>
</html>
Share