본문 바로가기
자바스크립트

jQuery 21. 03. 03.

Levinni 2021. 3. 3. 13:49

선택자(Selector)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오전 10:26:18</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			var id = document.getElementById("myId");
			console.log(id); // object HTMLHeadingElementObject DOM 문서객체
			//alert(id);
			var id2 = $("#myId");
			console.log(id2);
			//alert(id2); // object Object jQuery 객체
			
			var object = {}; 	// object
			var arr = []; 		// arr
			
			alert($(id) == id2); 	// false
			// $(obj) 래핑시 jQuery 객체가 됨.
			// jQuery 객체 > DOM  .get() 호출시 + []호출시
			
			alert(id2.get(0) == id); 	// true
			alert(id2[0] == id); 		// true
			
			var flag = false;
			alert(!!!!!flag);
			alert($(id2[0])[0]); 		// DOM
		})
	</script>
</head>
<body>
	<h1 id="myId"></h1>
</body>
</html>

입력양식 필터 선택자

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오전 11:26:08</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("input[type='text']").val("휴먼 교육센터");
			
			setTimeout(() => {
				var value = $("select option:selected").val(); // 3초되기 전에 오라클로 바꾸면 alert 오라클로 뜸.
				alert(value);
				
				$("input:text").val("click me");
				$("input:button").val("click me");
				}, 3000);
			});
	</script>
</head>
<body>
	<input type="text" value="your name">
	<select>
		<option>oracle</option>
		<option selected>java</option>
	</select>
	<input type="button" value="click me">
</body>
</html>

 

size()

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오후 12:14:19</title>
	<style>
		body {cursor: pointer;}
		div {width: 50px; height: 30px; margin: 10px; float: left; background: blue;}
		span {color:red}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$(document.body).click(function() {
				$(this).append("<div>");
				var size = $("div").size();
				$("span").text("div가 " + size + "개 있습니다.")
			}).click(); // 트리거했기 때문에 실행하면 두 개
		});
	</script>
</head>
<body>
	<span></span>
	<hr>
	<div></div>
</body>
</html>

- append할 때 < > 꼭 넣어야 함! "div"로 하면 문자가 출력 됨.

 

 

위치 관련 필터 선택자

jQuery 배열(Array) 관리

jQuery 객체 확장, filter

eq(), first(), last()

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오후 12:34:51</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			// js object에서 key는 - 표기 못 함. 식별자 작성법 규칙을 따르기 때문.
			// 1. key를 '', ""로 래핑해서 문자열화
			// 2. 카멜표기법
			var arr = ["1.2em", "1.5em"];
			
			$("h3")
			.css("color", "red")
			.css({textDecoration:"underline"})
				.filter(":odd")
				.css("background", "orange")
					.first()
					.css("color", "blue") // 윗줄 중에서 첫번째라 택내2임
				.end()
			.end()
			.css("border", "1px solid black")
			.css("font-size", function(i) {
				return arr[i%2];
			})
			.css("font-style", "italic")
				.eq(2).css("color", "black").click(function() {
					alert(this.innerText);
				}).click()
			.end();
		});

			// 왜 chaining이 가능한가? this!!!를 래핑한 jQuery객체니깐
			//$("h3").get(0).style.backgroundColor = "blue"
			//$("h3").get(0).style["background-color"] = "blue"
	</script>
</head>
<body>
	<h3>텍스트 내용1</h3>
	<h3>텍스트 내용2</h3>
	<h3>텍스트 내용3</h3>
	<h3>텍스트 내용4</h3>
	<h3>텍스트 내용5</h3>
	<h3>텍스트 내용6</h3>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오후 2:23:42</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
/* 			$.each(window, function(i, item) {
				document.write(i, " ::: ", item, "<br>");
			});
			
			for(var i in window) {
				document.write(i, " ::: ", window[i], "<br>");
			} // 위 아래 같음. */
			
			$("h3").each(function(i) { // for문하고 같음
				console.log(i, ":::", this);
			})
			
			var obj = {name: "자바맨"};
			var obj2 = {age: 39, addr: "성정동"};
			/* obj.age = 39;
			obj.addr = "성정동"; */
			$.extend(obj, obj2)
			console.log(obj);
		});
	</script>
</head>
<body>
	<h3>텍스트 내용1</h3>
	<h3>텍스트 내용2</h3>
	<h3>텍스트 내용3</h3>
	<h3>텍스트 내용4</h3>
	<h3>텍스트 내용5</h3>
	<h3>텍스트 내용6</h3>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오후 2:53:31</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			//alert($("body").get(0).innerHTML);
//			alert($("body").html()); // getter
			
//			$("body").get(0).innerHTML = "<h1>추가된 내용</h1>";
//			$("body").html("<h1>추가된 내용</h1>"); // setter 위 아래는 같음.
			
//			$("body").text("<h1>추가된 내용</h1>"); // 태그로 인식x
			// < : &lt;
			
//			$("body").remove(); 	// 내가 사라짐
//			$("body").empty(); 		// 내가 가지고 있는 애들이 사라짐
//			$("body").html("");		// empty랑 같은 기능

			$("h1").click(function() {
				var h1 = $(this).clone(true);
				$("body").append(h1);
			});
		});
	</script>
</head>
<body>
	<h1>hello world</h1>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 3. 오후 3:19:01</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
	<table>
		<tr>
			<th>순번</th>
			<th>이름</th>
			<th>점수</th>
		</tr>
		<tr>
			<td>1</td>
			<td>가가가</td>
			<td>50</td>
		</tr>		
		<tr>
			<td>2</td>
			<td>나나가</td>
			<td>40</td>
		</tr>		
		<tr>
			<td>3</td>
			<td>다다다</td>
			<td>100</td>
		</tr>		
	</table>
	<input type="text" id="no">
	<input type="text" id="name">
	<input type="text" id="score">
	<button>등록</button>
	<!-- tr을 클릭했을 때, 이름과 점수를 alert -->
	<!-- 등록 버튼을 클릭하면 input에 있는 각 값을 table에 동적 추가 -->
	<script>
		$("table").on("click", "tr", function() { // 이벤트 위임. tr이 동적으로 생성됐으니깐 tr 위의 조상중에 변하지 않는 table에 걸고 on인자에 셀렉터 추가.
			var str = "";
			$(this).find("td").each(function(i) { // 자손태그를 찾음.
				str += $(this).text() + ","
			});
			alert(str);
		});
		
		$("button").on("click", function() {
			var str = "<tr>";
			$("input:text").each(function() {
				str += "<td>" + this.value + "</td>"; // input:text하나하나
				this.value = "";
			});
			str += "</tr>";
			
			$("table").append(str);
		});
	</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 (새창열림)

'자바스크립트' 카테고리의 다른 글

ajax 끝 21. 03. 05.  (0) 2021.03.05
jQuery 이벤트, ajax 21. 03. 04.  (0) 2021.03.05
브라우저 객체 모델 21. 03. 02  (0) 2021.03.02
속성과 메서드 21. 02. 26.  (0) 2021.03.02
Part 03. js 코어 라이브러리(Date, Array) 21. 02. 25.  (0) 2021.02.25

'자바스크립트' Related Articles

티스토리툴바