09009

[JQuery] 문서 객체 조작 본문

Front-End/JQuery
[JQuery] 문서 객체 조작
09009

속성 조작

jquery 라이브러리를 사용하여 문서 객체 속성을 조작할 때, attr() 메서드를 사용한다.

attr() 메서드 : 매개변수를 넣는 방법에 따라 속성을 지정하거나 추출 가능 (문서 객체의 속성 조작)

 

속성 추출

// img 태그의 src 속성 추출
var src = $('img').attr('src');

위와 같이 attr() 메서드에 매개변수를 하나 입력하면 해당 속성을 추출한다.

 jquery 라이브러리는 문서 객체 여러 개를 한 번에 선택한다. 

문서 객체 여러 개를 선택하고 속성을 추출하면, 첫 번째 문서 객체 속성을 추출한다.

 

 

문서 객체 속성 추출

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function() {
            // 속성을 추출합니다.
            var src = $('script').attr('src');

            // 출력합니다.
            alert(src);
        });
    </script>
</head>
<body>
 
</body>
</html>

위 소스코드는 jquery 라이브러리를 사용하여 script 태그를 선택하고 src 속성을 추출한 것이다.

script 태그가 2개 존재하므로 문서 객체 속성을 추출하면 먼저 등장하는 script 태그 속성을 추출하기 때문에 jquery 라이브러리

경로가 출력된다.

 

💻 출력 

 

속성 지정

문서 객체 속성은 세 가지 방법으로 지정할 수 있다.

아래 예시는 img 태그의 src 속성을 세 가지 방법으로 지정한 것이다.

1번 방법 : 속성 값을 입력하여 지정하는 방법, attr() 메서드의 첫번째 매개변수에 속성 이름을 입력하고 두번째 매개변수에 속성 값을 입력한다.

2번 방법: 객체를 입력하여 속성을 지정하는 방법, attr() 메서드의 매개변수에 객체를 넣는다.

3번 방법: 함수를 이용하여 속성을 지정하는 방법, attr() 메서드의 첫번째 매개변수에는 속성 이름을, 두번째 매개변수에는 함수를 입력한다.

 

1.  속성 값을 입력하여 속성 지정

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            // 속성을 지정합니다.
            $('img').attr('alt', 'jquery 라이브러리를 사용한 속성 지정');
            $('img').attr('src', 'http://placehold.it/100x100');
            $('img').attr('width', '100');
        });
    </script>
</head>
<body>
    <img>
    <img>
    <img>
</body>
</html>

jquery 함수를 사용하여 img 태그를 선택하고 alt, src, width 속성을 변경하였다. 

jquery 라이브러리를 사용하여 문서 객체를 선택하고 메서드를 실행하면 모든 문서 객체에 한 번에 적용된다.

 

💻 출력

 

2. 객체를 입력하여 속성 지정

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            // 속성을 지정합니다.
            $('img').attr( {
                alt: 'jquery 라이브러리를 사용한 속성 지정',
                src: 'http://placehold.it/100x100',
                width: 100
            });
        });
    </script>
</head>
<body>
    <img>
    <img>
    <img>
</body>

 

3. 함수를 이용하여 속성 지정

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            // 속성을 지정합니다.
            $('img').attr( {
                alt: 'jquery 라이브러리를 사용한 속성 지정',
                src: function (index) {
                    // 변수를 선언합니다.
                    var size = (index + 1) * 100;
                    // 반환합니다.
                    return 'http://placehold.it/' + size + 'x100';
                }
            });
        });
    </script>
</head>
<body>
    <img>
    <img>
    <img>
</body>
</html>

src 속성에 함수를 지정하면 콜백 함수에 index 객체가 순서대로 지정된다.

그리고 반환 값을 속성에 적용한다.

 

💻 출력

 

 

* 메서드 체이닝

jquery 라이브러리에서 문서 객체를 조작하는 메서드는 호출 이후에 자기 자신을 다시 반환한다.

→ $() 함수를 여러 번 사용하지 않아도 되고 아래 소스코드와 같이 메서드를 연속해서 사용이 가능함.

메서드 체이닝 적용 전

                                             ↓

메서드 체이닝 적용 후

스타일 조작

jquery 라이브러리를 사용하여 스타일을 조작할 때는 css() 메서드를 사용한다.

 

1.  속성 값을 입력하여 속성 지정

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <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>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

💻 출력 

소스코드를 실행하면 모든 .box 태그에 스타일이 적용되는 것을 확인할 수 있다.

 

2. 객체를 입력하여 속성 지정

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            // 속성을 지정합니다.
            $('.box').css({
                float: 'left',
                margin: 10,
                width: 100,
                height: 100,
                backgroundColor: 'red'
            });
        });
    </script>

</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

 

3. 함수를 이용하여 속성 지정

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <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>

💻 출력 

글자 조작

jquery 라이브러리로 문서 객체 내부의 글자를 조작할 때는 아래와 같은 메서드를 사용한다.

 

- 문서 객체 내부 글자 조작 메서드

html() 문서 객체 내부의 HTML 태그 조작 (HTML 태그로 해석)
text() 문서 객체 내부의 글자 조작 (문자열로 인식)

 

text() 메서드로 내부 글자 조작하기

- text() 메서드 사용: 일반 글자처럼 출력

- html() 메서드 사용: 글자에 태그가 적용됨

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <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>Son - 0</h1>
    <h1>Son - 1</h1>
</body>
</html>

💻 출력

 

 

html() 메서드로 내부 글자 조작하기

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            // 변수를 선언합니다.
            var text = $('h1').text();
            var html = $('h1').html();

            // 출력합니다.
            alert('text: ' + text);
            alert('html: ' + html);
        });
    </script>

</head>
<body>
    <h1>Son - 0</h1>
    <h1>Son - 1</h1>
</body>
</html>

💻 출력

text() 메서드는 선택된 모든 문서 객체의 글자를 추출한 반면 html() 메서드는 첫번째에 위치한 문서 객체의 글자를 추출하였다.

클래스 조작

클래스 하나를 추가하고 제거하는 데 attr() 메서드를 사용한다면 문자열 연산을 수행해야 하기 때문에 번거롭다. 

이러한 이유로 인하여 jquery 라이브러리는 클래스 조작 메서드를 아래와 같이 별도로 제공한다.

addClass() 클래스 추가
removeClass() 클래스 제거
toggleClass() 클래스 전환

 

* hover() 메서드

첫번째 매개변수에 마우스 커서를 올렸을 때 실행할 것을 입력하고, 두번째 매개변수에 마우스 커서를 내렸을 때

실행할 것을 입력한다.

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px; height: 100px;
            background-color: red;
        }
        #box.hover {
            background-color: blue;
            border-radius: 50px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            $('#box').hover(function() {
                // 스타일을 변경합니다.
                $('#box').addClass('hover');
            }, function() {
                // 스타일을 변경합니다.
                $('#box').removeClass('hover');
            });
        });
    </script>

</head>
<body>
    <div id="box"></div>
</body>
</html>

💻 출력

마우스 커서 올리기 전
마우스 커서 올린 후

'Front-End > JQuery' 카테고리의 다른 글

[JQuery] 무한 스크롤  (0) 2023.04.04
[JQuery] 문서 객체 생성과 추가  (0) 2023.04.04
[JQuery] 시각 효과  (0) 2023.04.04
[JQuery] 이벤트  (0) 2023.04.04
[JQuery] 문서 객체 선택  (0) 2023.04.03
'Front-End/JQuery' Related Articles more
Comments