[jQuery] jQuery를 사용한 웹 페이지 요소 조작

JavaScript 2023. 10. 27. 10:14

jQuery 란?

웹 개발에서 jQuery는 널리 사용되는 라이브러리 중 하나로 HTML 요소를 선택하고 조작하는 작업을 더 간편하게 만들어 줍니다.

jQuery를 사용하기 위해 먼저 해당 라이브러리를 HTML 문서에 로드해야 합니다. jQuery는 다음과 같이

CDN(Content Delivery Network)을 통해 불러올 수 있습니다.

<script src="http://code.jquery.com/jquery-3.1.0.js"></script>

위 코드를 <head> 태그 내에 추가 하면 jQuery 라이브러리를 사용할 수 있게 됩니다.

jQuery 코드를 작성하려면 문서가 로드된 후에 실행되도록 하는 것이 좋습니다. 이를 위해 $(function(){}) 구문을 사용합니다. 이 구문은 페이지가 로드될 때 jQuery 코드를 실행 합니다.

<script>
    // $(function(){})은 페이지가 로드될 때 jQuery 코드를 실행합니다.
    $(function(){
        // 여기에 jQuery 코드를 작성합니다.
    });
</script>

jQuery를 사용하면 HTML 요소를 선택하고 다양한 조작을 수행할 수 있습니다. 아래 코드는 #title 이라는 ID를 가진 요소의 글자 색상을 skyblue 로 변경하는 예제입니다.

$(function(){
    // #title을 선택하고, 글자 색상을 skyblue로 변경합니다.
    $("#title").css("color", "skyblue");
});

이렇게 jQuery를 활용하면 간단한 코드로 웹페이지의 요소를 동적으로 변경하거나 조작할수 있습니다.

jQuery를 사용하면 웹개발을 더 효율적으로 진행할 수 있습니다. 물론 jQuery를 사용하지 않고도 순수 JavaScript로 작업할수 있지만 jQuery는 브라우저간 호환성 문제를 간편하게 해결하고 코드를 짧게 유지할 수 있도록 도와줍니다.

[jQuery] jQuery를 사용한 객체 조작 및 생성 (0)	2023.10.27
jQuery 선택자 (0)	2023.10.27
[DOM] JavaScript로 페이지 스크롤 제어하기 (0)	2023.10.27
[DOM] JavaScript로 화면 및 웹 브라우저 크기 가져오기 (0)	2023.10.27
[DOM] JavaScript로 페이지 이동하기 Location 객체 활용 (0)	2023.10.27