原生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 ...
随机推荐
- Windows下的DNS命令用法
- ipconfig 查看DNS缓存内容: ipconfig /displaydns 将显示所有缓存的DNS解析结果. 清空DNS缓存内容: ipconfig /flushdns 将清空缓存的DNS解 ...
- emacs bookmark(书签)初次使用
emacs bookmark(书签)初次使用 编辑或者查看多个文件的时候,要想记住刚才在什么地方进行编辑,是很难的.所以emacs的bookmark功能就登场了.你可以在文件的任何地方设置一个书签,然 ...
- [Php] windows下使用composer出现SHA384 is not supported by your openssl extension
composer的版本太低了,需要更新composerwindows的安装使用https://getcomposer.org/Composer-Setup.exe报这个错Failed to decod ...
- iPad替代midi键盘
下载安装rtpMIDI (网络MIDI驱动程序) 打开rtpMIDI,在“My session”那里按下+,就会自动显示你的电脑的名字 检查Bonjour服务正常运行,iPad与pc网络正常连接 iP ...
- 02-webpack的基本配置-运行webpack
1安装webPack的方式 第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了 在项目根录中运行 npm i webpack --save-dev 安装到项目依赖中 ...
- 第50 课C++对象模型分析——成员函数（上）
类中的成员函数位于代码段中调用成员函数时对象地址作为参数隐式传递成员函数通过对象地址访问成员变量C++语法规则隐藏了对象地址的传递过程 #include<iostream> #includ ...
- oracle 循环插入数据
参考链接:oracle 行转列 pivot函数基本用法 --建表 --drop table SalesList; create table SalesList( keHu varchar2(20), ...
- C++ try catch 示例代码
#include<iostream> void f1() { throw std::string("error happen"); } void f2() { try ...
- TestNG.xml 配置
<packages>表示以测试类所在的包的方式定义测试用例,包中的所有测试类都被涉及,粒度较大. <?xml version="1.0" encoding=&qu ...
- 20191031 Codeforces Round #539 (Div. 1) - Virtual Participation
这场怎么全是数据结构题...