[jQuery] 셀렉터 사용하기 (Selectors)
필그램
·2017. 11. 1. 06:15
제이쿼리에서 특정 html을 지정하는 것을 셀렉터라 한다
이미지 순서대로 설명하자면
없는 것은 태그네임
# id로 표시된것
.(점) 은 class
tag.className : 태그 안의 클래스가 className인 것에만 적용
tag#id.className : 태그 안의 아이디가 id이고, 클래스가 className인 것에만 적용
* : 모든것에 적용
[예제]
<script type="text/javascript">
$("document").ready(function() {
$("p").css("border", "3px solid blue");
$(".a").css("border", "2px dotted red");
$("#example").css("border", "2px dotted red");
$("p.b").css("border", "2px dotted red");
$("p#b").css("border", "3px double yellow");
});
</script>
[전체 소스 예제]
스크립트 내의 jQuery를 주석처리 한 후, 한줄씩 주석을 없애고 브라우저에 적용해 보시면 적용된 내용을 보실 수 있습니다.
<html>
<head>
<title>Using Basic jQuery Selectors</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("p").css("border", "3px solid blue");
$(".a").css("border", "2px dotted red");
$("#example").css("border", "2px dotted red");
$("p.b").css("border", "2px dotted red");
$("p#b").css("border", "3px double yellow");
});
</script>
</head>
<body>
<h1>jQuery 셀렉터 </h1>
<div id="content">
<p>Selectors </p>
<p>examples:</p>
<ul id="list1">
<li class="a"><code>$("<i>tag</i>")</code>: Select all of the <tag> elements</li>
<li class="a"><code>$("<i>.className</i>")</code>: Select all elements that have the <i>className</i> class applied</li>
<li class="b"><code>$("#identifier")</code>: Select the element with the id of <i>identifier</i></li>
<li class="b"><code>$("<i>tag.className</i>")</code>: Select all <tag> elements that have the <i>className</i> class
applied</li>
</ul>
<div id="example">
<p class="a">This is paragraph 1</p>
<p id="para1">This is paragraph 2</p>
<p class="b">This is paragraph 3</p>
<p id="b">This is paragraph 100</p>
<p id="para4" lang="en-us">This is paragraph 4</p>
<p id="para5" lang="en-gb">This is paragraph 5</p>
</div>
</div>
</body>
</html>
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 필터 2 (0) | 2017.11.04 |
|---|---|
| [jQuery] 셀렉터의 필터링 (0) | 2017.11.03 |
| [jQuery] 애니메이션 구현하기 (0) | 2017.11.01 |
| [jQuery] 제이쿼리 환경설정 (0) | 2017.11.01 |
| [jquery] 이벤트 핸들링 (0) | 2017.11.01 |
