jQuery의 document.ready 함수는 언제 사용해야 합니까?
Javascript/jQuery를 처음 사용하기 시작했을 때 document.ready를 사용하라는 말을 들었지만 그 이유를 제대로 알지 못했습니다.
의 jQuery 안에 javascript/ 몇 인 지침을 누군가가 할 수 .document.ready?
관심 있는 항목:
- jQuery's
.on()방법:나는 사용합니다..on()AJAX를 위한 방법은 상당히 많습니다(일반적으로 동적으로 생성된 DOM 요소).만약에.on()클릭 핸들러는 항상 내부에 있습니다.document.ready? - 성능:다양한 Javascript/jQuery 객체를 document.ready 내부 또는 외부에 보관하는 것이 더 성능이 좋습니까? (또한 성능 차이가 심합니까?)
- 개체 범위:AJAX로 로드된 페이지는 이전 페이지의 document.ready 내에 있던 개체에 액세스할 수 없습니다. 그렇죠?document.ready 외부에 있는 개체(즉, 진정한 "글로벌" 개체)에만 액세스할 수 있습니까?
업데이트: 모범 사례를 따르기 위해 모든 javascript(jQuery 라이브러리 및 앱의 코드)가 HTML 페이지 하단에 있으며 다음을 사용 중입니다.deferAJAX가 로드된 페이지의 jQuery가 포함된 스크립트의 속성을 사용하여 이 페이지의 jQuery 라이브러리에 액세스할 수 있습니다.
간단히 말하면,
$(document).ready다음과 같은 경우에 발생하는 이벤트입니다.document준비되었습니다.
를 jQuery 코에배다가정합에 넣었다고 가정해 보겠습니다.head 및 dom요소(앵커, img 등), 다음과 같은 이유로 액세스할 수 없습니다.html위에서 아래로 해석되며 jQuery 코드가 실행될 때 HTML 요소가 없습니다.
문제를 jQuery/DOM 를 이문제를해를기결드다코배니치합내사부에용든모해위하qu▁every▁(▁jdom▁toqu▁place▁wej▁code이를j다▁inside▁domwhich▁overcome▁problem배,▁this니코)치합드사에문제에 배치합니다.$(document).ready▁all▁which▁the▁when▁functiondom요소에 액세스할 수 있습니다.
그리고 이것이 당신이 당신의 jQuery 코드를 아래에 놓을 때 이유입니다 (모든 돔 요소가 끝난 후, 바로 앞에).</body>), 의 필요성은 없습니다.
넣을 는 없습니다.on inside 내법방의$(document).ready만을 사용할 on에 있는 방법.document위에서 설명한 것과 같은 이유 때문입니다.
//No need to be put inside $(document).ready
$(document).on('click','a',function () {
})
// Need to be put inside $(document).ready if placed inside <head></head>
$('.container').on('click','a',function () {
});
편집
댓글 중에.
$(document).ready이미지 또는 스크립트를 기다리지 않습니다.그것이 사이의 큰 차이점입니다.$(document).ready그리고.$(document).loadDOM에 액세스하는 코드만 준비 처리기에 있어야 합니다.플러그인이면 준비 이벤트에 있으면 안 됩니다.
답변:
jQuery의 .on() 메서드:저는 AJAX에 .on() 메서드를 꽤 많이 사용합니다(DOM 요소를 동적으로 생성)..on() 클릭 핸들러가 항상 document.ready 내부에 있어야 합니까?
아니, 항상 그렇지는 않아.문서 헤드에 JS를 로드하는 경우 필요합니다.AJAX를 통해 페이지가 로드된 후 요소를 생성하는 경우에는 요소를 생성해야 합니다.스크립트가 핸들러를 추가하는 html 요소보다 낮은 경우에는 그럴 필요가 없습니다.
성능:다양한 Javascript/jQuery 객체를 document.ready 내부 또는 외부에 보관하는 것이 더 성능이 좋습니까? (또한 성능 차이가 심합니까?)
사정에 따라 다르겠지.처리기를 첨부하는 데 동일한 시간이 소요됩니다. 페이지가 로드되는 즉시 수행할 것인지 아니면 전체 문서가 로드될 때까지 대기할 것인지에 따라 다릅니다.따라서 페이지에서 어떤 다른 작업을 수행하는지에 따라 달라집니다.
개체 범위:AJAX로 로드된 페이지는 이전 페이지의 document.ready 내에 있던 개체에 액세스할 수 없습니다. 그렇죠?document.ready 외부에 있는 개체(즉, 진정한 "글로벌" 개체)에만 액세스할 수 있습니까?
범위 함수의 ) 기본위모글범에때위로벌/자에있는다서)로 선언된 변수에만 액세스할 수 window.myvarname = '';
jQuery를 안전하게 사용하려면 먼저 페이지가 조작 준비 상태인지 확인해야 합니다.jQuery에서는 코드를 함수에 넣은 다음 해당 함수를 에 전달하여 이를 수행합니다.우리가 전달하는 함수는 단지 익명 함수일 수 있습니다.
$(document).ready(function() {
console.log('ready!');
});
문서가 준비되면 .ready()로 전달하는 함수가 실행됩니다.이게 무슨 일입니까?$(document)를 사용하여 페이지의 문서에서 jQuery 개체를 만든 다음 해당 개체의 .ready() 함수를 호출하여 실행할 함수를 전달합니다.
이것은 여러분이 많이 하는 일이기 때문에, 여러분이 원한다면 이것을 위한 간단한 방법이 있습니다. $() 함수는 $(문서)의 별칭으로 이중 역할을 합니다.ready () 함수를 전달하면 다음과 같습니다.
$(function() {
console.log('ready!');
});
이것은 좋은 읽을거리입니다: Jquery Fundamentals.
.ready() - DOM이 완전히 로드되었을 때 실행할 함수를 지정합니다.
$(document).ready(function() {
// Handler for .ready() called.
});
현실적으로 말하면,document.readyDOM을 정확하게 조작하는 것 외에 다른 어떤 것에도 필요하지 않으며 항상 필요하거나 최선의 옵션은 아닙니다.제 말은 예를 들어 큰 jQuery 플러그인을 개발할 때 코드 전체에서 거의 사용하지 않는다는 것입니다. DOM을 조작하지만 나중에 호출되도록 되어 있는 방법으로 최대한 추상화합니다.모든 코드가 긴밀하게 통합되어 있을 때 유일한 방법은 다음과 같습니다.document.ready보통은init모든 DOM 마법이 일어나는 곳.이것이 당신의 질문에 대답하기를 바랍니다.
문서가 완전히 로드될 때까지 기다려야 하므로 document.ready의 모든 작업을 바인딩해야 합니다.
그러나 모든 작업에 대한 함수를 생성하고 document.ready 내에서 호출해야 합니다.함수(글로벌 개체)를 만들 때는 언제든지 호출합니다.따라서 새 데이터가 로드되고 새 요소가 생성되면 해당 기능을 다시 호출합니다.
이러한 기능은 이벤트와 작업 항목을 바인딩한 기능입니다.
$(document).ready(function(){
bindelement1();
bindelement2();
});
function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}
function bindelement2(){
$('el2').on('click',function...);
}
나는 div에 링크를 추가했고 클릭으로 몇 가지 작업을 하고 싶었습니다.DOM에 첨부된 요소 아래에 코드를 추가했지만 작동하지 않았습니다.코드는 다음과 같습니다.
<div id="advance-search">
Some other DOM elements
<!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>
<script>
$("#advance-search #reset-adv-srch").on("click", function (){
alert('Link Clicked');``
});
</script>
그것은 작동하지 않았습니다.그리고 $(문서) 안에 jQuery 코드를 넣었습니다.준비가 되었고 완벽하게 작동했습니다.여기 있어요.
$(document).ready(function(e) {
$("#advance-search #reset-adv-srch").on("click", function (){
alert('Link Clicked');
});
});
준비 이벤트는 DOM(문서 객체 모델)이 로드되었을 때 발생합니다.
이 이벤트는 문서가 준비된 후에 발생하기 때문에 다른 모든 jQuery 이벤트 및 기능을 갖는 것이 좋습니다.위의 예와 같이.
ready() 메서드는 준비 이벤트가 발생할 때 수행할 작업을 지정합니다.
팁: ready() 메서드를 와 함께 사용하면 안 됩니다.
언급URL : https://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function
'prosource' 카테고리의 다른 글
| PDF 문서에서 텍스트를 추출하는 방법은 무엇입니까? (0) | 2023.09.05 |
|---|---|
| 배열에서 다른 배열에 없는 요소를 찾기 위한 Javascript 알고리즘 (0) | 2023.09.05 |
| R에 있는 그림의 첨자 (0) | 2023.09.05 |
| 데이터 프레임을 그룹화하고 합계 AND 카운트를 구하시겠습니까? (0) | 2023.09.05 |
| MariaDB와 MYSQL 5.6이 서로 다른 결과를 반환함 (0) | 2023.09.05 |