단순 코드 기록/jQuery

jQuery_CDN+Arr+List

일일일코_장민기 2024. 2. 14. 16:55
728x90
외부파일 사용
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

 

외부파일 사용(브라우저)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

Arr

 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">
	//.css(속성이름, 속성값)
	$(
		function(){
			$("*").css("color","red");
			//=document.getElementsByTagName().style="color:red;"
	
			console.log($("#test").val());
			//=console.log(document.getElementById("test"))	//혼용 가능
			
			console.log($(".testC"));
			
			console.log($(".testC:eq(0)").val());		//testC의 첫 번째 클래스의 value
			console.log($(".testC").eq(0));				//testC의 첫 번째 클래스의 배열
			console.log($(".testC").eq(0)[0]);			//testC의 첫 번째 클래스의 배열의 첫 번째(태그 출력)

			console.log($(".testC").eq(0).val());		//testC의 첫 번째 클래스의 배열의 value
			console.log($(".testC").eq(0)[0].value);	//testC의 첫 번째 클래스의 배열의 첫 번째(태그 출력)의 value

			console.log($(".testC"));					//배열
			console.log($(".testC")[0]);				//태그
			console.log($(".testC")[0].value);			//태그의 value
			
			console.log($("h2"));						//배열
			console.log($("h2").text());				//배열의 첫 번째의 innerText
				
			console.log($("div").text());				//배열의 첫 번째의 innerText
			console.log($("div").html());				//배열의 첫 번재의 innerHTML

	})
	
</script>


</head>
<body>

<input type="text" id="test" value="value값">
<input type="text" class="testC" value="value값A">
<input type="text" class="testC" value="value값B">

<p><h2>메세지</h2></p>
<p><div><h5>메세지2</h5></div></p>





</body>
</html>

 

List

 

<!DOCTYPE html>
<html>

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

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>



	<script type="text/javascript">

		$(
			function () {

				var arr = $("li")
					.map(function (i, e) {
						console.log(
							"this", this,							//li의 tag
							"tag", e,								//li의 tag
							"tag.innerText", e.innerText,			//li의 innerText
							"$(tag).text()", $(this).text());		//li의 innerText
						return $(this).text().toLowerCase();		//fn의 배열(각 li의 innerText와 개행 여부)
					})
				console.log(arr)

			});

	</script>

</head>

<body>

	<p>Hello</p>
	<ul>
		<li>A1</li>
		<li>A2</li>
		<li>A3
			<ul>
				<li>B1</li>
				<li>B2</li>
				<li>B3</li>
			</ul>
		</li>
		<li>A4</li>
	</ul>

</body>

</html>