$(문서)를 여러 개 가질 수 있습니까?준비 완료(함수 {...}); 섹션?
시작할 때 여러 기능을 사용할 경우 모두 하나 미만이어야 합니다.
$(document).ready(function() {
아니면 그런 진술을 여러 개 할 수 있습니까?
여러 개를 가질 수 있지만 항상 가장 깔끔한 것은 아닙니다.가독성에 심각한 영향을 미치므로 과도하게 사용하지 마십시오.그 외에는, 완전히 합법적입니다.아래를 참조하십시오.
http://www.learningjquery.com/2006/09/multiple-document-ready
이것을 시도해 보십시오.
$(document).ready(function() {
alert('Hello Tom!');
});
$(document).ready(function() {
alert('Hello Jeff!');
});
$(document).ready(function() {
alert('Hello Dexter!');
});
이와 동등하다는 것을 알게 될 것입니다. 실행 순서를 주목하십시오.
$(document).ready(function() {
alert('Hello Tom!');
alert('Hello Jeff!');
alert('Hello Dexter!');
});
또한 주목할 점은 하나의 함수 안에서 정의된다는 것입니다.$(document).ready블록을 다른 블록에서 호출할 수 없습니다.$(document).ready블록, 이 테스트를 해봤어요
$(document).ready(function() {
alert('hello1');
function saySomething() {
alert('something');
}
saySomething();
});
$(document).ready(function() {
alert('hello2');
saySomething();
});
출력:
hello1
something
hello2
여러 개를 사용할 수 있습니다.그러나 하나의 문서 내에서 여러 기능을 사용할 수도 있습니다.ready:
$(document).ready(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});
// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});
네, 블록을 여러 개 쉽게 가질 수 있습니다.평가 순서가 예상과 다를 수 있으니 두 사람 사이의 의존 관계를 조심하세요.
네, 여러 개의 $(문서)를 가질 수 있습니다.준비중인 전화하지만 그들이 어떤 방식으로 처형될지는 알 수 없을 것 같습니다.(출처)
네, 가능하지만 div #mydiv를 사용하고 둘 다 사용하는 것이 좋습니다.
$(document).ready(function(){});
//and
$("#mydiv").ready(function(){});
더 나은 방법은 명명된 함수로 전환하는 것이라고 생각합니다(해당 주제에 대한 자세한 내용은 이 오버플로를 확인하십시오).그렇게 하면 하나의 이벤트에서 그들을 부를 수 있습니다.
이와 같습니다.
function firstFunction() {
console.log("first");
}
function secondFunction() {
console.log("second");
}
function thirdFunction() {
console.log("third");
}
이렇게 하면 준비된 단일 기능으로 로드할 수 있습니다.
jQuery(document).on('ready', function(){
firstFunction();
secondFunction();
thirdFunction();
});
이렇게 하면 console.log에 다음이 출력됩니다.
first
second
third
이렇게 하면 다른 이벤트에 함수를 다시 사용할 수 있습니다.
jQuery(window).on('resize',function(){
secondFunction();
});
네, 가능합니다.
여러 문서 준비 섹션은 동일한 페이지에서 사용하는 다른 모듈이 있는 경우 특히 유용합니다.옛것과window.onload=func선언, 호출할 함수를 지정할 때마다 기존 함수를 대체했습니다.
이제 지정된 모든 기능은 지정된 문서 준비 섹션에 관계없이 대기열에 있거나 쌓여 있습니다(누군가 확인할 수 있습니까?).
네, 괜찮아요. 하지만 이유 없이 하는 건 피하세요.예를 들어 자바스크립트 파일을 동적으로 생성할 때 개별 페이지가 아닌 글로벌 사이트 규칙을 선언하는 데 사용했지만 계속 반복하면 읽기가 어려워집니다.
또한 다른 메서드에서 액세스할 수 없습니다.jQuery(function(){});그래서 당신이 그렇게 하고 싶지 않은 또 다른 이유입니다.
의 과와 window.onload함수를 지정할 때마다 이전 함수를 교체합니다.
그것은 합법적이지만, 때때로 원치 않는 행동을 야기합니다.예를 들어, 저는 MagicSuggest 라이브러리를 사용하여 프로젝트의 한 페이지에 두 개의 MagicSuggest 입력을 추가하고 입력 초기화 시마다 문서 준비 기능을 별도로 사용했습니다.첫 번째 입력 초기화는 작동했지만 두 번째 입력은 작동하지 않았고 오류도 발생하지 않았습니다. 두 번째 입력이 나타나지 않았습니다.그래서 항상 하나의 Document Ready Function을 사용하는 것을 추천합니다.
포함된 html 파일 안에 문서 준비 기능을 넣을 수도 있습니다.jquery를 사용하는 예는 다음과 같습니다.
파일: test_main.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="main-container">
<h1>test_main.html</h1>
</div>
<script>
$(document).ready( function()
{
console.log( 'test_main.html READY' );
$("#main-container").load("test_embed.html");
} );
</script>
</body>
</html>
파일: test_embed.html
<h1>test_embed.html</h1>
<script>
$(document).ready( function()
{
console.log( 'test_embed.html READY' );
} );
</script>
콘솔 출력:
test_main.html READY test_main.html:15
test_embed.html READY (program):4
브라우저에 표시되는 내용:
test_graphics.
다음과 같은 방법으로도 수행할 수 있습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#test").hide();
});
$("#show").click(function(){
$("#test").show();
});
});
</script>
</head>
<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>
이전의 답변들은 .ready 블록 안에서 여러 개의 명명된 함수들을 사용하는 것을 보여주었습니다. 또는 .ready 블록 안에서 이름이 없는 단일 함수를 사용하는 것을 보여주었습니다.ready 블록 밖에서 다른 명명된 함수를 사용하는 것을 보여주었습니다..ready 블록 안에 여러 개의 이름 없는 함수를 가지는 방법이 있는지 조사하던 중 이 질문을 발견했습니다. 구문을 정확하게 파악할 수 없었습니다.저는 마침내 그것을 알아냈고, 제 테스트 코드를 게시함으로써 제가 가졌던 것과 같은 질문에 대한 답을 찾는 다른 사람들을 도울 수 있기를 희망했습니다.
언급URL : https://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections
'programing' 카테고리의 다른 글
| PHP에서 변수 형식을 변환하는 type casting vs 함수 (0) | 2023.09.08 |
|---|---|
| PowerShell 암호 PFX 파일로 인증서 지문 가져오기 (0) | 2023.09.08 |
| 파워셸이 배치 파일을 실행한 다음 열려 있도록 하려면 어떻게 해야 합니까? (0) | 2023.09.08 |
| jQuery가 업로드 시 파일 형식을 제한하도록 하는 방법은 무엇입니까? (0) | 2023.09.08 |
| iframe 로드 완료 이벤트 캡처 (0) | 2023.09.08 |