티스토리 뷰

[JQUERY]자바스크립트

jQuery 027. 텍스트 값 가져오기 text()

가산동 2018. 10. 19. 01:06

이번 글에서는 text()에 대해서 알아보겠습니다. text()는 여러 태그 사이에 들어가는 값을 가져올 때 쓰입니다.


이번 예제는 여러 태그에 텍스트 값을 입력하고 text()로 텍스트 값을 가져오는 예제 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //p태그
            fnClick($("#pText"));
            //버튼
            fnClick($("#btnText"));
            //a태그
            fnClick($("#aText"));
            
        });
        
        //공통으로 쓰일 function
        function fnClick(e){
            //클릭이벤트
            e.click(function(){
                alert(e.text());
            })
        }
    </script>
</head>
    <body>
        <p id="pText">여긴 'p태그' 입니다. 클릭해주세요.</p>
        <button id="btnText">여긴 '버튼' 입니다. 클릭해주세요.</button><br>
        <a id="aText">여긴 'a태그' 입니다. 클릭해주세요</a>
    </body>
</html>
cs


아래는 결과화면입니다.


아래는 미리 보기입니다. 실제로 반응 하니, 클릭해보세요.


여긴 'p태그' 입니다. 클릭해주세요.



여긴 'a태그' 입니다. 클릭해주세요



예제를 라인 별로 보겠습니다.

28
29
30
31
32
    <body>
        <p id="pText">여긴 'p태그' 입니다. 클릭해주세요.</p>
        <button id="btnText">여긴 '버튼' 입니다. 클릭해주세요.</button><br>
        <a id="aText">여긴 'a태그' 입니다. 클릭해주세요</a>
    </body>
cs

라인 29.    p 태그에 id 값을 주고 텍스트를 입력합니다.

라인 30.    button 태그에 id 값을 주고 텍스트를 입력합니다.

라인 31.    a 태그에 id 값을 주고 텍스트를 입력합니다.


19
20
21
22
23
24
25
        //공통으로 쓰일 function
        function fnClick(e){
            //클릭이벤트
            e.click(function(){
                alert(e.text());
            })
        }
cs

라인 19.    모든 태그에 공통적으로 쓰일 이벤트 함수를 만들어줍니다. 

   함수 예제는 아래링크를 참조해 주세요

   >>[[JQUERY]자바스크립트] - jQuery 009. 함수 function

   >>[[JQUERY]자바스크립트] - jQuery 010. 함수 function ,매개변수(파라미터)

라인 20.    fnClick() 함수를 생성합니다. 파라미터로는 $() 타입으로 받을 겁니다.

라인 22.    파라미터로 받은 요소에 클릭 이벤트를 추가합니다.

라인 23.    click 이벤트가 실행되면 alert()을 활용해 클릭된 요소의 텍스트 값을

   text()를 활용해 출력합니다.

   alert()의 예제는 아래링크를 참조해 주세요

   >>[[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()


10
11
12
13
14
15
            //p태그
            fnClick($("#pText"));
            //버튼
            fnClick($("#btnText"));
            //a태그
            fnClick($("#aText"));
cs

라인 10~15.    앞서 만들었던 공통함수에 파라미터 값으로 각각의 요소를 넣어줍니다.

  선택자에 대한 예제는 아래링크를 참조해 주세요

  >>[[JQUERY]자바스크립트] - jQuery 018. jquery 선택자 (tag,id,class,name)


# 결과를 확인하면 클릭하는 태그의 텍스트 값들을 출력하는 것을 볼 수 있습니다.



저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 029. 입력창 prompt()  (0) 2018.11.01
jQuery 028. == 연산과 === 연산의 차이  (0) 2018.10.29
jQuery 026. input 의 값 확인하기. val()  (0) 2018.10.17
jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기  (0) 2018.10.16
jQuery 024. 조건문 if() 의 활용  (0) 2018.10.15
댓글