달력

42025  이전 다음

  • 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

[Jquery]선택자 - 속성

프로그래밍/Web 2018. 7. 26. 20:43
반응형

선택자

 설명

 $(Selector[attr])

 attr 속성(attribute)값을 가지는 Selector 요소와 일치

 $(Selector[attr=”value”])

 attr 속성의 값이 value 와 동일한 값을 Selector 요소와 일치

 $(Selector[attr!=”value”])

 attr 속성의 값이 value 와 같지 않은 값을 Selector 요소와 일치

 $(Selector[attr^=”value”])

 attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치

 $(Selector[attr$=”value”])

 attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치

 $(Selector[attr*=”value”])

 attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치

 $(Selector[attr~=”value”])

 attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치



$(Selector[attr])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs

실행


$(Selector[attr=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target=_self]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr^=”value”])


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target^=_]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr$=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target$=p]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr*=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" id="link1" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link2" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link3" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $('a[id*="link"]').css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr~=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" id="link1" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link2" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link3" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $('a[id~="link1"]').css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs

실행


저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[CSS] 배경 100프로 이미지표시  (0) 2018.08.04
[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자  (0) 2018.07.25
[Jquery]ready, load  (0) 2018.07.17
[Web]ScrollIndicator  (0) 2018.07.13
Posted by 유령회사
|

티스토리툴바