jQuery - Selector
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 Hello World(Hello ITPANGPANG) 찍기 (0) | 2016.10.02 |