码迷,mamicode.com
首页 > 其他好文 > 详细

$(document).on和$('#idname').on和$(function(){ })区别

时间:2021-02-15 12:18:54      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:语法   代码   队列   傻傻   UNC   htm   window   解析   log   

  引言

  在写前端的时候经常用到js或jquery语法,有时候傻傻分不清,现在将学习过程中遇到的总结一下。

  $(function(){ })的使用

  JQuery 的代码我们通常会包裹在一个$(function(){})函数中,jq 的$(function(){})也就是$(document).ready(function(){})的简写,与之对应的原生 js 的window.onload事件,这俩者之间到底有什么区别呢?

$(function () {
    console.log("ready执行");
});
 
$(function() {
    console.log("ready1执行");
});
 
window.onload = function () {
    console.log(‘load执行‘);
};
window.onload = function () {
    console.log(‘load1执行‘);
}

  

  执行结果:

ready执行
ready1执行
load1执行

  这里可以看出两点不同: 
1.$(function(){})不会被覆盖,而window.onload会被覆盖,个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中,在对应时机一次出队。 
2. $(function(){})window.onload执行前执行的,$(function(){})类似于原生 js 中的DOMContentLoaded事件,在 DOM 加载完毕后,页面全部内容(如图片等)完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

  DOM 文档加载步骤:

  1. 解析 HTML 结构
  2. 加载外部的脚本和样式文件
  3. 解析并执行脚本代码
  4. 执行 $(function(){}) 内对应代码
  5. 加载图片等二进制资源
  6. 页面加载完毕,执行 window.onload

  

$(document).on和$('#idname').on和$(function(){ })区别

标签:语法   代码   队列   傻傻   UNC   htm   window   解析   log   

原文地址:https://www.cnblogs.com/liudinglong/p/14397661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!