each 메소드
$(selector).each(callback([index][, element]))
each 메소드는 선택자로 검색된 태그의 갯수만큼 콜백함수를 반복적으로 호출하는 메소드이다. (명시적 반복)
콜백함수의 매개변수에는 검색된 태그의 첨자와 태그의 Node(Element) 객체가 자동으로 저장되어 사용이 가능하다.
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/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>
</body>
</html>
선택자에 의해 다수의 태그가 검색되면 태그의 갯수만큼 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 이상부터는 size 메소드를 사용할 수 없으므로 대신 length 프로퍼티를 사용하여 태그의 갯수를 제공받아 사용한다.
var color=["red", "green", "blue", "orange", "lime"];
for(i=0;i<$("h3").length;i++) {
$("h3").eq(i).css("color", color[i]);
}
이처럼 jQuery 버전에 따라 사용할 수 있는 메소드가 달라질 수 있다. 또한 버전에 따라 메소드의 기능이 다른 경우도 존재한다.
each 메소드 사용해 다수의 태그 구분해 메소드 호출
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 : 콜백함수에서 처리중인 태그의 Node(Element) 객체를 표현하기 위한 키워드
// => this : 자바스크립트 객체(Element 객체), $(this) : jQuery 객체
$(this).css("color", color[i]);
})
CSS 관련 메소드
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
#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>
</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) - 색상은 rgb 단위로 표현
alert("결과 = "+$("#displayDiv").css("border"));//결과 = 1.25px solid rgb(0, 0, 255)
alert("결과 = "+$("#displayDiv").css("font-size"));//결과 = 24px - 크기는 모두 px 단위로 표현
CSS 스타일 속성을 자바스크립트의 카멜표기법으로 표현하여 사용이 가능하다.
alert("결과 = "+$("#displayDiv").css("fontSize"));//결과 = 24px
alert("결과 = "+$("#displayDiv").css("text-align"));//결과 = center
alert("결과 = "+$("#displayDiv").css("textAlign"));//결과 = center
css 메소드의 두번째 기능은 선택자로 검색된 태그의 CSS 스타일 속성값을 변경해주는 것이다.
$(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"})
attr 메소드
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>attr 메소드</h1>
<hr>
<div id="imgDiv" data-value="KoalaImage">
<img alt="코알라" src="images/Koala.jpg" width="200" id="img">
</div>
</body>
</html>
$(selector).attr(name) : 선택자로 검색된 태그의 속성값을 반환하는 메소드
alert("결과 = "+$("#imgDiv").attr("data-value"));//결과 = KoalaImage
alert("결과 = "+$("#img").attr("src"));//결과 = images/Koala.jpg
$(selector).attr(name, value) : 선택자로 검색된 태그의 속성값을 변경하는 메소드
$("#img").attr("src", "images/Penguins.jpg"); //펭귄 이미지로 변경
$("#img").attr("width", "300");
검색된 태그의 CSS 스타일 속성값을 여러개 변경할 경우 attr 메소드의 매개변수에 JSON 형식으로 표현된 Object 객체를 전달하여 Object 객체의 속성값으로 태그의 속성값 변경이 가능하다.
$("#img").attr({"src":"images/Penguins.jpg", "width":"300"});
text 메소드
[html] 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>text 메소드</h1>
<hr>
<div id="displayDiv"><p>text 메소드와 html 메소드 활용</p></div>
<hr>
<h3>jQuery 메소드 연습</h3>
<h3>jQuery 메소드 연습</h3>
<h3>jQuery 메소드 연습</h3>
<h3>jQuery 메소드 연습</h3>
<h3>jQuery 메소드 연습</h3>
</body>
</html>
$(selector).text()
: 선택자로 검색된 태그의 내용을 반환하는 메소드이다. HTML 태그를 제외한 태그 내용을 반환한다.
alert("결과 = "+$("#displayDiv").text());//결과 = text 메소드와 html 메소드 활용
$(selector).html()
: 선택자로 검색된 태그의 내용을 반환하는 메소드이다. HTML 태그를 포함한 태그 내용을 반환한다.
alert("결과 = "+$("#displayDiv").html());//결과 = <p>text 메소드와 html 메소드 활용</p>$(selector).text(value)
: 선택자로 검색된 태그의 내용을 변경하는 메소드이다. 매개변수에 전달된 변경값에 포함된 HTML 태그가 문자값으로 처리되어 태그 내용이 변경된다.
$("#displayDiv").text("<p style='color: red'>text() 메소드에 의해 태그 내용 변경</p>");
$(selector).html(value)
: 선택자로 검색된 태그의 내용을 변경하는 메소드이다. 매개변수에 전달된 변경값에 포함된 HTML 태그가 HTML 태그로 처리되어 태그 내용이 변경된다.
$("#displayDiv").html("<p style='color: red'>text() 메소드에 의해 태그 내용 변경</p>");
text() 메소드 또는 html() 메소드의 매개변수에 문자값을 반환하는 콜백함수를 전달하여 호출이 가능하다.
→ 콜백함수는 검색된 태그의 갯수만큼 반복 호출된다. - 명시적 반복
→ 콜백함수는 반드시 문자값을 반환해야 하며 반환되는 문자값으로 검색된 태그의 내용을 변경할 수 있다.
→ 콜백함수의 매개변수에는 검색 태그의 첨자와 태그내용을 전달받아 콜백함수에서 사용이 가능하다.
예시1)
$("h3").text(function(index, content) {
return "jQuery 메소드 연습 - 변경"; //똑같은 값으로 변경
});
예시2)
$("h3").text(function(index, content) {
return "jQuery 메소드 연습 - "+(index+1);
});
예시3)
$("h3").text(function(index, content) {
return content+ " - "+(index+1);
});
'학원 > 복기' 카테고리의 다른 글
| [jQuery] Event Handle (0) | 2023.06.13 |
|---|---|
| [jQuery] 태그의 추가와 삭제 / 이동 (0) | 2023.06.12 |
| [jQuery] 선택자(Selector) (0) | 2023.06.12 |
| [jQuery] jQuery란? / jQuery 라이브러리 이용법 (0) | 2023.06.12 |
| [JavaScript] 쿠키(Cookie) (0) | 2023.06.11 |
