原生js与jquery加载页面元素比较
原生js：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，js提供了window.onload 这个方法事先加载元素
<script type="text/javascript">
window.onload = function(){
......
};
</script>
jquery：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
可以简写为：
<script type="text/javascript">
$(function(){
......
});
</script>
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 1 原生js加载页面元素，window.onload()
window.onload = function(){
var oDiv = document.getElementById('div1');
alert('原生弹出的'+oDiv);
};
// 2 jquery加载页面元素，ready()
// 2.1 ready完整写法：
$(document).ready(function(){
var $div=$('#div1');
alert('这是jquery弹出的'+$div);
});
// 2.2 ready简单写法(开发中最常用)：
$(function(){
var $div=$('#div1');
alert('这是jquery弹出的'+$div);
});
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
总结：
- 原生js加载页面元素通过window.onload()方法
- jquery加载页面元素通过ready()方法
- 开发中常用jquery的ready简写写法
- 使用jquery需要事先下载jquery库(压缩版和完整版，开发中加载压缩版即可，完整版用于平时读源码)，用srcipt标签导入jquery库的压缩版
- 使用jquery库需要另写一个script标签，在里面写jquery代码
- ready比windown.load要快的原因是，window.load是等标签加载完，渲染(一些资源文件，如图片，音乐等)完之后再执行，ready是个标签加载完就执行
原生js与jquery加载页面元素比较的更多相关文章
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&qu ...
- [转]jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- JS和jquery加载的区别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- JQuery和原生JS跨域加载JSON数据或HTML。
前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...
- 原生js实现懒加载并节流
像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费.采用懒加载技术,即用户浏览到哪儿,就加载该处的图片.这样节省网络资源.提升用户体验.减少服务器压力. 方法1: ...
- js学习之原生js实现懒加载
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 阻止Infinitescroll.js无限滚动加载页面解决方法
由于某些原因,想终止当前页继续翻页的操作,可在Infinitescroll回调函数中将翻页事件取消. 代码如下: // -- 每页滚屏加载的页数-- var IpageItems = 5; var i ...
随机推荐
- CSS基本选择器是什么？基本选择器是如何工作
基本选择器介绍 基本选择器又分为六种使用方式:如.通用选择器.标签选择器.类选择器.Id选择器.结合元素选择器.多类选择器. 基本选择器使用说明表. 选择器 语法格式 含义 举例 通用选择器 *{属性 ...
- idea中git标签（tag）的创建与使用
1.什么是标签 通常,发布一个版本时,会在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来. 所以,标签也是 ...
- unity_animator_stop_replay(重新播放)
对于一个Animation重复播放,但在隐藏后,再次显示播放会出现有些属性未复原 问题描述 特效同事给的Animation中更改了物体的很多属性,如Active,Alpha, Scale,Positi ...
- (四)Amazon Lightsail 部署LAMP应用程序之扩展PHP前端
扩展PHP前端 既然PHP前端和数据库是分开的,您将为Web层添加可伸缩性和容错性: 在以下步骤,您将获取Web前端实例的快照,并从该快照部署另外2个Web层实例.最终,您将在三个Web实例前面添加一 ...
- python session保持登录，新增地址，并删除，由观察可知，address_id决定删除的内容；
import requests,reheaders={"User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) Ap ...
- 如何在类中根据枚举值，获取枚举的message的工具类
枚举类为: public enum OrderStatusEnum implements CondeEnum{ NEW(0, "新订单"), FINISHED(1, "完 ...
- 二，java框架学习
二,java框架学习 实体类的编写规则 实体类里面的属性是私有的 私有属性使用公开的set,get,方法操作 要求实体类有属性作为唯一值(一般使用id值) 实体类属性建议不使用基本数据类型,使用基本数 ...
- luoguP2597 [ZJOI2012]灾难
题意 这题思路好奇怪啊 见到有向无环图显然是要拓朴排序,不妨按照被吃向吃连边,那么\(x\)灭绝当且仅当x的入点都灭绝,于是考虑怎样x的入点都灭绝 比如4号节点,它灭绝当且仅当2和3灭绝,2和3灭绝当 ...
- go 接收发送文件
package main import ( "fmt" "os" "net" "io" ) //发送文件内容 func ...
- ubuntu中安装rabbitmq服务并成功启动
在我们使用rabbitmq时,首先要对其进行安装,而后才能对其进行使用 安装 Erlang 由于 RabbitMQ 是采用 Erlang 编写的,所以需要安装 Erlang 语言库.就像 java 需 ...