달력

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. 25. 22:45
반응형


 선택자

선택자 표현 방법

 All Selector

 $("*")

 ID Selector

 $("#id")

 Element Selector

 $("elementName")

 Class Selector

 $(".className")

 Multiple Selector

 $("selector1, selector2, selector3, selectorN")


All Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p>html5</p>
    <p>css3</p>
    <p>javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("*").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행



ID Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p id="item1">html5</p>
    <p id="item2">css3</p>
    <p id="item3">javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("#item1").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행



Element Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p id="item1">html5</p>
    <p id="item2">css3</p>
    <p id="item3">javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("p").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행


Class Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p>html5</p>
    <p class="MyClass">css3</p>
    <p>javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $(".MyClass").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행


 Multiple Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p>html5</p>
    <p class="MyClass">css3</p>
    <div>javascript</div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("p, .MyClass").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs

실행


저작자표시

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

[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]ready, load  (0) 2018.07.17
[Web]ScrollIndicator  (0) 2018.07.13
[JavaScript]trim  (0) 2018.06.23
Posted by 유령회사
|

티스토리툴바