JQuery(Event)_07

2024. 10. 16. 18:07·JQuery/기초 내용 정리

2024-10-16

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>

        /*
            기타 자주 사용되는 이벤트 함수
            - change() : 선택한 입력요소에 값이 새 값으로 바뀌고, 포커스가 다른 곳으로
                         이동이 되었을 때 발생하는 이벤트.
        */

        $(function() {

            $(".site").on("change", function() {    // change : 값이 변경됨
                $(".txt").text($(this).val());
            });
        });

    </script>
</head>
<body>

    <select class="site">
        <option value="사이트를 설정하세요">====선택====</option>
        <option value="www.naver.com">네이버</option>
        <option value="www.google.com">구글</option>
        <option value="www.daum.net">다음</option>
        <option value="www.nate.com">네이트</option>
    </select>

    <br> <br>

    <p class="txt"></p>
    
</body>
</html>

 

'JQuery > 기초 내용 정리' 카테고리의 다른 글

JQuery(Animation)_02  (0) 2024.10.17
JQuery(Animation)_01  (0) 2024.10.17
JQuery(Event)_06  (0) 2024.10.16
JQuery(Event)_05  (0) 2024.10.16
JQuery(Event)_04  (0) 2024.10.16
'JQuery/기초 내용 정리' 카테고리의 다른 글
  • JQuery(Animation)_02
  • JQuery(Animation)_01
  • JQuery(Event)_06
  • JQuery(Event)_05
mw41817
mw41817
일생의 개발 기록 저장소
  • mw41817
    IT 개발 일지
    mw41817
    • Index (487)
      • HTML (36)
        • 기초 내용 정리 (36)
      • CSS (29)
        • 기초 내용 정리 (29)
      • JavaScript (60)
        • 기초 내용 정리 (60)
      • JQuery (38)
        • 기초 내용 정리 (38)
      • Java (232)
        • 기초 내용 정리 (232)
      • JSP (46)
        • 기초 내용 정리 (46)
      • Spring, Boot (31)
        • 기초 내용 정리 (31)
      • DB (5)
        • Oracle SQL (5)
      • Code WorkBook (6)
        • programmers (6)
        • Baekjoon (0)
      • 기타 (1)
        • 유용한 사이트 (3)
  • 전체
    오늘
    어제
  • 글쓰기 관리
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 카테고리
    • 주인장 GitHub
  • 공지사항

  • 인기 글

  • 태그

    html #코딩 #프로그래밍 #기초
  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.0
mw41817
JQuery(Event)_07
상단으로

티스토리툴바