티스토리 뷰

it

ready / window.onload와 같은 기능2

name19 2023. 2. 14. 20:37

QR인식 or 이미지 클릭하여 회원가입시(평생 수수료 25%이상 할인)-[25% or more discount on commission]

 

아래 링크를 통해 가입시 바이낸스 코인 거래수수료 25% 평생할인!

25% lifetime discount on Binance Coin transaction fees when you sign up through the link below!

https://accounts.binance.com/en/register?ref=286562663

 

Log In | Binance

login-description

accounts.binance.com

 

바이낸스 추천코드로 가입하고 수수료 25% 평생 할인 받으세요! (바이낸스 가입 레퍼럴코드, 추천

바이낸스 추천코드로 가입하고 수수료 25% 평생 할인 받으세요! 바이낸스 가입코드, 레퍼럴코드, 추천코드, 할인코드  :  ( 286562663 ) 아래 링크를 통해 가입시 25% 할인 받을 수 있습니다 http

pink24.tistory.com

 

 

(구글 나라별 추천검색어가 다릅니다 - find 를 검색해보았더니..)

 

호주구글 영국구글 우회접속 주소(나라별 구글 우회 바로가기 링크 2023) - 일체유심조

구글 우회접속 주소 에 대해 공유드리기 전에

wgmakeit.com

 

컴퓨터 구조의 발전 과정 - 일체유심조

우선 주요 부품들의 발전 과정에 대해 알아보겠습니다.초기 컴퓨터들의 근본적인 설계 개념과 동작 원리가 현대의 컴퓨터들과 거의 같은데요, 최초의 컴퓨터는 Blaise Pascal이 개발한 덧셈과 뺄셈

wgmakeit.com

반응형

문서 준비 핸들러 - jQuery ready 함수

: 초기화 기능을 수행하는데 적합한 이벤트 처리기

ready 메서드

- DOM 로드(이미지 로드전) 후 실행할 콜백(callback) 함수 호출

즉. HTML을 DOM트리로 변환한 후 리소스를 다운로드 하기전에 호출

[참고] window.onload = function(){ test(); }

- 전체문서가 모두 로드된 다음 호출되는 이벤트

- 이미지 또는 다른 리소스 다운로드에 많은 시간이 소요되는 경우 실행이 지연되는 효과 발생.

기본문법

$(document).ready(function(){

//DOM이 모두 로드 된 후 실행할 코드 입력

});

축약문법

jQuery(function(){

//DOM이 모두 로드 된 후 실행할 코드 입력

});

한번더 축약 ..

$(function() {

//DOM이 모두 로드 된 후 실행할 코드 입력

});

ready handler

- Script는 Dom요소가 준비가 될때가지 실행을 기다림

- ready handlerwindow.onload와 비슷하지만 window.onload는 이미지를 포함하여 모두 로드될때가지 기다리므로 스크립트 실행이 늦어짐.

- ready handler는 DOM tree가 만들어질 때까지 만 기다림

jQuery가 이러한 모든 작업을 신경씀

개발자는 그냥 사용하기만 하면됨

===============

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery Exam</title>

<style type="text/css">

span{font-size: 30pt;}

.redtext{color:#F00;} /*#FF0000*/

.italictext{font-style:italic;}

</style>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">

//$("span").addClass("italictext");

//실행안됨. : 문서가 준비안되서 이시점에 <span>태그를 모름.

/*$(document).ready(test); //문서가 준비되면 test함수를 호출하라. // window.onload = function(){ test(); } 과 비슷함

function test(){

$("span").addClass("italictext");

}*/

$(document).ready(function(){ //이름없는 함수. ( 익명함수 )

$("span").addClass("italictext");

console.log("$가 뭐니 ?\n"+$);

/* 크롬에서 출력 결과

$가 뭐니 ?

function ( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

} jQuery.html:25

*/

}); //문서가 준비되면 test함수를 호출하라. // window.onload = function(){ test(); } 과 같음

</script>

</head>

<body>

<span>Sample</span>

<script type="text/javascript">

//body끝에서는 문서가 준비되었기때문에 실행됨.

$("span").addClass("redtext");

</script>

</body>

</html>

==========

그래서 문서가 준비된후에 스타일을 적용했기때문에.

정의 해놓은 2개의 스타일이 적용된것을 볼수있습니다.

.redtext{color:#F00;} /*#FF0000*/

.italictext{font-style:italic;}

반응형
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

(구글 나라별 추천검색어가 다릅니다 - find 를 검색해보았더니..)

 

호주구글 영국구글 우회접속 주소(나라별 구글 우회 바로가기 링크 2023) - 일체유심조

구글 우회접속 주소 에 대해 공유드리기 전에

wgmakeit.com

 

컴퓨터 구조의 발전 과정 - 일체유심조

우선 주요 부품들의 발전 과정에 대해 알아보겠습니다.초기 컴퓨터들의 근본적인 설계 개념과 동작 원리가 현대의 컴퓨터들과 거의 같은데요, 최초의 컴퓨터는 Blaise Pascal이 개발한 덧셈과 뺄셈

wgmakeit.com

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/07   »
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
글 보관함