原生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 ...
随机推荐
- iOS音频与视频的开发（一）-使用AVAudioPlayer播放音乐、使用AVPlayerViewController播放视频
iOS的多媒体支持非常强大,它提供了多套支持多媒体的API,无论是音频.视频的播放,还是录制,iOS都提供了多种API支持.借助于这些API的支持,iOS应用既可以查看.播放手机相册中的照片.视频,也 ...
- Mybatis书写
Mybatis设置主键和自增 方法1: <insert id="insert" parameterType="Person" useGeneratedKe ...
- 需求规格说明书（final）
1. 引言 1.1 编写目的 该文档是关于微信小程序自习吧的功能和性能描述,重点描述了小程序的功能需求,并作为小程序开发设计阶段的主要输入. 本文档的预期读者包括:triple兔成员,软件工程老师,用 ...
- [Linux] 纯净ubuntu系统仓库更换为阿里云的源
1.先apt-get update一下当前默认的源,更新完成后先把vim命令安装一下,再修改源仓库为阿里云,否则无法直接编辑文件 2.先添加阿里云的源,编辑文件/etc/apt/sources.lis ...
- viscode 使用 格式的配置
viscode 现在也越来越适用于 python 开发使用的 IDEA ,慢慢不逊色于 pycharm .下面是关于使用的 格式[字体颜色,背景之类的配置] 1. 2. 如果是设置的 中文显示,在界 ...
- C# 内存管理（一）
引用地址:https://blog.csdn.net/libohuiyuan/article/details/81030010 一.变量类型 C#的变量类型分为值类型,引用类型.指针类型和指令类型.所 ...
- [C12] 大规模机器学习(Large Scale Machine Learning)
大规模机器学习(Large Scale Machine Learning) 大型数据集的学习(Learning With Large Datasets) 如果你回顾一下最近5年或10年的机器学习历史. ...
- 3.web基础$_GET
http://123.206.87.240:8002/get/
- sql 以某个字段分组，另一个字段为参加比较的列，取得前n项的值
假设表A有三个字段 { id int: subject varchar(20): socre int: } 语句为 select * from A x where (select count(*) ...
- FFT_应用和例题
卷积 现有两个定义在 N 上的函数 \(f(n),g(n)\),定义 \(f\) 和 \(g\) 的卷积(convolution)为 \(f \otimes g\) \[ (f \otimes g)( ...