집 > 기사 > 웹 프론트엔드 > jQuery에서 $(function() {}) 사용 사례

jQuery에서 $(function() {}) 사용 사례

php中世界最好的语言원래의: 2018-04-23 16:50:043243검색

이번에는 jQuery에서 $(function() {}) 사용 사례를 가져오겠습니다. jQuery에서 $(function() {}) 사용 시 주의 사항은 무엇인가요? 바라보다.

$(function() {});은 $(document).ready(function(){ })의 약자입니다. 처음 접했을 때 함수 $(document).ready라고도 했습니다. (function(){ })은 페이지에서 window.onload를 대체하는 데 사용되지만 오늘은 그렇지 않은 것 같습니다. 페이지 로딩 효과를 하다가 발견했어요!

$(document).ready()의 코드는 페이지 콘텐츠가 로드된 후에 실행됩니다. 코드를 스크립트 태그에 직접 작성하면 페이지가 로드될 때 스크립트 태그 내부의 코드가 실행됩니다. 태그에서 실행된 코드가 아직 로드되지 않은 코드나 DOM을 호출하면 오류가 보고됩니다. 물론, 페이지 끝에 스크립트 태그를 넣으면 문제가 없습니다. 효과는 준비와 동일합니다.

$(document).ready(function(){})은 $(function(){});

단락을 클릭하면 다음 단락이 숨겨집니다.

<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("p").click(function(){
  $(this).hide();
 });
});
</script>
</head>
<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

$(document)인 경우 .ready(function () {}); 제거한 후에는 단락을 숨길 수 없습니다:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $("p").click(function(){
  $(this).hide();
 });
</script>
</head>
<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

하지만 스크립트를 페이지 끝에 넣으면 숨김 효과가 복원됩니다:

<html>
<head>
</head>
<body>
 <p>If you click on me, I will disappear.</p>
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $("p").click(function(){
   $(this).hide();
 });
</script>
</html>

요약: 코드

$(document).ready는 페이지에 있습니다. 콘텐츠가 로드된 후에 실행됩니다. 페이지가 로드되면 스크립트 태그가 해당 코드를 실행합니다. 태그에서 실행된 코드가 아직 로드되지 않은 코드나 DOM을 호출하면 오류가 보고됩니다.
물론 페이지 끝에 스크립트 태그를 넣으면 문제가 없으며 효과가 나타납니다. 준비하세요

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트 글에서 다른 관련 사항을 주목해 주세요!

jQuery에서 $(function() {}) 사용 사례

관련 기사