[JavaScript] jQuery의 기본개념

jQuery 기본개념

짧고 단순한 프로그램으로 웹페이지에 다양한 효과나 연출을 추가할 수 있고 복잡하게 구성된 콘텐츠를 제어할 수 있다.

라이브러리

자주 사용하는 기능과 효과를 JavaScript 코드로 만들어 두고 재활용 할 수 있도록 모아두는 것

👇 jQuery 파일 설치 링크 👇

https://jquery.com/

태그

//태그
document.getElementsByTagName('a')
=> $("a")

//아이디
$("#container")

//클래스
$(".btn")

📢 $ = 함수, ("#id") = 매개변수
$()함수를 통해 jQuery 형식으로 변환된 요소를 'jQuery의 객체'라고 부른다.

CSS 속성 변경

//document.getElementsByTagName('h1')[0].style.color = 'red'
//css 속성 하나를 변경할 때
=> $('h1').css('color', 'red');
//css 속성 여러 개를 변경할 때('{}' 추가)
=> $('h1').css({'color' : 'red',
				'opacity':0.5,});

⚠️ 라이브러리는 반드시 자바스크립트 코드 위에 위치해야 한다.

<script src="../fff/js/jquery-3.7.1.min.js"></script>

jQuery의 'window.onload = function()'

// window.onload 사용
window.onload = function() {
    // 페이지의 모든 리소스가 로드된 후에 실행된다.
    console.log("모든 리소스 로드된 후 실행");
};

$(document).ready(function() {
    // 페이지의 모든 리소스가 로드된 후에 실행됨
    console.log("모든 리소스 로드된 후 실행");
});

// $(document).ready() 사용
$(document).ready(function() {
    // DOM이 준비되면 실행됨 (리소스 로딩과는 상관 없음)
    console.log("DOM이 준비되면 실행");
});

$(function() {
    // 위와 동일한 효과
    console.log("DOM이 준비되면 실행");
});

출처 : 직접 수강한 YouTube jQuery 02 [ 이벤트 ] jQuery 이벤트, 실행 시점 제어, 메서드 체인, 이벤트의 종류 강의