[jQuery] 선택자(selector)

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
	
		$(function(){
			$("div:eq(0)").css({"border" : "1px solid red", "width" : "400px", "height" : "200px"});
			$("#view").css("border", "1px solid red").css("width", "400px").css("height", "100px");
		})
	
		//tag로 선택
		function sel01(){
			$("span").css("color", "red");
			$("#view").text('$("sapn").css("color", "red");');
		}
		
		//id로 선택
		function sel02(){
			jQuery("#t1").css("color", "hotpink");
			jQuery("#view").text('jQuery("#t1").css("color", "hotpink");');
		}
		
		//class로 선택
		function sel03(){
			$(".t2").css("color", "blue");
			$("#view").text('$(".t2").css("color", "blue");');
		}
		
		//parent child 선택
		function sel04(){
			$("li span").css("color", "violet");
			$("#view").text('$("li span").css("color", "violet");');
		}
		
		//parent > child 선택
		function sel05(){
			$("li > span").css("color", "brown");
			$("#view").text('$("li > span").css("color", "brown");');
		}
		
		function sel06(){
			$("li:nth-child(6)").css("background-color", "yellow"); // 보통 숫자로 뭔가를 찾을때는 0부터 시작하는 경우가 많지만 얘는 1부터 시작함
			//$("li:nth-child(odd)").css("background-color", "yellow"); //홀수 번째
			//$("li:nth-child(even)").css("background-color", "yellow"); //짝수 번쨰
			$("#view").text('$("li:nth-child(6)").css("background-color", "yellow");');
		}
		
		function sel07(){
			$("li:first-child").css("background-color", "aquamarine");
			$("#view").text('$("li:first-child").css("background-color", "aquamarine");');
		}
		
		function sel08(){
			$("li:last-child").css("background-color", "black").css("color", "white");
			$("#view").text('$("li:first-child").css("background-color", "aquamarine");');
		}
		
		function cls(){
			$("*").css("color", "").css("background-color", "");
			$("#view").text('');
		}
	
	</script>
</head>
<body>

	<h1>selector 표현식</h1>
	
	<div>
		<ul>
			<li><span>tag로 선택</span></li>
			<li id="t1">id로 선택</li>
			<li class="t2">class로 선택</li>
			<li><span>parent child로 선택</span></li>
			<li><b><span>parent &gt; child</span></b> 선택</li>
			<li>:nth-child(n/odd/evn)로 선택</li>
			<li>:first-child로 선택</li>
			<li>:last-child로 선택</li>
		</ul>
	</div>
	
	<br>

	<div>
		<button onclick="sel01();">tag</button>
		<button onclick="sel02();">id</button>
		<button onclick="sel03();">class</button>
		<button onclick="sel04();">p c</button>
		<button onclick="sel05();">p &gt; c</button>
		<button onclick="sel06();">nth</button>
		<button onclick="sel07();">first</button>
		<button onclick="sel08();">last</button>
		<br>
		<button onclick="cls();">clear</button>
	</div>
	
	<h2>코드</h2>
	<div id="view"></div>


</body>
</html>

버튼을 누르면 해당 버튼에서 실행된 함수의 명령코드가 아래쪽에 나오도록 작성하였습니다!

버튼의 이름은 선택자를 어떻게 주었는지에 따라 value를 넣었습니다!

function sel06(){
	$("li:nth-child(6)").css("background-color", "yellow"); // 보통 숫자로 뭔가를 찾을때는 0부터 시작하는 경우가 많지만 얘는 1부터 시작함
	//$("li:nth-child(odd)").css("background-color", "yellow"); //홀수 번째
	//$("li:nth-child(even)").css("background-color", "yellow"); //짝수 번쨰
	$("#view").text('$("li:nth-child(6)").css("background-color", "yellow");');
}

nth는 배열처럼 번지수를 찾습니다.

예를들어 위와 같이 li:nth-child(6)이면 6번째 li를 찾습니다.

보통 배열에서는 0번지부터 찾지만 nth는 1번지부터 시작입니다.

child(odd)의 경우 모든 홀수번째를 찾게되고 even의 경우에는 모든 짝수번째를 찾게 됩니다.

function cls(){
	$("*").css("color", "").css("background-color", "");
	$("#view").text('');
}

clear버튼에는 위와 같이 전체선택자를 이용하여 속성을 없애주었습니다!

728x90

'JS 관련 > JQuery' 카테고리의 다른 글

[jQeury] val()(value값 가져오기) (0)	2022.02.10
[jQeury] 제이쿼리 연습! (선택자 / hide, slideup 등) (0)	2022.02.09
[jQuery] show(), css(), toggle(), hide() (0)	2022.02.07
[jQuery] 제이쿼리 작성방법 (0)	2022.02.06
[jQuery] 제이쿼리가 뭔데?? (0)	2022.02.05

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바