页面加载方式和JQ函数调用问题



三种页面加载方式

1.只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM之前就执行js效果,包括在加载外部图片和资源之前

1
2
3
$(document).ready(function(){

})

2.简写方式

1
2
3
$(function() { 

});

注意:如果两种方式都有的话

1
$(document).ready(function(){})

先被执行,而

1
$(function(){})

后被执行。

3.onload

弊端:会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。

1
2
3
window.onload = function(){ 

});

Jquery函数调用

例如鼠标移动事件

1
2
3
4
5
6
// 确保页面的dom全部加载完成,不然可能jquery.js也在加载中,就不能使用
$(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});

或者原生Js函数绑定使用

1
2
3
4
5
6
7
<p onmouseover='showTitle()'>鼠标移动到该段落。</p>

<script>
function showTitle(){
$("p").css("background-color","yellow");
}
</script>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信