jQuery 문서 객체 조작

jQuery 라이브러리를 사용하면 문서 객체도 쉽게 조작할 수 있습니다. 문서 객체를 조작하는 메소드의 사용 방법은 비슷하므로 속성 조작 메소드 위주로 설명합니다. 속성 조작 내용을 주의 깊게 살펴봅니다.

3.1 속성 조작

jQuery 라이브러리르 사용해서 문서 객체의 속성을 조작할 때는 attr() 메소드를 사용합니다. attr()메소드는 매개 변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있습니다.

[표 11-1] 문서 객체의 속성 조작 메소드

메소드	설명
attr()	문서 객체의 속성 조작

속성 추출

다음 코드처럼 attr() 메소드에 매개 변수르 ㄹ하나 입력하면 해다 ㅇ속성을 추출합니다. 앞에서 설명했듯이 jQuery 라이브러리는 문서 객체 여러 개를 한 번에 선택합니다. 여러 개의 문서 객체를 선택하고 속성을 추출하면, 첫 번재 문서 객체의 속성을 추출합니다.

// img 태그의 src 속성을 추출합니다.

var src = $('img').attr('src');

기본 예제 11-3 문서 객체 속성 추출

다음 코드는 jQuery 라이브러리를 사용해 script 태그를 선택하고 src 속성을 추출합니다. 2개의 script 태그가 있으므로 문서 객체의 속성을 추출하면, 먼저 등장하는 script 태그의 속성을 추출합니다. 따라서 jQuery 라이브러리의 경로가 출력됩니다.

[코드 11-3] 문서 객체 속성 추출

<!DOCTYPE html>

<html>

<head>

</script>

// 이벤트를 연결합니다.

$(document).ready(function () {

// 속성을 추출합니다.

var src = $('script').attr('src');

// 출력합니다.

alert(src);

});

</script>

</head>

<body>

</body>

</html>

속성 지정

문서 객체의 속성은 세가지 방법으로 지정할 수있습니다. 첫 번째 방법은 첫 번째 매개 변수에 속성 이름을 입력하고, 두 번째 매개 변수에 속성 값을 입력하는 것입니다.

// img 태그의 src 속성을 지정합니다.

$('img').attrA('src', 'http://placehold.it/300x200');

두 번째 방법은 attr() 메소드의 매개 변수에 객체를 넣어 속성을 조작하는 것입니다.

// img 태그의 속성을 지정합니다.

$('img').attr({

src: 'http://placehold.it/300x200',

width: 300,

height: 200

});

마지막으로 다음 코드처럼 첫 번째 매개 변수에는 속성 이름을 입력하고, 두 번째 매개변수에는 함수를 입력할 수 있습니다. 두 번ㅇ째 매개 변수에 함수를 입력하면 해당 콜백 함수의 매개 변수로 문서 객체의 인덱스를 차례대로 전달합니다.

$('img').attr('src', function (index) {

// 변수를 선언합니다.

var size = (index + 1) * 100;

// 반환합니다.

return 'http;//placehold.it/' + size + 'x100';

});

간단한 내용이므로 바로 예제를 살펴보겠습니다.

기본 예제 11-4 문서 객체 속성 조작

1. 속성 값을 입력해 속성 지정하기

다음 코드는 attr() 메소드를 사용해 문서 객체의 속성을 지정하는 첫 번재 방법입니다. jQuery 함수를 사용해 img 태그를 선택하고 alt 속성, src 속성, width 속성을 변경합니다. jQuery 라이브러리르 사용해 문서 객체를 선택하고 메소드를 실행하면 모든 문서 객체에 한 번에 접용된다는 것을 기억합니다.

[코드 11-4] 문서 객체 속성 조작(1)

<!DOCTYPE html>

<html>

<head>

<title>jQuery Basic</title>

</script>

// 이벤트를 연결합니다.

$(document).ready(function () {

// 속성을 지정합니다.

$('img').attr('alt', 'jQuery 라이브러리를 사용한 속성 지정');

$('img').attr('src', 'http:/placehold.it/100x100');

$('img').attr('width', '100');

});

</script>

</head>

<body>

<img />

</body>

</html>

2. 객체를 입력해 속성 지정하기 다음 코드는 attr() 메소드를 사용해 문서 객체의 속성을 지정하는 두 번재 방법입니다. 코드를 실행하면 첫 번째 방법과 같은 결과가 출력됩니다.

[코드 11-5] 문서 객체 속성 조작(2)

// 이벤트를 연결합니다.

$(document).ready(function () {

// 속성을 지정합니다.

$('img').attr({

alt: 'jQuery 라이브러리르 사용한 속서 ㅇ지정',

src: 'http://placehold.it/100x100',

width: 100

});

</script>

3. 함수를 입력해 속성 지정하기

다음 코드는 attr() 메소드를 사용해 문서 객체의 속성을 지정하는 세 번째 방법입니다. src 속성에 함수를 지정하면 콜백 함수에 index 객체가 순서대로 지정되고 반환 값을 속성에 적용합니다. 콜백 함수가 호출될 수록 가로 길이가 깁니다.

[코드 11-6] 문서 객체 속성 조작(3)

// 이벤트를 연결합니다.

$(document).ready(fucntion () {

// 속성을 지정합니다.

$('img').attr({

alt: 'jQuery 라이브러리를 사용한 속성 지정',

src: function (index) {

// 변수를 선언합니다.

var size = (index + 1) * 100;

// 반환합니다.

return 'http://placehold.it/' + size + 'x100';

}

});

</script>

NOTE_ 메소드 체이닝

jQuery 라이브러리에서 문서 객체를 조작하는 메소드는 호출 이후에 자기 자신을 다시 반환합니다. 따라서 script 태그를 여러 번 사용할 필요 없이 [코드 11-7]처럼 메소드를 연속해서 사용할 수 있습니다. 이렇게 메소드를 사용하는 것을 메소드 체이닝(Method Chaining)이라고 합니다. 메소드 체이닝은 jQuery 라이브러리 뿐만 아니라 모든 곳에서 사용하므로 기억하기 바랍니다.

[코드 11-7] 메소드 체이닝

// 이벤트를 연결합니다.

$(document).ready(function () {

// 속성을 지정합니다.

$('img').attr('alt', 'jQuery 라이브러리를 사용한 속성 지정')

.attr('src', 'http://placehold.it/100x100').attr('width', '100');

});

</script>

3.2 스타일 조작

jQuery 라이브러리를 사용해 스타일을 조작할 때는 css() 메소드를 사용합니다.

[표 11-2] 문서 객체 스타일 조작 메소드

메소드	설명
css()	문서 객체의 스타일 속성 조작

css() 메소드는 attr() 메소드와 같은 방법으로 사용합니다. 하지만 속성과 달리 하이픈(-)이 들어가는 스타일 속성은 다음 두 가지 방법으로 입력해야 합니다.

① $('body').css('backgroundColor');

② $('body').css('background-Color');

기본 예제 11-5 문서 객체 스타일 조작

1. 속성 값을 입력해 속성 지정하기

css() 메소드의 두 번째 매개 변수에 속성 값을 입력해 태그의 슽아일 속성을 조작해 봅시다. 코드를 실행하면 모든 .box 태그에 스타일이 적용됩니다.

[코드 11-8] 문서 객체 스타일 조작(1)

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function () {

// 스타일을 적용합니다.

$('box').css('float', 'left');

$('box').css('margin', 10);

$('box').css('width', 100);

$('box').css('height', 100);

$('box').css('backgroundColor', 'red');

});

</script>

</head>

<body>

</body>

</html>

2. 객체를 입력해 속서 ㅇ지정하기

css() 메소드의 매개 변수에 객체를 넣은 후 코드 형태로도 스타일을 조작할 수 있습니다. 실행 결과는 [코드 11-8]과 같습니다.

[코드 11-9] 문서 객체 스타일 조작(2)

<!DOCTYPE html>

<html>

<head>

$(document).ready(function () {

// 스타일을 적용합니다.

$('box').css({

float: 'left',

margin: 10,

width: 100,

height: 100,

backgroundColor: 'red'

});

</script>

</head>

<body>

</body>

</html>

3. 함수를 입력해 속성 지정하기

속성을 좆가하는 세 번째 방법과 마찬가지로 다음 코드처럼 함수를 입력해 스타일을 조작할 수 있습니다.

[코드 11-10] 문서 객체 스타일 조작(3)

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function () {

// 문서 객체를 추가합니다.

var output = '';

for (var i = 0; i < 256; i++) {

output += '<div></div>';

}

document.body.innerHTML = output;

// 스타일을 적용합니다.

$('div').css({

height: 2,

backgroundColor: function (i) {

return 'rgb(' + i + ',' + i + ',' + i + ')';

}

});

</script>

</head>

<body>

</body>

</html>

3.3 글자 조작

jQuery 라이브러리로 문서 객체 내부의 글자를 조작할 때는 [표 11-3]의 메소드를 사용합니다.

[표 11-3] 문서 객체 내부 글자 조작 메소드

메소드	설명
html()	문서 객체 내부의 HTML 태그 조작
text()	문서 객체 내부의 글자 조작

이전 장에서 배운 innerHTML 속성과 textContent 속성을 기억하고 있다면 메소드가 왜 2개인지 이해할 수 있을 것입니다.

기본 예제 11-6 문서 객체 글자 변경

1. text() 메소드로 내부 글자 변경하기

다음 코드를 실행하기 전에 실행 결과를 미리 예측해 보세요. 예측한 결과가 맞았나요? html() 메소드를 사용하면 태그가 적용되지만, text() 메소드를 사용하면 일반 글자처럼 출력됩니다.

[코드 11-11] 문서 객체 내부 글자 조작(1)

<!DOCYTPE html>

<html>

<head>

</script>

$(document).ready(function () {

// 내부 글자를 변경합니다.

$('h1:nth-child(1)').text('<a href="#">text()</a>');

$('h1:nth-child(2)').html('<a href="#">html()</a>');

});

</script>

</head>

<body>

<h1>Header - 0</h1>

<h1>Header - 1</h1>

</body>

</html>

2. html() 메소드로 내부 글자 변경하기

다음 코드를 작성하고 실행합니다. text() 메소드를 사용해 글자를 추출하면 선택된 모든 문서 객체의 글자를 추출합니다. 반면 html() 메소드는 지금까지 살펴본 메소드처럼 첫 번재에 위치한 문서 객체의 글자를 추출합니다. 실행 결과를 예측해 보세요.

[코드 11-12] 문서 객체 내부 글자 조작(2)

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function () {

// 변수를 선언합니다.

var text = $('h1').text();

var html = $('h1').html();

// 출력합니다.

alert("text: " + text);

alert("html: " + html);

});

</script>

</head>

<body>

<h1>Header - 0</h1>

<h1>Header - 1</h1>

</body>

</html>

3.4 클래스 조작

다음 코드처럼 띄어쓰기로 구분해 문서 객체의 class 속성 값을 여러 개 입력할 수 있습니다.

<p class="bold big italick">Lorem ipsum dolor amet</p>

클래스 하나를 추가하고 제거하는 데 attr() 메소드를 사용한다면 문자열 연산을 수행해야 하므로 번거롭습니다. jQuery 라이브러리는 이러한 귀찮은 일을 줄이고자 클래스 조작 메소드를 별도로 제공합니다. 클래스를 조작할 때는 [표11-4]의 메소드를 사용합니다.

[표 11-4] 클래스 조작 메소드

메소드	설명
addClass()	클래스 추가
RemoveClass()	클래스 제거
toggleClass()	클래스 전환

addClass() 메소드는 클래스를 추가하고, removeClass() 메소드는 클래스를 제거합니다. 마지막으로 toggleClass() 메소드는 클래스가 있으면 제거하고 없으면 추가합니다.

기본 예제 11-7 클래스 조작

간단한 메소드이므로 바로 코드를 작성해 보겠습니다. 다음 코드에서는 아직 배우지 안은 hover() 메소드를 사용했습니다. hover()메소드는 첫 번째 매개 변수에 마우스 커서를 올렸을 때 실행할 것을 입력하고, 두 번재 매개 변수에 마우스 커서를 내렸을 때 실행할 것을 입력합니다. 코드를 실행하고 마우스 커서를 div 태그로 만든 도형 위에 올리거나 내리면 class 속성이 바뀌어 모양이 변형됩니다.

[코드 11-13] 클래스 속성 조작

<!DOCTYPE html>

<html>

<head>

<title>jQuery Basic</title>

<style>

#box {

width: 100px; height: 100px;

background-color: red;

}

#box.hover {

background-color: blue;

border-radius: 50px;

}

</style>

</script>

$(document).ready(function () {

%('#box').hover(function () {

// 스타일을 변경합니다.

$('#box').addClass('hover');

}, function () {

// 스타일을 변경합니다.

$('#box').removeClass('hover');

});

</script>

</head>

<body>

</body>

</html>

jQuery 라이브러리를 사용해 문서 객체를 조작하는 방법을 알아보았습니다. 간단하면서 자주 사용하는 내용이므로 반드시 기억해 주세요!

'프로그래밍 > Javascript' 카테고리의 다른 글

jQuery 효과 (0)	2017.08.17
jQuery 이벤트 (0)	2017.08.16
jQuery 문서 객체 선택 (0)	2017.08.14
jQuery 라이브러리 설정 (0)	2017.08.14
문서 객체 모델 - 이벤트 (0)	2017.08.11

TAGS.

호기심 많은 개발자의 보물창고

호기심 많은 개발자의 보물창고

호기심 많은 개발자의 보물창고

호기심 많은 개발자의 보물창고

블로그소개

블로그소개

블로그소개

Brand Information

호기심 많은 개발자의 보물창고