JQuery-- onload, 준비 방법 자세히 설명
- 巴扎黑원래의
- 2017-06-25 10:29:451337검색
페이지가 로드되면 두 가지 이벤트가 있습니다. 하나는 문서 구조가 로드되었음을 나타내는 준비(images와 같은 텍스트가 아닌 미디어 파일 제외)이고 다른 하나는 onload입니다. 페이지에 이미지와 같은 파일이 포함되어 있음을 나타냅니다. (즉, Ready는 onload 전에 로드됩니다!!!)
이미지 크기 제어와 같은 일반적인 스타일 제어는 onload에 로드됩니다.
jS 이벤트 트리거링 방법 준비된 상태로 로드할 수 있습니다.
jQ를 사용하는 많은 사람들은 다음과 같이 스크립트를 작성하기 시작합니다.
-
일반적인 작성 방식
$(function(){ // do something }); -
사실 이것은 jq Ready()의 약어입니다.
$(document).ready(function(){ //do something }) -
도 과 동일합니다. 다음 메소드는 jQuer의 기본 매개변수입니다: "document ";
$().ready(function(){ //do something })
$(document).Ready() 메소드 VS OnLoad 이벤트 VS $(window).load() 메소드
문의 JQuery 일반적으로 가장 먼저 배우는 것은 이벤트를 시작할 시기입니다. 오랫동안 페이지가 로드된 후 트리거된 이벤트는 "Body"의 Onload 이벤트에 로드되었습니다.
JQuery의 Ready 메서드와 비교할 때 Body의 Onload 이벤트에는 많은 단점이 있습니다.
Body.Onload 이벤트의 경우 모든 페이지 콘텐츠가 로드될 때까지 트리거되지 않습니다. 이는 사진, 플래시 등을 포함한 모든 콘텐츠를 의미합니다. 페이지에 콘텐츠가 많으면 사용자를 오랫동안 기다리게 만들 것입니다. 오랜만입니다.
$(document).ready() 메소드의 경우 이 메소드는 페이지의 모든 DOM이 로드된 후에만 트리거됩니다. 의심할 여지없이 웹페이지 속도가 훨씬 빨라집니다.
cb116c637d110a2bae602a260ab1cbec
36cc49f0c466276486e50c850b7e4956
在Onload事件中 只能这样加载，很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行
加载 多个函数的问题
代码和内容不分离
这个貌似不用说了，让人深恶痛绝-.-!!执行先后顺序不同
但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.
<script type="text/javascript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法
<script type="text/javascript">
$(window).unload(function() {
alert("good bye");
});
</script>
上面代码会在页面关闭时引发.
在 所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法
<body>
<script type="text/javascript">
(function() {
alert("hi");
})(jQuery)
</script>
</body>对， 就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：
<body>
<p id="test">this is the content</p>
<script type="text/javascript">
alert($("#test").html());//I Can display the content
</script>
</body>
<body>
<script type="text/javascript">
alert($("#test").html());//I Can't display the content
</script>
<p id="test">this is the content</p>
</body>上面两段代码,
第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.
위 내용은 JQuery-- onload, 준비 방법 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!