Notice
Recent Posts
Recent Comments
Link
«   2025/08   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

노승현

jquery 함수의 종류 본문

JAVA

jquery 함수의 종류

nsh95 2024. 1. 17. 08:44

jQuery는 JavaScript 라이브러리로, HTML 문서를 다루고 조작하는 데 도움을 주는 많은 함수를 제공합니다. 아래에는 jQuery의 주요 함수 카테고리에 대한 간략한 설명이 있습니다.

 

선택자 함수 (Selector Functions):

  • $(selector): HTML 요소를 선택합니다.
  • $(element): DOM 요소를 jQuery 객체로 변환합니다.
  • $(callback): 문서가 준비되면 실행할 함수를 등록합니다.
$(document).ready(function() {
  // 문서가 준비되면 실행될 코드
});

 

 

 

이벤트 처리 함수 (Event Handling Functions):

  • $(element).on(event, handler): 지정된 이벤트가 발생했을 때 실행될 핸들러를 등록합니다.
  • $(element).off(event): 이벤트 핸들러를 제거합니다.
$("button").on("click", function() {
  // 클릭 이벤트 처리
});

 

 

 

DOM 조작 함수 (DOM Manipulation Functions):

  • $(selector).html(content): HTML 내용을 가져오거나 설정합니다.
  • $(selector).text(content): 텍스트 내용을 가져오거나 설정합니다.
  • $(selector).val(value): 입력 요소의 값을 가져오거나 설정합니다.
  • $(selector).append(content): 선택한 요소에 내용을 덧붙입니다.
  • $(selector).prepend(content): 선택한 요소에 내용을 앞에 추가합니다.
  • $(selector).remove(): 선택한 요소를 제거합니다.
$("#myDiv").html("<p>Hello, World!</p>");

 

 

 

애니메이션 함수 (Animation Functions):

  • $(selector).hide(): 선택한 요소를 숨깁니다.
  • $(selector).show(): 선택한 요소를 보여줍니다.
  • $(selector).toggle(): 선택한 요소의 표시/숨김 상태를 토글합니다.
  • $(selector).fadeIn(), $(selector).fadeOut(), $(selector).fadeToggle(): 페이드 인/아웃 효과를 적용합니다.
  • $(selector).slideDown(), $(selector).slideUp(), $(selector).slideToggle(): 슬라이드 다운/업 효과를 적용합니다.
$("#myDiv").toggle();

 

 

 

 

 

 

사용 예시)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            $(".photo").toggle();
        });
    });
</script>
</head>
<body>
    <button id="btn">버튼</button>

    <div class="photo" style="display: none;">
        <div><img alt="이미지 03" src="images/3.jpg"></div>
    </div>
</body>
</html>

 

 

 

 

'JAVA' 카테고리의 다른 글

Filter, Listener  (0) 2024.01.18
에러 페이지  (0) 2024.01.10
'JAVA' Related Articles more