Library/jQuery

[jQuery] 제이쿼리 기초

제이쿼리 기초

오늘은 제이쿼리 기초에 대해 공부한 내용을 포스팅하는 시간을 가져보았다, 해당 게시글을 다 읽은 후엔 제이쿼리란 무엇인가, HTML요소 가져오기, HTML 요소 설정하기에 대해 사용하는 방법을 습득할 것이다. 배운 내용을 정리하는 글이므로 부족한 점이 있다면 피드백은 언제나 환영이다. 그럼 시작해 보자.

제이쿼리란?

제이쿼리(jQuery)는 자바스크립트 라이브러리 중 하나로, HTML 문서를 조작하고 이벤트를 다루는 데 도움을 주는 간편하고 유연한 도구이다. 제이쿼리는 크로스 브라우징을 고려하여 일관된 방식으로 웹 개발을 할 수 있도록 지원하며, 코드를 간결하게 작성할 수 있게 해 준다.

제이쿼리의 주요 기능은 아래와 같다.

DOM 조작 - HTML 문서의 요소를 선택하고 조작할 수 있다.
이벤트 처리 - 사용자의 행동에 반응하여 이벤트를 처리할 수 있다.
애니메이션 - 요소에 애니메이션 효과를 쉽게 추가할 수 있다.
AJAX - 비동기적으로 서버와 데이터를 교환할 수 있는 기능을 제공한다.
플러그인 - 다양한 플러그인을 통해 제이쿼리의 기능을 확장할 수 있다.

제이쿼리는 자바스크립트 코드를 단순화하고 브라우저 간의 호환성 문제를 해결하는 데 도움이 되므로, 웹 개발에서 널리 사용되었다. 그러나 최근 웹 표준의 진보와 브라우저 업데이트로 인해 제이쿼리를 사용하지 않고 자바스크립트로 개발하는 추세가 강해지고 있다는 점을 참고하자.

제이쿼리를 사용하는 방법은 제이쿼리 라이브러리를 다운로드하여 로컬에서 적용시키는 방법과 CDN을 가져와 코드에 삽입하는 방법이 있지만 이번 시간에는 CDN 방법을 이용하여 학습을 하였다. CDN은 제이쿼리 공식 홈페이지에 들어가 본인이 원하는 버전을 선택 후 CDN 코드를 복사하여 아래와 같이 <body> 태그 부분에 추가해 주면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제이쿼리 기초</title>
    
    
</head>
<body>
    
    <!-- 코드 작성... -->

    <!-- jQuery 스크립트 -->
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" 
            integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" 
            crossorigin="anonymous">
    </script>
</body>
</html>

$document.ready() 메서드

$document.ready() 메서드는 제이쿼리에서 사용되는 이벤트 핸들러로, 문서 객체 모델(DOM)이 완전히 로드되었을 때 특정 함수나 코드 블록을 실행할 수 있게 해 준다. 이는 페이지의 모든 HTML, CSS, 이미지 등의 리소스가 로드되고 초기화되었을 때 코드가 실행되어야 할 때 유용하다.

사용 방법 1

$(document).ready(function() {
    // 여기에 실행하고자 하는 코드를 작성합니다.
    // 이 코드는 문서가 완전히 로드된 후에 실행됩니다.
});

사용 방법 2

$(function() {
    // 여기에 실행하고자 하는 코드를 작성합니다.
    // 이 코드는 문서가 완전히 로드된 후에 실행됩니다.
});

위의 두 방법은 동일한 결과를 반환한다, 해당 메서드를 사용하면 페이지가 로드되는 동안 발생할 수 있는 이슈를 방지하고, DOM 요소에 접근하거나 조작할 때 안전하게 사용할 수 있다. 페이지의 로딩이 완료되기 전에 스크립트가 실행되면, 요소들이 아직 로드되지 않아서 스크립트가 작동하지 않을 수 있다. $document.ready()는 이런 상황을 피하기 위해 사용된다.

HTML 요소 가져오기 및 설정하기

제이쿼리에서는 다양한 메서드를 사용하여 HTML 요소의 내용을 가져오거나 설정할 수 있다. 주로 사용되는 메서드로는 text(), html(), 그리고 val()이 있다. 그리고 속성을 변경하기 위한 메서드인 attr()이 있다. 하나씩 차례대로 알아보자.

text()

text() 메서드는 선택한 요소의 텍스트 내용을 가져오거나 설정한다.
요소의 텍스트 내용을 가져오려면 매개변수 없이 사용한다.
텍스트 내용을 설정하려면 값을 매개변수로 전달한다.

// 텍스트 내용 가져오기
var content = $("#myElement").text();
console.log(content);

// 텍스트 내용 설정하기
$("#myElement").text("새로운 텍스트");

#은 엘레먼트의 아이디를 의미한다, 요소를 선택하는 방법은 추후에 자세하게 다룰 예정이므로 이번 예제에선 아이디가 myElement인 HTML 요소를 선택한다고 생각하면 된다.

html()

html() 메서드는 선택한 요소의 HTML 내용을 가져오거나 설정한다.
HTML 내용을 가져오려면 매개변수 없이 사용한다.
HTML 내용을 설정하려면 값을 매개변수로 전달한다.

// HTML 내용 가져오기
var htmlContent = $("#myElement").html();
console.log(htmlContent);

// HTML 내용 설정하기
$("#myElement").html("<p>새로운 HTML</p>");

val()

val() 메서드는 주로 입력 요소에서 값(value)을 가져오거나 설정할 때 사용된다.
값 가져오기에는 매개변수 없이 사용하며, 값 설정에는 값을 매개변수로 전달한다.

// 값 가져오기 (주로 input, select, textarea 등에서 사용)
var inputValue = $("#myInput").val();
console.log(inputValue);

// 값 설정하기
$("#myInput").val("새로운 값");

이러한 메서드들은 제이쿼리를 사용하여 HTML 요소의 내용을 동적으로 조작하는 데 유용하게 활용된다. 페이지 내의 특정 요소의 내용을 가져와서 변경하거나, 사용자로부터 입력받은 값을 처리하는 등의 상황에서 자주 사용된다.

attr()

attr() 메서드는 제이쿼리에서 HTML 요소의 속성(attribute)을 가져오거나 설정하는 데 사용되는 메서드이다. 이 메서드를 사용하여 요소의 속성을 동적으로 조작할 수 있다.

속성 값 가져오기

let 변수 = $("선택자").attr("속성");

// example
let linkHref = $("a").attr("href");

속성 값 변경하기

$("선택자").attr("속성", "변경할 값");

// example
$("img").attr("src", "new-image.jpg");

여러 속성 동시에 설정하기

$("img").attr({
   "alt": "새로운 이미지",
   "width": "200",
   "height": "150"
 });

728x90

Contents

새소식

인기 검색어