코드랩 레퍼런스
element 본문
Definition
- 태그 셀렉터는 기본 태그를 선택합니다.
Syntax
$("element").메서드;
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| element |
Sample1 Element 예제입니다.
선택자(Selectors)
- <li id="one1">전체 셀렉터는 전체 태그를 선택합니다.</li>
- <li id="one1">클래스 셀렉터는 클래스 태그를 선택합니다.</li>
- <li>아이디 셀렉터는 아이디 태그를 선택합니다.</li>
- <li>태그 셀렉터는 기본 태그를 선택합니다.</li>
- <li>다중 셀렉터는 여러가지 태그를 선택합니다.</li>
<p>기본 선택자입니다.</p>
<p>선택자(Selectors) 선택자입니다.</p>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
.list ul li.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d;}
.list p.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d;}
</style>
</head>
<body>
<h3>선택자(Selectors)</h3>
<div class="list">
<ul>
<li id="one1" class="on">전체 셀렉터는 전체 태그를 선택합니다.</li>
<li class="one2">클래스 셀렉터는 클래스 태그를 선택합니다.</li>
<li>아이디 셀렉터는 아이디 태그를 선택합니다.</li>
<li>태그 셀렉터는 기본 태그를 선택합니다.</li>
<li>다중 셀렉터는 여러가지 태그를 선택합니다.</li>
</ul>
<p>기본 선택자입니다.</p>
<p>선택자(Selectors) 선택자입니다.</p>
</div>
<div class="nSample-de">
<ul>
<li><input type="radio" name="radio" id="ex1" value="0" checked=""><label for="ex1">$("#one1").addClass("on"); //아이디 선택자</label></li>
<li><input type="radio" name="radio" id="ex2" value="1"><label for="ex2">$(".one2").addClass("on"); //클래스 선택자</label></li>
<li><input type="radio" name="radio" id="ex3" value="2"><label for="ex3">$("*").addClass("on"); // 전체 선택자</label></li>
<li><input type="radio" name="radio" id="ex4" value="3"><label for="ex4">$("li").addClass("on"); //태그 선택자</label></li>
<li><input type="radio" name="radio" id="ex5" value="4"><label for="ex5">$("li, p").addClass("on"); //다중 태그 선택자</label></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btn = $(".nSample-de > ul > li > input");
btn.click(function(){
var num = $(this).attr("value");
//alert(num);
if(num == 0){
$("li, p").removeClass("on");
$("*").addClass("on"); // 전체 선택자
}
if(num == 1){
$("li, p").removeClass("on");
$(".one2").addClass("on"); //클래스 선택자
}
if(num == 2){
$("li, p").removeClass("on");
$("#one1").addClass("on"); //아이디 선택자
}
if(num == 3){
$("li, p").removeClass("on");
$("li").addClass("on"); //태그 선택자
}
if(num == 4){
$("li, p").removeClass("on");
$("li, p").addClass("on"); //다중 태그 선택자
}
});
});
</script>
</body>
</html>
Share
Related Articles
more
Ad
Comments