jQuery 기본문법

jQuery는 자바스크립트와 마찬가지로 head태그에 선언되기 때문에, 위에서부터 순차적으로 코드를 읽어 내려가는 웹 브라우저 특성상 jQuery가 적용될 대상들(body태그)보다 먼저 실행되어 의도치 않은 오류가 발생하게 된다.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
    $("p").css("color", "red"); //<p>태그의 글자색을 빨간색으로 변경
</script>
</head>
<body>
    <p>제이쿼리</p>
</body>
</html>
결과값: 변화없음










위와같은 오류를 방지하기 위해서 자바스크립트에서의 window.onload 와 비슷한 문법이 jQuery에도 존재한다.

1번 방법:
$(document).ready(function() {
  //내용
});

2번 방법:
$(function() {
  //내용
});

3번 방법:
jQuery(function() {
  //내용
});





<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
    $(function() {
        $("p").css("color", "red"); //<p>태그의 글자색을 빨간색으로 변경
    });
</script>
</head>
<body>
    <p>제이쿼리</p>
</body>
</html>
결과값:

댓글

댓글 쓰기