yongyong-e
[jQuery] 문서 객체 다루기 - 1 본문
0) 개요
jQuery의 css, attr, html, text 함수에 대한 정리
1) css 함수
1. (문자열, 문자열) 형태
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
// 1. Setter
$("h1").css("color", "red")
// 2. Getter
var value = $("h1").css("color")
alert(value)
</script>
</body>
</html>
추가적으로 아래 처럼 함수를 사용하여 태그를 리스트로 가져와 사용할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<script>
// 1. Setter
var colors = ["red", "green", "blue"]
$("h1").css("color", function (index) {
return colors[index]
})
// 2. Getter - 일반적으로 첫 번째 태그의 요소만 가져옴
var value = $("h1").css("color")
alert(value)
</script>
</body>
</html>
2. (객체) 형태
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
$("h1").css({
"color": "red",
"background-color": "black",
"text-align": "center"
})
<!-- $("h1").css({
color: "red",
backgroundColor: "black",
textAlign: "center"
}) -->
</script>
</body>
</html>
추가적으로 아래 처럼 함수를 사용하여 태그를 리스트로 가져와 사용할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<script>
var colors = ["red", "green", "blue"]
$("h1").css({
"color": function (index) { return colors[index] }
})
</script>
</body>
</html>
2) attr 함수
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<img />
<img />
<img />
<script>
// 1. Setter
$("img").attr("src", "http://placehold.it/100x100")
$("img").attr({
"src": "http://placehold.it/100x100",
"alt": "test image"
})
$("img").attr({
"src": function (index) {
return "http://placehold.it/100x" + ((index + 1) * 100)
}
})
// 2. Getter
var value = $("img").attr("src")
alert(value)
</script>
</body>
</html>
3) html 함수
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h2></h2>
<h2></h2>
<h2></h2>
<script>
// 1. Setter
$("h2").html("<img src='http://placehold.it/100x100' />Hello World")
// 2. Getter
var value = $("h2").html()
alert(value)
</script>
</body>
</html>
결과
4) text 함수
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h2></h2>
<h2></h2>
<h2></h2>
<script>
// 1. Setter
$("h2").text("<img src='http://placehold.it/100x100' />Hello World")
// 2. Getter - css 함수와는 다르게 모든 태그를 출력함
var value = $("h2").text()
alert(value)
</script>
</body>
</html>
결과
'웹 프로그래밍 > jQuery' 카테고리의 다른 글
[jQuery] 이벤트 연결하기 (0) | 2019.09.05 |
---|---|
[jQuery] 문서 객체 다루기 - 3 (0) | 2019.09.04 |
[jQuery] 문서 객체 다루기 - 2 (0) | 2019.09.04 |
[jQuery] 문서 객체 생성 방법 (0) | 2019.09.04 |
[jQuery] 라이브러리 사용 설정 (0) | 2019.09.04 |
Comments