[jQuery 1-3] each·css·attr 메소드

임승현·2022년 11월 24일

jQuery

목록 보기
3/12

🐧each 메소드

◈ 선택자에 의해 다수의 태그가 검색되면 태그 갯수만큼 jQuery 객체를 생성하여 메소드 호출
→ 묵시적 반복 : 검색된 모든 태그를 jQuery 객체로 생성하여 메소드를 반복적으로 호출
→ 검색된 모든 태그에 동일한 기능 구현

$("h3").css("color","red");

//$("h3").eq(0).css("color","red");
//$("h3").eq(1).css("color","green");
//$("h3").eq(2).css("color","blue");
//$("h3").eq(3).css("color","orange");
//$("h3").eq(4).css("color","lime");

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
◈ 반복문을 사용하는 방법(비권장 : 어려움)

📌$(selector).size() : 선택자로 검색된 태그의 갯수를 반환하는 메소드

→ jQuery 3.0 이상부터는 length 프로퍼티를 이용하여 태그의 갯수를 제공받아 사용

var color=["red","green","blue","orange","lime"];
for(i=0;i<$("h3").length;i++) {//명시적 반복
	$("h3").eq(i).css("color",color[i]);
}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

📌$(selector).each(callback([index][,element])) : 선택자로 검색된 태그의 갯수만큼 콜백함수를 반복적으로 호출하는 메소드 - 명시적 반복

→ 콜백함수의 매개변수에는 검색되어 처리될 태그의 첨자와 태그의 Element 객체가 자동으로 저장되어 제공

var color=["red","green","blue","orange","lime"];
$("h3").each(function(i, element) {
	//$("h3").eq(i).css("color",color[i]);
	//선택자 대신 자바스크립트 객체를 사용하여 jQuery 객체를 반환받아 메소드 호출 가능
	$(element).css("color",color[i]);
	//this : 콜백함수에서 처리중인 태그의 Element 객체를 표현하기 위한 키워드
	//→ this : Element 객체, $(this) : jQuery 객체
	$(this).css("color",color[i]);
});

📃06_each.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
	<h1>each 메소드</h1>
	<hr>
	<h3>each 메소드 호출-1</h3>
	<h3>each 메소드 호출-2</h3>
	<h3>each 메소드 호출-3</h3>
	<h3>each 메소드 호출-4</h3>
	<h3>each 메소드 호출-5</h3>
	<script type="text/javascript">
	//선택자에 의해 다수의 태그가 검색되면 태그 갯수만큼 jQuery 객체를 생성하여 메소드 호출
	//→ 묵시적 반복 : 검색된 모든 태그를 jQuery 객체로 생성하여 메소드를 반복적으로 호출
	//→ 검색된 모든 태그에 동일한 기능 구현
	$("h3").css("color","red");
	//
	/*
	$("h3").eq(0).css("color","red");
	$("h3").eq(1).css("color","green");
	$("h3").eq(2).css("color","blue");
	$("h3").eq(3).css("color","orange");
	$("h3").eq(4).css("color","lime");
	*/
	/*
	//↑보다 간단하지만 비권장(어려움)
	var color=["red","green","blue","orange","lime"];
	//$(selector).size() : 선택자로 검색된 태그의 갯수를 반환하는 메소드
	//→ jQuery 3.0 이상부터는 length 프로퍼티를 이용하여 태그의 갯수를 제공받아 사용
	for(i=0;i<$("h3").length;i++) {//명시적 반복
		$("h3").eq(i).css("color",color[i]);
	}
	*/
	//↑보다 간단한 방법
	var color=["red","green","blue","orange","lime"];
	//$(selector).each(callback([index][,element])) : 선택자로 검색된 태그의 갯수만큼 콜백함수를 반복적으로 호출하는 메소드 - 명시적 반복
	//→ 콜백함수의 매개변수에는 검색되어 처리될 태그의 첨자와 태그의 Element 객체가 자동으로 저장되어 제공
	$("h3").each(function(i, element) {
		//$("h3").eq(i).css("color",color[i]);
		//
		//선택자 대신 자바스크립트 객체를 사용하여 jQuery 객체를 반환받아 메소드 호출 가능
		//$(element).css("color",color[i]);//↑랑 같은 결과
		//
		//this : 콜백함수에서 처리중인 태그의 Element 객체를 표현하기 위한 키워드
		//→ this : Element 객체, $(this) : jQuery 객체
		$(this).css("color",color[i]);//↑랑 같은 결과
	});
	</script>
</body>
</html>

🐧css 메소드

📌$(selector).css(name) : 검색 태그의 CSS 스타일 속성값을 반환하는 메소드

alert("결과 = "+$("#displayDiv").css("margin"));//결과 = 20px
alert("결과 = "+$("#displayDiv").css("padding"));//결과 = 10px
alert("결과 = "+$("#displayDiv").css("color"));//결과 = rgb(255, 0, 0)
alert("결과 = "+$("#displayDiv").css("border"));//결과 = 1px solid rgb(0, 0, 255)

◈ CSS 스타일 속성을 자바스크립트의 카멜표기법으로 표현하여 사용 가능

//alert("결과 = "+$("#displayDiv").css("font-size"));//결과 = 24px
alert("결과 = "+$("#displayDiv").css("fontSize"));//결과 = 24px
//alert("결과 = "+$("#displayDiv").css("text-align"));//결과 = center
alert("결과 = "+$("#displayDiv").css("textAlign"));//결과 = center

📌$(selector).css(name,value) : 검색 태그의 CSS 스타일 속성값을 변경하는 메소드

$("#displayDiv").css("width","50%");
$("#displayDiv").css("position","absolute");
$("#displayDiv").css("top","200px");
$("#displayDiv").css("left","100px");

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

🌠검색 태그에서 다수의 CSS 스타일을 변경할 경우 css 메소드의 매개변수에 JSON 형식의 Object 객체를 전달해 객체의 요소값으로 CSS 스타일 속성의 속성값 변경 가능

$("#displayDiv").css({"width":"50%","position":"absolute","top":"200px","left":"100px"});

📃07_css.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
#displayDiv {
	margin: 20px;
	padding: 10px;
	color: red;
	border: 1px solid blue;
	font-size: 1.5em;
	text-align: center;
}
</style>
</head>
<body>
	<h1>css 메소드</h1>
	<hr>
	<div id="displayDiv">CSS 스타일 관련 메소드</div>
	<script type="text/javascript">
	//$(selector).css(name) : 검색 태그의 CSS 스타일 속성값을 반환하는 메소드
	//alert("결과 = "+$("#displayDiv").css("margin"));//결과 = 20px
	//alert("결과 = "+$("#displayDiv").css("padding"));//결과 = 10px
	//alert("결과 = "+$("#displayDiv").css("color"));//결과 = rgb(255, 0, 0)
	//alert("결과 = "+$("#displayDiv").css("border"));//결과 = 1px solid rgb(0, 0, 255)
	//alert("결과 = "+$("#displayDiv").css("font-size"));//결과 = 24px
	//CSS 스타일 속성을 자바스크립트의 카멜표기법으로 표현하여 사용 가능
	//alert("결과 = "+$("#displayDiv").css("fontSize"));//결과 = 24px
	//alert("결과 = "+$("#displayDiv").css("text-align"));//결과 = center
	//alert("결과 = "+$("#displayDiv").css("textAlign"));//결과 = center
	//==============================================================================
	//$(selector).css(name,value) : 검색 태그의 CSS 스타일 속성값을 변경하는 메소드
	//$("#displayDiv").css("width","50%");
	//$("#displayDiv").css("position","absolute");
	//$("#displayDiv").css("top","200px");
	//$("#displayDiv").css("left","100px");
	//
	//↑를 object 객체로 전달
	//검색 태그에서 다수의 CSS 스타일을 변경할 경우 css 메소드의 매개변수에 JSON 형식의 Object 객체를 전달해 객체의 요소값으로 CSS 스타일 속성의 속성값 변경 가능
	$("#displayDiv").css({"width":"50%","position":"absolute","top":"200px","left":"100px"});
	</script>
</body>
</html>

🐧attr 메소드

📌$(selector).attr(name) : 검색된 태그의 태그 속성값을 반환하는 메소드

alert("결과 = "+$("#imgDiv").attr("data-value"));//결과 = KoalaImages


※ 카멜표기법으로 바꾸면 에러 발생

alert("결과 = "+$("#imgDiv").attr("dataValue"));

─────────────────────────────────────

alert("결과 = "+$("#img").attr("src"));//결과 = images/Koala.jpg

//$(selector).attr(name,value) : 검색된 태그의 태그 속성값을 변경하는 메소드
//$("#img").attr("src","images/Penguins.jpg");
//$("#img").attr("width","300");

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

🌠검색된 태그에서 다수의 태그 속성값을 변경할 경우 attr 메소드의 매개변수에 JSON 형식의 Object 객체를 전달해 객체의 요소값으로 태그 속성의 속성값 변경 가능

$("#img").attr({"src":"images/Penguins.jpg","width":"300"});

📃08_attr.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
	<h1>attr 메소드</h1>
	<hr>
	<div id="imgDiv" data-value="KoalaImages">
		<img alt="코알라" src="images/Koala.jpg" width="200" id="img">
	</div>
	<script type="text/javascript">
	//$(selector).attr(name) : 검색된 태그의 태그 속성값을 반환하는 메소드
	//alert("결과 = "+$("#imgDiv").attr("data-value"));//결과 = KoalaImage
	//alert("결과 = "+$("#imgDiv").attr("dataValue"));//카멜표기법으로 바꾸면 에러 발생
	//==============================================================================
	//alert("결과 = "+$("#img").attr("src"));//결과 = images/Koala.jpg
	//==============================================================================
	/*
	//$(selector).attr(name,value) : 검색된 태그의 태그 속성값을 변경하는 메소드
	$("#img").attr("src","images/Penguins.jpg");
	$("#img").attr("width","300");
	*/
	//
	//↑랑 같은 결과
	//검색된 태그에서 다수의 태그 속성값을 변경할 경우 attr 메소드의 매개변수에 JSON 형식의 Object 객체를 전달해 객체의 요소값으로 태그 속성의 속성값 변경 가능
	$("#img").attr({"src":"images/Penguins.jpg","width":"300"});
	//==============================================================================
	</script>
</body>
</html>

profile
임승현
이전 포스트

[jQuery 1-2] 선택자(Selector)

다음 포스트

[jQuery 2-1] text 메소드와 html 메소드

0개의 댓글