달력

72025  이전 다음

  • 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

[Jquery]dom 선택자

프로그래밍/Web 2018. 8. 1. 23:07
반응형

 선택자

설명 

 $(“parent > child”)

 부모(parent) 요소 바로 아래 자식(child)인 요소를 반환

 $(“ancestor descendant”)

 조상(ancestor) 과 일치하는 요소에 포함된 모든 후손(descendant)을 반환

 $(“prev + next”)

 형제(prev)수준의 next요소를 반환

 $(“prev ~ siblings”)

 prev이후에 형제(siblings) 요소 선택


$(“parent > child”)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul class="test">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $("ul.test > li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행


$(“ancestor descendant”)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul class="test">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $("ul.test li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행



$(“prev + next”)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul >
        <li class="test">HTML5</li>
        <li>CSS3</li>
        <li>CSS32</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(".test + li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행




$(“prev ~ siblings”)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul >
        <li class="test">HTML5</li>
        <li>CSS3</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(".test ~ li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행


저작자표시 (새창열림)

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

[JavaScript] 기본 매개변수  (0) 2018.08.15
[CSS] 배경 100프로 이미지표시  (0) 2018.08.04
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]선택자  (0) 2018.07.25
[Jquery]ready, load  (0) 2018.07.17
Posted by 유령회사
|

티스토리툴바