jQuery 구조 선택자

삼전·2023년 5월 30일
0

jQuery

목록 보기
3/15
post-thumbnail
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 구조 선택자</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<ul id="menu">
		<li>html/css</li>
		<li>Javascript</li>
		<li>제이퀄</li>
		<li>부트스트랩</li>
		<li>Ajax</li>
		<li>JSP</li>
	</ul>
	<ul >
		<li>위치 선택자</li>
	</ul>
	
	<script>
		$(function (){
			//위치 선택자
			$("#menu>li:first").css('color','red')
			$("#menu>li:last").css('color', 'lime')
			//**주의** 홀수번째, index(even): 0, 2, 4, 6 **주의**
			$("#menu>li:even").css('background', 'pink') //홀수번째 0,1,2,3,
			//**주의** 짝수번째, index(odd): 1, 3, 5, 7 
			$("#menu>li:odd").css('background', 'red') //홀수번째 0,1,2,3,
			//li의 부모중 자식이 1개인 경우를 선택
			$("li:only-child").css('background-color', 'orange');
			//index를 선택자
			$("#menu li").slice(3).css('font-weight', 'bold'); //index가 3부터 선택
			$("#menu li").eq(2).css('font-size','2em'); //index가 2인 위치를 li를 선택
			
			// index 위치보다 크거나 작은 위치의 객체 선택
			//gt, lt
			$('#menu li:lt(3)').css('border-radius','10px'); //index가 2인 위치를 li를 선택
			$('#menu li:gt(3)').css('border-radius','10px 0px'); //
		
		
		
		
		})
	
	
	</script>
</body>
</html>

결과

profile
풀스택eDot

0개의 댓글