티스토리 뷰

[JQUERY]자바스크립트

jQuery 018. jquery 선택자 (tag,id,class,name)

가산동 2018. 10. 3. 18:32

아래는 예제와 실행 화면입니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            //선택자
            alert(
                "'tag' 로 찾은 text = "+$("p").text()+"\n"
                +"'id' 로 찾은 text = "+$("#line01").text()+"\n"
                +"'class' 찾은 text = "+$(".line02").text()+"\n"
                +"'name' 으로 찾은 text = "+$("[name=line03]").text()
            );
        });
        
    </script>
</head>
    <body>
        <p id="line01">첫번째 줄</p>
        <p class="line02">두번째 줄</p>
        <p name="line03">세번째 줄</p>
    </body>
</html>
cs

html 소스내의 tag 이름, 또는 별도로 값을 준 id, class, name 값으로 요소를 찾을 수 있습니다.



예제를 자세하게 보면서 설명을 덧붙이겠습니다.

20
21
22
23
24
    <body>
        <p id="line01">첫번째 줄</p>
        <p class="line02">두번째 줄</p>
        <p name="line03">세번째 줄</p>
    </body>
cs

라인 21. body 태그 안에 "line01" 이라는 아이디를 가진 p태그를 넣어줍니다.

라인 22. "line02" 라는 클래스를 가진 p태그 입니다.

라인 23. "line03" 이라는 name을 가진 p태그 입니다. 

이렇게 html을 먼저 작성을 해준뒤,


10
11
            alert(
                "'tag' 로 찾은 text = "+$("p").text()+"\n"
cs

라인 10. alert()을 활용해 출력을합니다.

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


라인 11. 요소를 tag이름으로 선택하기 위해서는 $(" tag이름 ") 이런식으로 사용됩니다. 

선택된 요소의 내용을 .text()를 활용해 출력합니다. 결과를 보면 p테그의 모든 내용이 나오는걸 확인할 수 있습니다.


12
                +"'id' 로 찾은 text = "+$("#line01").text()+"\n"
cs

라인 12. 이번엔 id로 요소를 선택합니다 방식은 위와 비슷하게 $("# id값 ")로 사용됩니다.

선택된 요소의 text() 값은 '첫번째 줄' 입니다.


13
                +"'class' 찾은 text = "+$(".line02").text()+"\n"
cs

라인 13. class로 요소를 선택합니다. 방식은 $(". class값 ") 입니다. 

선택된 요소의 text() 값은 '두번째 줄' 입니다.


14
                +"'name' 으로 찾은 text = "+$("[name=line03]").text()
cs

라인 14. 마지막으로 name으로 요소를 선택합니다. 방식은 $("[name= name값 ]") 입니다.

선택된 요소의 text() 값은 '세번째 줄' 입니다.

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

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

jQuery 020. 이벤트 on(), 클릭이벤트 click()  (0) 2018.10.06
jQuery 019. css 변경하기 css()  (0) 2018.10.06
jQuery 017. 실수를 문자로 형변환, 반올림 toFixed()  (0) 2018.10.03
jQuery 016. 16진수 숫자를 문자로 형변환 toString(16)  (0) 2018.09.29
jQuery 015. 숫자를 문자로 형변환 String()  (0) 2018.09.29
댓글