jQuery从入门到熟练(27)

2、jQuery 中的 $(function(){})

<h1>测试window.onload与$(document).ready()</h1><img src='http://fs.qqfile.top/re/aHR0cHM6Ly9nc3MwLmJkc3RhdGljLmNvbS81YlZXc2pfcF90VlM1ZEtmcFVfWV9EMy9yZXMvci9pbWFnZS8yMDE3LTA1LTE5LzZmZWM3MWQ1NjI0MmI3NGViMjRiNGFjODBiODE3ZWFjLnBuZw2' referrerpolicy='no-referrer'' ><!--区别: window.onload与 $(document).ready() * window.onload * 包括页面的图片加载完后才会回调(晚) * 只能有一个监听回调 * $(document).ready() * 等同于: $(function(){}) * 页面加载完就回调(早) * 可以有多个监听回调--><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript"> /* 需求：
1. 直接打印img的宽度，观察其值 2. 在 $(function(){}) 中 打印 img 的宽度 3. 在 window.onload 中打印宽度 4. 在 img 加载完成后打印宽度 */ // 1. 直接打印img的宽度，观察其值 console.log("直接", $("#logo").width()) window.onload = function () { console.log("onload", $("#logo").width()) } window.onload = function () { console.log("onload2", $("#logo").width()) } $(function () { console.log("ready", $("#logo").width()) }) $(function () { console.log("ready2", $("#logo").width()) }) $("#logo").on("load", function () { console.log("img load", $(this).width()) }) /*$(document).ready(function () { })*/</script>