>웹 프론트엔드 >JS 튜토리얼 >jquery 작성 방법과 페이지 로드 후 JS 실행의 차이점_jquery

jquery 작성 방법과 페이지 로드 후 JS 실행의 차이점_jquery

WBOY
WBOY원래의
2016-05-16 16:58:421330검색

1. $(function(){
 $("#a").click(function(){
   //여기에 코드 추가
 });
}); 🎜>2. $(document).ready(function(){
 $("#a").click(function(){
   //여기에 코드 추가  
 });
});3.window.onload = function(){
 $("#a").click(function(){
   //여기에 코드 추가
 }); >}
html 코드는 click이며 페이지는 jquery의 js 파일을 참조해야 합니다.


페이지 로딩 시 js를 호출하는 일반적인 방법은 다음과 같습니다.


코드 복사 코드는 다음과 같습니다.window.onload = function() {
$("table tr:nth-child(even)").addClass("even") // jquery 코드입니다
} ;


이 코드는 전체 페이지의 모든 문서가 로드된 후 실행됩니다. 불행하게도 이 방법을 사용하려면 페이지의 DOM 트리가 완전히 로드되어야 할 뿐만 아니라 모든 외부 이미지와 리소스도 로드되어야 합니다. 더욱 불행한 점은 이미지와 같은 외부 리소스를 로드하는 데 시간이 오래 걸리면 이러한 js 효과로 인해 사용자가 무력감을 느끼게 된다는 것입니다.
단, jquery 메소드를 사용하세요:


코드 복사 코드는 다음과 같습니다. $(document ).ready(function() {
// 실행해야 하는 js 특수 효과
$("table tr:nth-child(even)").addClass("even");
});


브라우저가 모든 HTML을 DOM 트리에 넣기 전에 모든 DOM 구조를 로드하고 js 효과를 실행하면 됩니다. 외부 이미지 및 리소스를 로드하기 전에 포함됩니다.
간략한 방법도 있습니다:


코드 복사 코드는 다음과 같습니다.$( function() {
// 실행해야 하는 js 특수 효과
$("table tr:nth-child(even)").addClass("even");
});


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.