jQuery - Selector

Posted by ITPangPang
2016.10.02 21:35 웹(Web)/jQuery


jQuery - Selector



jQuery에서 Selector는 가장 기초이자 가장 중요한

   부분입니다.


ㆍ Selector 종류를 처음부터 전부 알아보려면 끝도 없지만..

   가장 기본이 되는 부분만 알아보도록 하겠습니다




ID Selector


id selector는

이전글에서 사용했듯이

id를 검색해서

컨트롤 할 수 있습니다.


사용방법은


$(document).ready(function()){}

문서 전체에서


$("#ID").

아이디를 찾는다


이렇게 적어주시면 됩니다


코드로 보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("#idtest").html("Hello ITPANGPANG").css({"border-color""#BDBDBD",
                                                       "border-width":"5px",
                                                        "border-style":"solid"}).css("background-color","green");
        });
    </script>
</head>
<body>
  <h1 id="idtest"></h1>
</body>
</html>
cs


이전글과 마찬가지로

이렇게 적어주시면 됩니다.


전체 Selector, All Selector


전체 Selector,

* Selector는

모든 요소를 잡아주는

Selector입니다


코드에서는

&("*").

이렇게 찾아주시면

됩니다


&("#ID").에서 &("*").

변경해보겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("*").css({"border-color""#000000","border-width":"1px","border-style":"solid"});
        });
    </script>
</head>
<body>
  <h1>1</h1>
  <h2>2</h2>
  <h1>3</h1>
  <h2>4</h2>
  <h1>5</h1>
</body>
</html>
cs


.html부분을

제거하고

<body>에

5개의 요소들을

적어주었습니다


결과를 보면


이런식의 결과를

얻을 수 있습니다


<h>요소들에

각각 css가 적용되고


body영역에도

css가 적용되는 것을

확인 할 수 있습니다.


요소 Selector, Element Selector


엘리먼트 셀렉터는

원하는 요소들만 선택해서

제어해주는 셀렉터입니다


사용방법은

&("요소").

이렇게 선택해주시면

됩니다.


위의 코드에서

&("*"). -> &("h1").

으로만 변경한 후에

결과를 보겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("h1").css({"border-color""#000000","border-width":"1px","border-style":"solid"});
        });
    </script>
</head>
<body>
  <h1>1</h1>
  <h2>2</h2>
  <h1>3</h1>
  <h2>4</h2>
  <h1>5</h1>
</body>
</html>
cs


결과확인


<h1> </h1>

사이에 들어간 1, 3, 5

문자열만 css 적용 된 것을

확인 할 수 있습니다


멀티 Selector(AND)


기본 Selector중에

마지막으로

여러개 멀티로 검색하는

방법을 알아보겠습니다
(사실 Class까지 들어가야 맞지만 나중에..)


And 말그대로 위에서

알아본 Selector를 혼합해서

사용하는 방법입니다


간단하게 

위 코드에서

<h1>요소들만

검색했엇는데

<h2>까지 검색을 하고 싶다면


그냥 간단하게 ,(쉼표)

 뒤에 적어주시면

됩니다.


$("h1, h2").

이렇게 변경시켜주면

간단하게 해결됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("h1,h2").css({"border-color""#000000","border-width":"1px","border-style":"solid"});
        });
    </script>
</head>
<body>
  <h1>1</h1>
  <h2>2</h2>
  <h1>3</h1>
  <h2>4</h2>
  <h1>5</h1>
</body>
</html>
cs




ID Selector와 Element Selector를

혼합해서 사용해보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("h1,h2,#idtest").css({"border-color""#000000","border-width":"1px","border-style":"solid"});
        });
    </script>
</head>
<body>
  <div id="idtest">000000000000</div>
  <h1>1</h1>
  <h2>2</h2>
  <h1>3</h1>
  <h2>4</h2>
  <h1>5</h1>
</body>
</html>
cs


이렇게 똑같이

,(쉼표) 뒤에 적어주시면

됩니다.



끝!

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

'웹(Web) > jQuery' 카테고리의 다른 글

jQuery 이벤트 발생시켜보기  (0) 2016.10.03
jQuery - Selector  (0) 2016.10.02
jQuery Hello World(Hello ITPANGPANG) 찍기  (0) 2016.10.02
이 댓글을 비밀 댓글로