페이지 로드 후 jQuery 실행
이 튜토리얼은 페이지 로드 후 jQuery를 실행하는 방법을 보여줍니다.
페이지를 로드한 후 jQuery 코드를 실행하는 것은 두 가지 방법을 사용하여 수행할 수 있습니다. 하나는 ready() 메서드이고 다른 하나는 로드 이벤트가 있는 on() 메서드입니다.
ready()를 사용하여 페이지 로드 후 jQuery 실행
jQuery의 ready() 메서드는 완전히 로드된 DOM 이후에만 jQuery 코드를 실행합니다. ready()는 DOM이 완전히 로드된 후 jQuery 코드를 호출하는 내장 jQuery 메서드입니다. 이미지 및 비디오와 같은 무거운 파일이 완전히 로드될 때까지 기다리지 않습니다.
ready() 메서드는 <body onload = ""> 이벤트와 함께 사용되지 않습니다. 이 방법의 구문은 다음과 같습니다.
$(document).ready(function)
ready() 메서드는 현재 문서에만 사용할 수 있습니다. 여기서 함수는 페이지가 로드된 후 실행하려는 jQuery 코드입니다. 이 방법의 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title> jQuery ready() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#h1").css({"font-size": "80px", "color": "lightblue", "background": "darkblue", "fontWeight": "bold"});
$("#h2").css({"fontSize": "50px", "fontWeight": "bold", "color": "lightblue"});
$("#para").css({"color": "blue"});
});
});
</script>
</head>
<body>
<h1 id = "h1"> Delftstack.com </h1>
<h2 id = "h2"> Example of $(document).ready() from Delftstack. </h2>
<p id = "para"> </p>
<p> This is an example for ready() method in jQuery </p>
<button> After Page Load </button>
</body>
</html>
보시다시피 여기에서 클릭 이벤트를 사용합니다. 이 클릭은 DOM이 로드된 후에만 작동합니다.
출력을 참조하십시오.
on()을 사용하여 페이지 로드 후 jQuery 실행
on() 메서드는 페이지를 로드한 후 jQuery 코드를 실행하기 위해 load 이벤트와 함께 사용할 수 있습니다. load가 포함된 on() 메서드는 이미지 및 비디오와 같은 무거운 개체를 포함하는 전체 페이지가 로드될 때 작동합니다.
on() 메서드는 다양한 작업을 위한 내장 jQuery 메서드입니다. 이 방법의 구문은 다음과 같습니다.
$(selector).on(event, childSelector, data, function, map)
어디:
event는 필수 매개변수입니다. 우리의 경우에는로드가 됩니다.childSelector는 이벤트가 첨부될 하위 요소를 지정하기 위한 선택적 매개변수입니다.data는 이벤트가 트리거될 때 전달될 데이터에 사용되는 선택적 매개변수이기도 합니다.function은 이벤트가 트리거될 때 호출되는 선택적 매개변수이기도 합니다.지도는 이벤트 지도입니다.
이제 on() 메서드를 사용하여 페이지가 로드된 후 jQuery 코드를 실행하는 예제를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery on(load) method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1 id = "h1"> Delftstack.com </h1>
<h2 id = "h2"> Example of $(document).ready() from Delftstack. </h2>
<p id = "para"> </p>
<p> This is an example for ready() method in jQuery </p>
<button> After Page Load </button>
<script type="text/javascript">
$(window).on('load', DemoFunction());
function DemoFunction() {
$("#h1").css({"font-size": "80px", "color": "lightblue", "background": "darkblue", "fontWeight": "bold"});
$("#h2").css({"fontSize": "50px", "fontWeight": "bold", "color": "lightblue"});
$("#para").css({"color": "blue"});
}
</script>
</body>
</html>
위의 코드는 페이지가 완전히 로드될 때 CSS를 변경합니다. 출력을 참조하십시오.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook