본문 바로가기
Front/JQuery

[JQuery-3.6.0] 기본 문법과 위치 선택자 사용

by 시월해 2021. 4. 27.

* 제이쿼리를 이용하여 DOM을 조작하는 방법
형식) $("선택자").동작함수("속성","값");

1. jQuery(document).ready(function () {});
2. JQuery(function() {});
3. $(document).ready(function () { }); - 표준
4. $(function () { });

기본 문법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
	
	onload = function () {
		let h_element = document.getElementsByTagName("h2");
		
		for(let i=0; i<h_element.length; i++) {
			let hNode = h_element.item(i);
			
			hNode.style.color = "red";
		}
	}
	
    // 문서의 바디 부분을 읽고 제이쿼리를 실행하시오라는 뜻
	$(document).ready(function () {
		$("h2").css("color", "red")
			   .css("border", "1px solid blue")
			   .css("background-color", "yellow");
	});

</script>
</head>
<body>
	 <h2>Header1</h2>
	 <h2>Header2</h2>
	 <h2>Header3</h2>
	 <h2>Header4</h2>
	 <h2>Header5</h2>
</body>
</html>

전체 선택자

<html>
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		//전체 선택자 : $("*") ==> 모든 요소(태그)를 선택함.
		$("*").css("border", "1px solid red");
	});
</script>
</head>
<body>
	 <h1>제이쿼리</h1>
	 <h2>직접 선택자 및 관계 선택자</h2>
	 <h3>직접 선택자</h3>
	 <h3>관계 선택자</h3>
</body>
</html>

아이디, 클래스, 태그, 그룹 선택자

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		//아이디 선택자 : $("#아이디이름") ==> id 속성에 지정된 값을 가진 요소를 선택함.
		$("#title").css("background-color", "gray")
				   .css("color", "#fff");
		//클래스 선택자 : $(".클래스이름") ==> class 속성에 지정된 값을 가진 요소를 선택함.
		$(".content").css("background-color", "blue");
		//요소 선택자 : $("요소(태그)명") ==> 지정된 요소(태그)명과 일치하는 요소들만 선택함.
		$("h1").css("border", "1px solid red");
		//그룹 선택자 : $("선택1, 선택2,.... 선택n") 
		$("h1, h3").css("color", "purple");
	});
</script>
</head>
<body>
	 <h1>제이쿼리</h1>
	 <h2 id="title">직접 선택자 및 관계 선택자</h2>
	 <h3 class="content">직접 선택자</h3>
	 <h3>관계 선택자</h3>
</body>
</html>

부모, 하위(자손과 자식), 자식 선택자

<html>
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		// 부모 요소 선택자 : $("요소 선택").parent()
		$(".second").parent().css("border","1px solid red");
		
		// 하위 요소 선택자 : $("요소선택  하위요소") -> 자식과 자손을 모두 포함
		$(".wrap li").css("color","green"); 
	
		// 자식 요소 선택자 : $("요소선택 > 자식요소) -> 자식만 포함
		$(".wrap > li").css("color","blue");
		
		// 자식 요소들 선택자 : $("요소선택").children() -> 자식과 자손을 모두 포함
		$(".wrap").children().css("background-color","yellow");
	});
</script>
</head>
<body>
	<h2>인접 관계 선택자</h2>
	<ul class="wrap">
		<li>내용1</li>
		<ul>
			<li>내용2</li>
			<li class="second">내용3</li>
		</ul>
		<li>내용4</li>
	</ul>
</body>
</html>

형제 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		// 형제(이전) 선택자 : $("요소선택").prev() -> 이전 요소 1개
		$(".content").prev().css("color","tomato");
		
		// 형제(다음) 요소 선택자 : $("요소선택").next() -> 이후 요소 1개
		$(".content").next().css("border","5px solid blue");
		
		// 형제(다음) 요소들 선택자 : $("요소선택").nextAll() -> 이후 모든 요소들
		$(".content").nextAll().css("color","orange");
		
		// 모든 형제 요소 선택자 : $("요소선택").siblings() -> 모든 형제 요소들
		$(".content").siblings().css("background-color","gray");
	});

</script>
</head>
<body>
	<h2>인접 관계 선택자</h2>
	<ul>
		<li>내용1</li>
		<li class="content">내용2</li>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</body>
</html>

위치 선택자(첫번째와 마지막 요소 선택 방법)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		// 첫번째 요소 선택 방법1
		//$(".menu li:first").css("color","red");
		// 첫번째 요소 선택 방법2
		$(".menu li").first().css("color","orange");
		// 마지막 요소 선택 방법1
		//$(".menu li:last").css("color","blue");
		// 마지막 요소 선택 방법2
		$(".menu li").last().css("color","tomato");
	});
	
</script>
</head>
<body>
	 <h2>탐색 선택자 - 위치 탐색자</h2>
	 <ul class="menu">
	 	<li>내용1</li>
	 	<li>내용2</li>
	 	<li>내용3</li>
	 	<li>내용4</li>
	 	<li>내용5</li>
	 </ul>
</body>
</html>

인덱스에 따른 위치 선택자1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		// 홀수 번째 요소 선택
		$(".menu li:even").css("background-color","pink");
		// 짝수 번째 요소 선택
		$(".menu li:odd").css("background-color","lightgray");
		
		// 전체 요소 중 특정 숫자 번째 요소만 선택
		$("li:nth-child(2)").css("color","purple");
		// 전체 요소 중 특정 배수의 요소만 선택
		$("li:nth-child(3n)").css("border","3px solid skyblue");
		// 3으로 나눠준 나머지 값이 1이 되는 경우
		$("li:nth-child(3n+1)").css("fontStyle","italic");
		// 3으로 나눠준 나머지 값이 2가 되는 경우
		$("li:nth-child(3n+2)").css("background-color","white");
	});
	
</script>
</head>
<body>
	 <h2>탐색 선택자 - 위치 탐색자</h2>
	 <ul class="menu">
	 	<li>내용1</li>
	 	<li>내용2</li>
	 	<li>내용3</li>
	 	<li>내용4</li>
	 	<li>내용5</li>
	 	<li>내용6</li>
	 	<li>내용7</li>
	 	<li>내용8</li>
	 	<li>내용9</li>
	 	<li>내용10</li>
	 	<li>내용11</li>
	 	<li>내용12</li>
	 	<li>내용13</li>
	 	<li>내용14</li>
	 	<li>내용15</li>
	 	<li>내용16</li>
	 	<li>내용17</li>
	 	<li>내용18</li>
	 	<li>내용19</li>
	 	<li>내용20</li>
	 </ul>
</body>
</html>

인덱스에 따른 위치 선택자2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		// 지정한 인덱스가 참조하는 요소만 선택
		$("li:eq(3)").css("background-color", "pink");
		// 지정한 인덱스보다 작은(less then) 요소만 선택
		$("li:lt(3)").css("background-color", "orange");
		// 지정한 인덱스보다 큰(greater then) 요소만 선택
		$("li:gt(3)").css("background-color", "tomato");
	});
	
</script>
</head>
<body>
	<h2>탐색 선택자</h2>
	 <ul>
	 	<li>내용1</li>
	 	<li>내용2</li>
	 	<li>내용3</li>
	 	<li>내용4</li>
	 	<li>내용5</li>
	 	<li>내용6</li>
	 	<li>내용7</li>
	 	<li>내용8</li>
	 	<li>내용9</li>
	 	<li>내용10</li>
	 </ul>
</body>
</html>

 

저작자표시

'Front > JQuery' 카테고리의 다른 글

[JQuery-3.6.0] 이벤트(Event) 처리  (0) 2021.04.29
[JQuery-3.6.0] 요소(속성) 편집 메서드  (0) 2021.04.28
[JQuery-3.6.0] 요소(속성) 조작, 수치 조작 메서드  (0) 2021.04.28
[JQuery-3.6.0] 속성 탐색 선택자  (0) 2021.04.28
[JQuery-3.6.0] 제이쿼리의 기본 개념  (0) 2021.04.27

관련글

티스토리툴바