본문 바로가기
웹언어/jQuery

[jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디

OSSAM 2021. 6. 24. 16:50
728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 제이쿼리 메서드 문법

## 기초적 문법

$('문서객체선택자').메서드명();

- 제이쿼리 문법은 속성을 사용하는 방식은 거의 없습니다.

- 대부분 메서드화시켜서 위에서 보이는 대로 작성합니다.

- 하지만 메서드 ( )괄호 안에 매개변수를 어떻게 작성하는지 나뉘기 때문에 이번 시간에는 메서드 문법을 보도록 하겠습니다.

 

 

 

 

 

 

 

1) 메서드 문법 정리

문법유형 예시
매개변수가 없는 유형 $('선택자').메서드명( );
매개변수가 한개인 유형 $('선택자').메서드명(값);
매개변수가 함수인 유형 $('선택자').메서드명(function( ){

});
매개변수가 여러개인 유형 $('선택자').메서드명(값1,값2,...);
매개변수가 객체방식인 유형 $('선택자').메서드명({
    옵션: 값,
    옵션: 값
});

- 위와 같이 5개로 분류해서 볼 수 있습니다.

- 하지만 한개의 메서드가 저 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 저 중 여러개 유형을 선택해서 사용합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

 

 

 

 

 

 

 

 

 

 

 

 

2. html( ) 메서드를 활용한 문법 확인

- html메서드는 문서객체의 텍스트 컨텐츠를 컨트롤하는 메서드입니다.

- 이 메서드는 위에서 말했던 문법의 3가지 활용합니다.

- 함께 활용하면서 메서드 문법에 익숙해져 보도록 하겠습니다.

 

 

 

 

 

1) 매개변수가 없는 유형

- html메서드를 매개변수 없이 사용하면 그 문서객체의 텍스트컨텐츠를 얻어옵니다.

- 이러한 형태의 메서드를 게터라고 부릅니다.

- 게터(getOO)메서드는 객체의 값을 얻어오는 메서드를 의미합니다.

- 세터(setOO)메서드는 객체의 값을 변경하는 메서드를 의미합니다.

- 자바스크립트는 게터와 세터앞에 get과 set을 붙여 구분하지만 제이쿼리는 한 메서드로 게터세터를 같이 사용합니다.

 

## 문법

$('선택자').html();

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //문서객체의 텍스트를 담는 변수
                var text = $('h1').html();

                alert(text);
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

 

 

## 코드 결과

- 경고창에 h1태그가 담고 있던 제목태그라는 텍스트컨텐츠를 잘 반환하는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

2) 매개변수가 한개인 유형

- 이번에는 매개변수가 한개인 유형입니다.

- 매개변수에 적은 값으로 텍스트컨텐츠를 변경시키는 세터형 메서드입니다.

 

## 문법

$('선택자').html('변경할텍스트');

 

 

## 코드 예시

- [제목태그]를 [Title Tag]로 영어로 변경해보겠습니다. 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('h1').html('Title Tag');
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

 

 

## 코드 결과

- 전부 변경된 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

3) 매개변수가 콜백함수인 유형1

- 이번에는 매개변수가 콜백함수인 유형입니다.

- 콜백함수에도 매개변수를 작성하여 배열된 객체를 각각 변경할 수 있습니다.

 

## 문법

$('선택자').html(function(index){
	//반환할 값 작성
});

- 여기서 콜백함수의 매개변수로 작성한 index는 문서객체들의 배열번호를 의미합니다.

- index는 영어를 무엇을 쓰더라도 관계 없습니다. [i]라고 적어도 되고, [a]라고 적어도 됩니다.

- 단, html메서드의 콜백함수에 첫번째 쓰는 매개변수는 문서객체들의 배열번호를 의미합니다.

 

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('h1').html(function(index){
                    return 'Title Tag ' + (index + 1);
                });
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

- h1태그의 글자를 각각 [Title Tag]로 변경할 것인데, 뒤에 번호를 붙여주려 합니다.

- 이때 문서객체의 배열번호는 0번부터 시작하기 때문에 (index + 1)을 처리해줬습니다.

 

 

## 코드 결과

 

 

 

 

 

 

 

 

 

4) 매개변수가 콜백함수인 유형2

- 이번에도 매개변수가 콜백함수인 유형입니다.

- 이번에는 콜백함수의 매개변수를 2개 넣어서 사용해보겠습니다.

 

## 문법

$('선택자').html(function(index,text){
	//반환할 값 지정
})

- 앞에 쓴 [index]는 문서객체들의 배열번호를 의미합니다.

- 뒤에 쓴 [text]는 문서객체들의 기존 텍스트를 의미합니다. 여기서는 [제목태그]를 반환합니다.

- text라는 영어는 역시 임의적으로 작성한 것입니다. 영어는 중요하지 않고 두번째 쓴 매개변수는 기존 텍스트를 의미하는 점이 중요합니다.

 

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('h1').html(function(index,text){
                    return text + (index + 1);
                });
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

 

 

## 코드 결과

- 기존 텍스트는 [제목태그]도 처리하고, index번호를 이용한 숫자도 결과로 처리되는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. css( ) 메서드를 활용한 문법 확인

- css메서드는 문서객체의 스타일을 컨트롤하는 메서드입니다.

- 이 메서드는 위에서 말했던 문법의 4가지 활용합니다.

- 함께 활용하면서 메서드 문법에 익숙해져 보도록 하겠습니다.

 

 

 

 

 

 

 

1) 매개변수가 한개인 유형

- css메서드는 매개변수가 한개인 것이 게터인 유형입니다.

- css는 스타일을 컨트롤하는 메서드이기 때문에 다양한 css속성을 갖고 있기 때문입니다.

- 게터는 배열된 객체인 경우는 첫번째 요소의 값을 가져옵니다.

 

## 문법

$('선택자').css('CSS속성명');

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                var color = $('h1').css('color');

                alert(color);
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

 

 

## 코드 결과

- 검정색으로 잘 반환되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

2) 매개변수가 두개인 유형

- css메서드는 매개변수가 두개인 것이 세터인 유형입니다.

- CSS속성 한개를 바꿉니다.

 

## 문법

$('선택자').css('CSS속성명',값);

- 값은 숫자일수도 문자일수도 있어서 따옴표처리하지 않았습니다.

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('h1').css('color','red');
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

 

 

## 코드 결과

 

 

 

 

 

 

 

 

 

 

 

 

3) 매개변수가 객체인 유형

- css메서드는 CSS속성을 컨트롤하기 때문에 여러 개의 CSS속성을 바꿀 수도 있습니다.

- 그래서 객체방식을 사용해서, 글자색은 무엇으로 변경, 배경색은 무엇으로 변경, 이런식으로 변경해줘야합니다.

 

## 문법

$('선택자').css({
	CSS속성명: 값,
        CSS속성명: 값
})

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('h1').css({
                    backgroundColor: 'black',
                    color: 'yellow'
                });
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

- 배경색은 검정색으로, 글자색은 노란색으로 변경했습니다. 

 

 

 

## 코드 결과

 

 

 

 

 

 

 

 

 

 

 

 

4) 매개변수가 함수인 유형

- 문서객체가 배열(나열)되어 있을때 각각의 CSS속성을 다르게 주고 싶을 때 사용합니다. 

 

## 문법

$('선택자').css('CSS속성명',function(index){
	//반환값 지정
});

- 콜백함수의 [ index ]라는 매개변수는 문서객체의 배열번호를 의미합니다. 이때 영문은 무엇이든 상관없습니다. 첫번째 작성된 매개변수는 무조건 배열번호를 의미합니다.

 

 

 

 

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('h1').css('fontSize',function(index){
                    return (index + 1) * 10; 
                });
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

- index번호는 0번부터 시작하기 때문에 더하기 1을 해주었습니다.

- 차례대로 10px, 20px, 30px로 글자크기를 지정하기 위해서 입니다.

 

 

 

## 코드 결과

- 차례대로 커진 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

5) 매개변수가 객체와 함수를 같이 사용하는 유형

- 속성도 여러개 변경하고 싶고, 배열된 것을 다르게 적용하고 싶을 때 사용하면 됩니다.

 

## 문법

$('선택자').css({
	CSS속성명1: 값,
    CSS속성명2: function(index){
    	//반환할 값
    }
}

 

 

 

## 코드 예시

- 이번에는 배경색은 모두 검정색, 글자색은 각각 빨강, 녹색, 파랑으로 지정해보겠습니다. 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - 메서드 문법</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                var c = ['red','green','blue'];

                $('h1').css({
                    backgroundColor: 'black',
                    color: function(index){
                        return c[index];
                    }
                });
            });
        </script>
    </head>
    <body>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
        <h1>제목태그</h1>
    </body>
</html>

 

 

## 코드 결과

 

 

 

 

 

 

 

 

 

** 마치며,

대부분의 메서드 사용법은 이런식으로 처리됩니다.

하지만 모든 메서드들이 이렇게 다양하게 사용되지는 않습니다.

어떤 메서드는 매개변수 없이만 사용되고, 어떤 메서드는 매개변수를 한개만 사용합니다.

앞으로 메서드들을 정리하면서 더 디테일하게 보도록 하겠습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹언어 > jQuery' 카테고리의 다른 글

[jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드  (0) 2021.06.29
[jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디  (0) 2021.06.26
[jQuery강좌] 3강 제이쿼리 문서객체 선택자 - 오쌤의 니가스터디  (0) 2021.06.22
[jQuery강좌] 2강 제이쿼리 준비구문 - 오쌤의 니가스터디  (0) 2021.06.22
[jQuery강좌] 1강 제이쿼리 플러그인 설치 - 오쌤의 니가스터디  (0) 2021.06.21

'웹언어/jQuery' Related Articles

티스토리툴바