关于js与jquery中的文档加载
jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的
1.jquery中的可以简化为$().ready(),$(function), 而js却不行必须全部写完。
2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个。
3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
下面说说在项目中遇到的问题
先上代码,这个demo中我不用引入jquery包就可以使用类似jquery的$(id)(我个人不建议使用),在这个demo中页面会弹出"1",在此处完全没有问题。
<!DOCTYPE html>
<head>
<title>JS</title>
<script>
function $(id){return document.getElementById(id)};
window.onload = function(){
alert($("aaa").value);
};
</script>
</head>
<body>
<input id="aaa" value="1" />
</body>
</html>
再上代码,此处的问题会报错"Cannot read property 'ready' of null",可以自己先想想为什么。。。
<!DOCTYPE html>
<head>
<title>JS</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
function $(id){return document.getElementById(id)};
$(document).ready(function(){ //这是错误的代码案列
$("#aaa").click(function(){
$("#aaa").hide();
});
});
</script>
</head>
<body>
<a id="aaa" value="1" >aaaaaa</a>
</body>
</html>
问题在与我们对"$"定义了一个函数,同时又想使用jquery提供的"$",所以报错"Cannot read property 'ready' of null",问题在于我们写的"$"影响了$(document)这块,所以还是老老实实导包,别嫌麻烦,不然出现bug,要是在不熟悉的其中语法(代码就一行,项目大的话还不容易发现。o(╥﹏╥)o),改bug就要更长的时间,也是醉了。
关于js与jquery中的文档加载的更多相关文章
- jQuery在HTML文档加载完毕后自动执行某个事件;
原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...
- 原生JS与jQuery文档加载完毕的写法
HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...
- jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)
jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jquery文档加载几种写法,图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
- document.write : 什么是在html输出中使用,什么是文档加载后使用?
理解:您只能在 HTML 输出中使用 document.write.如果您在文档加载后使用该方法,会覆盖整个文档. Javascript中只能在 HTML 输出流中使用 document.write, ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- js坚持不懈之14:不要在文档加载之后使用 document.write()示例
在看w3school的JavaScript教程时,关于文档输出流中有这么一句话:绝不要在文档加载之后使用 document.write().这会覆盖该文档. 不太明白什么意思,找了一个例子: < ...
随机推荐
- 团队项目-记账App
一.团队成员介绍 队长: 向瑜 博客园地址: https://www.cnblogs.com/xiangyu721/ 沟通能力较强,善于总结,能够正确分配团队任务.其次,有耐心学习新事物,发现新问题 ...
- Eclipse工具的简单使用
前言 虽然编写Java用Idea比较好,但是对于正处于大学阶段的我,还是要和老师的步伐保持一致,但是,用的Idea这个工具多了,我就感觉对eclipse这个工具不是怎么熟悉了,甚至还有点对一些工具的使 ...
- MySQL数据的增删改查查查查查查查查查查查查查查查查(查是真的多)
一 数据的增加 主要是运用insert into 语句. 格式: insert into 表名称 values(数据,数据,数据)(要按顺序来,有没有数据的可以加null) 只增加某些字段里数据的 ...
- MySQL“被动”性能优化汇总!
年少不知优化苦,遇坑方知优化难. --村口王大爷 本文内容导图如下: 我之前有很多文章都在讲性能优化的问题,比如下面这些: <switch 的性能提升了 3 倍,我只用了这一招!> < ...
- 2020-06-02:千万级数据量的list找一个数据。
福哥答案2020-06-02: 对于千万级长度的数组单值查找:序号小的,单线程占明显优势:序号大的,多线程占明显优势.单线程时间不稳定,多线程时间稳定. go语言测试代码如下: package mai ...
- JMeter软件测试工具介绍及基本安装教程
一.工具介绍 (一)简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试 ...
- 在.NET Core中使用MongoDB明细教程(1):驱动基础及文档插入
MongoDB,被归类为NoSQL数据库,是一个以类JSON格式存储数据的面向文档的数据库系统.MongoDB在底层以名为bson的二进制编码格式表示JSON文档,MongoDB bson实现是轻量级 ...
- hge引擎示例教程cmake项目
hge引擎的示例代码在vs2017不能很好的运行,需要调不少东西,所以我将其重新整理成cmake的项目. 所有示例均在vs2017 msvc 下测试可以正常运行. 由于缺少libhgehelp.a所以 ...
- 【Floyd】珍珠
[题目描述] 有n颗形状和大小都一致的珍珠,它们的重量都不相同.n为整数,所有的珍珠从1到n编号.你的任务是发现哪颗珍珠的重量刚好处于正中间,即在所有珍珠的重量中,该珍珠的重量列(n+1)/2位.下面 ...
- 【Hyeri】上传本地代码到Github
个人摸索出的上传本地代码到Github的办法 首先配置SSH Key(首次需要配置) 1.设置本地ssh key,打开git bash,输入命令: ssh -keygen -t rsa -C &quo ...