코드랩 레퍼런스

element 본문

JQUERY

element

webstoryboy 2018. 1. 19. 21:04

Definition

  • 태그 셀렉터는 기본 태그를 선택합니다.

Syntax

$("element").메서드;

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 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

Ad

Comments