본문 바로가기
공부일지

231019 (jQuery)

CD가참둥그렇다 2023. 10. 19. 13:36

예시 14. 표의 추가

  • table은 리스트의 형태로 나타난다.
  • append를 이용하여 html 코드를 작성하여 입력하면 table의 새로운 열을 만들 수 있다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		table,
		td {
			border: 1px solid black;
			border-collapse: collapse;
		}

		td {
			padding: 10px 20px 10px 20px;
		}
	</style>
</head>

<body>
	<table width="100%">
		<tr>
			<td>학번</td>
			<td>이름</td>
			<td>과목</td>
			<td>학점</td>
			<td>설명</td>
		</tr>
	</table>
	학번: <input id="01" type="text" /><br />
	이름: <input id="02" type="text" /><br />
	과목: <input id="03" type="text" /><br />
	학점: <input id="04" type="text" /><br />
	설명: <input id="05" type="text" /><br />
	<button>입력</button>
</body>
<script>
	$("button").click(function () {
		var elem = $("input");
		console.log(elem.length);
		var txt = "";
		txt += "<tr>";
		for (var i; i < elem.length; i++) {
			txt += "<td>" + $(elem[i]).val() + "</td>";
		}
		txt += "</tr>";
		console.log(txt);
		$("table").append(txt);
	});
</script>

</html>

 

 

예시 15. remove, empty, children 메소드

  • remove() : 해당 요소를 전부 삭제
  • empty() : 해당 요소의 하위 요소를 삭제한다.
  • children() : 앞의 요소의 자식 중 원하는 요소를 선택한다.
  • “div:eq(0)” : div 태그 중 n번째 요소를 선택한다. 순서는 0부터 시작한다.(배열)
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		div.paren {
			background-color: yellow;
			width: 400px;
			height: 180px;
			text-align: center;
		}

		div.ch1 {
			background-color: blue;
			width: 300px;
			height: 50px;
			margin: 20px auto;
		}

		div.ch2 {
			background-color: green;
			width: 300px;
			height: 50px;
			margin: 20px auto;
		}
	</style>
</head>

<body>
	<div class="paren">
		<b>Parent Element</b>
		<div class="ch1">Child Element 1</div>
		<div class="ch2">Child Element 2</div>
	</div>
	<button id="remove">remove()</button>
	<button id="empty">empty()</button>
	<button id="removechild2">remove()-child2</button>
</body>
<script>
	$("#remove").click(function () {
		$(".paren").remove();
	});
	$("#empty").click(function () {
		$(".paren").empty();
	});
	$("#removechild2").click(function () {
		$(".paren").children("div:eq(1)").remove();
	});
</script>

</html>

 

 

 

예시 16. class 메소드

  • addClass(”이름”) : 요소의 class를 추가한다. 클래스에 대한 스크립트나 스타일의 영향을 받게 된다.
  • removeClass(”이름”) : 요소의 class를 제거한다.
  • toggleClass(”이름”) : 요소가 class를 가지고 있다면 제거, 없다면 추가한다.
  • hasClass(”이름”) : 요소가 class를 가지고 있는지 체크하고 true/false로 반환한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		.ex {
			background-color: cadetblue;
			text-align: center;
			width: 200px;
			height: 200px;
		}
	</style>
</head>

<body>
	<button id="add">클래스 추가</button>
	<button id="remove">클래스 삭제</button>
	<button id="toggle">TOGGLE</button>
	<div>DIV</div>
</body>
<script>
	$("#add").click(function () {
		$("div").addClass("ex");
	});
	$("#remove").click(function () {
		$("div").removeClass("ex");
	});
	$("#toggle").click(function () {
		$("div").toggleClass("ex");
		
		var sw = $("div").hasClass("ex");
		console.log(sw);
		
		if(sw == true){
			$(this).text("OFF");
		} else {
			$(this).text("ON");
		}
	});
</script>

</html>

 

 

 

예시 17. css의 변경 스크립트

  • css(”속성”)을 이용하여 해당 태그의 속성을 가져올 수 있다.
  • css(”속성,”값”)을 이용하여 해당 태그의 속성을 값으로 변경한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
	</style>
</head>

<body>
	<p id="ex1" style="color: blue; font-size: 32px;">스타일이 적용된 텍스트</p>
	<p id="ex2">스타일이 적용 안 된 텍스트</p>
	<div>
		폰트 사이즈 : <span id="size"></span><br>
		폰트 color : <span id="color"></span><br>
		<button>css 적용</button>
	</div>
</body>
<script>
	var size = $("#ex1").css("font-size");
	var color = $("#ex1").css("color");
	$("#size").text(size);
	$("#color").text(color);
	$("button").click(function () {
		$("#ex2").css("color", color);
		$("#ex2").css("font-size", size);
	});
</script>

</html>

 

 

 

예시 18. 자식 찾기1

  • children(”요소”) : 해당 요소의 바로 하위 자식들을 지정한다. 요소를 가진 자식들만 선택된다.
  • find(”요소”) : 해당 요소의 모든 하위 자식들을 지정한다. 요소를 가진 자식들만 선택된다.
  • 모든 요소를 선택할 때는 “*”을 이용하여 선택한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		.ancestors * {
			display: block;
			border: 2px solid gray;
			color: black;
			padding: 5px;
			margin: 15px;
		}

		.selector {
			color: red;
			border: 1px solid red;
		}
	</style>
</head>

<body>
	<div class="ancestors">
		<div class="parents" style="width: 500px;">
			div(.parents)
			<ul>ul
				<li>li
					<span class="first">span</span>
				</li>
			</ul>
		</div>
		<div class="parents" style="width: 500px;">
			div(.parents)
			<p>p
				<span class="second">span</span>
			</p>
		</div>
	</div>
	<button id="child">자식 찾기</button>
	<button id="find">span 찾기</button>
	<button id="find2">자식 전체 찾기</button>
</body>
<script>
	$("#child").click(function () {
		$(".parents").children().addClass("selector");
	});
	$("#find").click(function () {
		/*
		var $elem = $('span');//jQuery 객체
		$(".parents").find($elem).addClass("selector");
		*/
		$(".parents").find("span").addClass("selector");
	});
	$("#find2").click(function () {
		$(".parents").find("*").addClass("selector");
	});
</script>

</html>

 

 

 

예시 19. 자식 찾기2

  • children 이외에 전용 찾기 메소드가 있다.
  • first : 첫 번째 요소를 선택한다.
  • last : 마지막 요소를 선택한다.
  • eq(숫자) : 배열 상 숫자번째 요소를 선택한다.
  • filter(조건) : 조건에 맞는 모든 요소를 선택한다.
  • not(조건) : 조건에 맞지 않는 모든 요소를 선택한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
	</style>
</head>

<body>

	<div style="border: 1px solid black;">
		<p>첫번째 div 엘리먼트</p>
		<p class="sel">두번째 div 엘리먼트</p>
		<p>세번째 div 엘리먼트</p>
		<p class="sel">네번째 div 엘리먼트</p>
	</div>
	<br>
	<div style="border: 1px solid black;">
		<p>다섯번째 div 엘리먼트</p>
		<p class="sel">여섯번째 div 엘리먼트</p>
		<p>일곱번째 div 엘리먼트</p>
		<p class="sel">여덟번째 div 엘리먼트</p>
	</div>
	<button id="first">first</button>
	<button id="last">last</button>
	<button id="eq">eq(2)</button>
	<button id="filter">filter</button>
	<button id="not">not</button>
</body>
<script>
	$("#first").click(function () {
		$("div p").first().css("background-color", "yellow");
	});
	$("#last").click(function () {
		$("div p").last().css("background-color", "yellow");
	});
	$("#eq").click(function () {
		$("div p").eq(2).css("background-color", "yellow");
	});
	$("#filter").click(function () {
		$("div p").filter(".sel").css("background-color", "orange");
	});
	$("#not").click(function () {
		$("div p").not(".sel").css("background-color", "green");
	});
</script>

</html>

'공부일지' 카테고리의 다른 글

231024 (Java)  (0) 2023.10.25
231024 (Oracle)  (0) 2023.10.24
231018 (jQuery)  (1) 2023.10.18
231017 (Java)  (0) 2023.10.17
231017 (jQuery)  (1) 2023.10.17

'공부일지' Related Articles

티스토리툴바