关于JS与jQuery中的文档加载问题

2024-10-01 15:58:28

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中的文档加载问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JS实现文档加载完成后执行代码

在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style type="text/css"> div{ width:200px; height:200px; } </style
Jquery的基本对象转换和文档加载用法实例

本文实例讲述了Jquery的基本对象转换和文档加载用法.分享给大家供大家参考.具体如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法

本文实例讲述了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法.分享给大家供大家参考,具体如下: 原来onchange="fucntionname(parms)": <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border
关于JS与jQuery中的文档加载问题

jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function), 而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(documen
JavaScript文档加载模式以及元素获取

一.文档加载模式 1.事件三要素:事件源(触发时间的元素):事件名称(click点击事件):事件处理程序(事件出发后要执行的代码函数形式)存在问题:浏览器加载一个页面的时候,是按照自上而下的顺序加载的,若将script标签写到head内部,在代码执行时候,页面还没有加载,页面中的DOM对象也没有加载.就会导致js中无法获取页面中的DOM对象.解决方法:onload事件,会在整个页面加载完之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确
vue.js整合vux中的上拉加载下拉刷新实例教程

前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图创建项目使用vue-cli 创建一个vue项目安装vux
基于jQuery的$.getScript方法去加载javaScript文档解析

1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function(data){ var html ="<table border='1' cellpadding='2'>"; $.each(comments, function(Index, comment) { html += '<tr><td>' + commen
MongoDB集合中的文档管理

上一博客写了集合的管理,集合里面存放的是文档,因此聪明的你应该能想到这篇是学习文档管理.要说标题应该是文档管理,不过对于文档的管理都是先获得集合对象,在集合对象上调用方法管理文档,所以标题还是对集合的管理. 在集合管理中,要管理集合首先要获得这个集合,同样文档管理也是要先获得集合对象,然后通过集合对象管理文档. 一.将文档添加到集合中为什么要先说添加呢,因为不添加就没法说下面的查找.将文档添加到一个集合中,首先需要得到集合对象,通过几个对象调用insert(document)或save(doc
PHP库查询Mongodb中的文档ID的方法

在IBM我的一份新工作是一名开发的后勤人员.那意味着我的大部分时间是在和数据库打交道.在我的工作流程中,我花了一些时间在MongoDB上面--这是一个文档数据库.但是在通过ID来检索记录这个操作上面我碰到了一些问题.下面的代码是最终版本,以后碰到类似的问题我可以直接引用它.如果大家也需要,希望下面对大家有所帮助. MongoDB 和 IDs 当我向一个集合中插入数据的时候,我并没有设置_id字段:如果这个字段是空的话,那么MongoDB将要自动生成一个ID来使用,这对我来说是非常不错的.然而,当
MongoDB中对文档的增删查改基本操作方法总结

插入文档:insert() 方法要插入数据到 MongoDB 集合,需要使用 MongoDB 的 insert() 或 save() 方法. 语法: insert() 命令的基本语法如下: >db.COLLECTION_NAME.insert(document) 例子: >db.mycol.insert({ _id: ObjectId(7df78ad8902c), title: 'MongoDB Overview', description: 'MongoDB is

关于JS与jQuery中的文档加载问题

相关推荐

随机推荐