JQuery [ 시작1 ]

양혜정·2024년 4월 21일
0

JQuery 실행

목록 보기
1/42

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 시작 -1</title>

<link rel="stylesheet" href="css/01.css">

<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/01.js"></script>

</head>
<body>
	<span id="test"></span>
	<br><br>
	<span class="example"></span>
	<br><br>
	<span class="example"></span>
</body>
</html>

JS

/*
   웹브라우저에 HTML문서(documet)가 로드되고 나면 
   자동적으로 실행할 내용이 있으면 그 내용은 아래와 같이 기술해주면 된다.
*/
$(function(){
    // alert("안녕하세요~~");

    // 팝업창 띄우기 
    window.open("popup_contents.html", "my_popup", "left=100px, top=100px, width=400px, height=350px");

    $("span#test").html("안녕하세요?<br>jQuery");

    $("span.example").html("반갑습니다^^<br>제이쿼리");

});

CSS

@charset "UTF-8";

span#test {
	color: red;
}

span.example {
	color: blue;
}

정리

  • jQueryStudy -> 01_eventHandling -> 01_jquery.html, 01.js, 01.css
profile
양혜정
다음 포스트

JQuery [ 시작2 ]

0개의 댓글

관련 채용 정보