Jquery中$(function(){})
1. 在哪书写js文件
如果我们要执行一段js代码,我们该怎么办呢?
1.我们可以写一个js文件,在js文件里写执行函数,然后再<script src='...'> ... </script>,进行引用;
2.我们可以直接在HTML页面下,插入脚本,同样是<script src='...'> ... </script>,两种方式没什么区别,唯一的区别就是程序的解耦,所以当我们执行的js代码不太多时候,我推荐在HTML页面下直接书写,反则...。
2. $(function(){}); 其实是一个简写,它等同于 jquery 的 $(document).ready(function(){})。
我们知道HTML页面在JavaScript里面有BOM对象和DOM对象,BOM是浏览器对象模型,用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值。
BOM的内容不多,主要还是DOM。
同样的,我们可以用Jquery来操作BOM和DOM,这儿就引出了本文主旨:$(document).ready(function(){})
现在我们开始执行js文件,但这样有个问题,就是对于某些浏览器来说,如果其中的代码涉及到某个 dom 节点的位置在这段代码之后的话就可能会失败。原因是代码在 html 文档的前面,浏览器读到它的时候就执行了,而 dom 节点在它后面浏览器还没读取到呢,所以不知道怎样去操作这个节点,于是报错了。你会说为什么不等到所有节点都读取完了再回头执行 js 代码呢?关键是有些代码就是想在页面出来一部分时就执行了啊。所以对于那些在页面读取完才执行的代码通常会放到 onload 中去。但 onload 又有自己的问题,比如 onload 的 window 的还有 body 的,执行的时机很是不好确定。于是 jquery 推出了 $(document).ready(function(){}) 它的设计目标有以下几个(可看作 jquery 的 ready 函数与 js 的 onload 的区别):
1.执行时间
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行;
$(document).ready() 是 dom 结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行。
特别是第二点,大大的方便了代码初始化的分离操作(解耦),确实是 jquery 对开发人员的巨大贡献。否则各个代码块中都要自己想办法在初始化函数中加入自己的那一部分,会相当的混乱。
另外传统是 onload 是这样写的:
<body onload="fn1(),fn2()"></body>
而我们提到的 $(document).ready() 是 dom 解析完成后,不用等待图片等资源加载即可开始执行了,那么要等待的话怎么办呢?难道要写上面那种传统的代码吗?当然不是,jquery 中是使用 $(window).load(function()。例如:
$(window).load(function() {alert("hello,我是jQuery!");});
而且这个函数同样可以写多个,它们之间同样不会覆盖。会依次顺序执行
Jquery中$(function(){})的更多相关文章
- jQuery中的end()
要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部 ...
- jQuery中$(function(){})与(function($){})(jQuery)的区别
首先,这两个函数都是在页面载入后执行的函数,其中两者的区别在于: 在jQuery中$(function(){})等同于jQuery(function(){}),另一个写法为jQuery(documen ...
- 转:jquery的$(function(){})和$(document).ready(function(){}) 的区别
原文链接:https://www.cnblogs.com/slyzly/articles/7809935.html [转载]jquery的$(function(){})和$(document).rea ...
- window.onload和JQuery中$(function(){})的区别即其实现原理
一.区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 在Jquery中$(function(){ })和$(document).ready(function(){ ...
- JQuery中的each()的使用
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理. jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单 ...
- 使用原生javascript实现jquery的$(function(){ })
在使用jquery的时候,经常用到$(function(){})方法或者是$(document).read(function(){})来作为页面dom节点加载完成之后javascript的执行入口,现 ...
- jQuery.proxy(function,context)
jQuery.proxy(function,context) 概述 jQuery 1.4 新增.返回一个新函数,并且这个函数始终保持了特定的作用域.大理石平台检定规程 当有事件处理函数要附加到元素上, ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jquery中的get和set
jquery中通过参数的个数来判断是get方法还是set方法: css: function(name, value ) { return value !== undefined ? jQuery.st ...
- jQuery基础之(二)jQuery中的$
在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuer ...
随机推荐
- Vue刷新token,判断token是否过期
1.判断token是否过期,前端请求后,后台会返回一个状态给你.根据状态判断是否过期,刷新token 2.是否每次请求后端都会返回新的token给你.或者后端给你定义了一个刷新token的方法,那此时 ...
- 解决使用脚手架构建项目缺失node_modules文件夹文件问题
昨晚,在教我前端交流群里面的朋友搭建vue开发环境和构建vue项目的时候发现我自己之前能正常构建vue项目的现在却不行了,排查之下发现 通过脚手架构建项目的时候项目缺失了node_modules文件夹 ...
- 安装vue-cli脚手架项目
1,下载安装node.官网下载后,重新打开cmd再打开. 命令:node -v检测版本. 2,安装vue-cli: 命令:npm install --global vue-cli .根据安装情况,会 ...
- linux运维、架构之路-Kubernetes离线、二进制部署集群
一.Kubernetes对应Docker的版本支持列表 Kubernetes 1.9 <--Docker 1.11.2 to 1.13.1 and 17.03.x Kubernetes 1.8 ...
- ASP:CheckBox获取前台的checked的属性
后台代码: for (int i = 0; i < this.GvCourses.Rows.Count; i++) { CheckBox chb = this.GvCourses.Rows[i] ...
- React-router的基本使用
1.安装使用 $ npm install -S react-router import { Router, Route, hashHistory } from 'react-router'; rend ...
- 批量下载文件JSP
最近项目有个需求,用户想对挂有附件的数据记录 实现一键下载全部附件(目前项目仅支持每次点击单条记录进行附件下载),下面记录我实现的解决方案.项目框架基于SSMservice业务实现层(impl):// ...
- 把图片画到画布上,适应PC和移动端
画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...
- C++中一些容易迷惑的语法点总结
#include<iostream> #include<cstring> using namespace std; int main(){ ][]={{,,},{,,}}; ] ...
- navigation ObtacleCostFunction源码分析
ObtacleCostFunction 定义了一个ObstacleCostFunction类,继承自Trajectory类,Trajectory类有8个类参 总共有8个类参 double xv_,yv ...