原生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 ...
随机推荐
- [20190524]DISABLE TABLE LOCK(12c).txt
[20190524]DISABLE TABLE LOCK(12c).txt --//如果禁止table lock时,一些ddl操作会被禁止.但是我有点吃惊的是增加字段不受限制.--//链接:http: ...
- 7.python3实用编程技巧进阶（二）
2.1.如何拆分含有多种分隔符的字符串 #2.1.如何拆分含有多种分隔符的字符串 s = 'ab;cd|efg|hi,jkl|mn\topq;rst,uvw\txyz' #第一种方法 def my__ ...
- rabbitmq pika（python）订阅发布多客户端消费场景简单使用
发布端: import pika import time credentials = pika.credentials.PlainCredentials('root', 'root',erase_on ...
- jQuery—自定义HTTP请求
Ajax设置自定义请求头的两种方法 $.ajax({ url: 'http://www.baidu.com', type: 'get', data: JSON.stringify({"nam ...
- [PHP] 现代化PHP之路：composer的安装和升级
1.下载一个脚本文件 wget https://getcomposer.org/installer 2.php执行下这个php脚本 php installer 3.把下载的文件转移到一个PATH环境变 ...
- 5-1可视化库Seabon-整体布局风格设置
In [1]: import seaborn as sns import numpy as np import matplotlib as mpl import matplotlib.pyplot a ...
- luoguP4343自动刷题机（二分标准题）
https://www.luogu.org/problem/P4343 参考博客:https://www.luogu.org/blog/ofnoname/solution-p4343 这真是一语点醒梦 ...
- JWT签名算法中HS256和RS256有什么区别 转载
JWT签名算法中,一般有两个选择,一个采用HS256,另外一个就是采用RS256. 签名实际上是一个加密的过程,生成一段标识(也是JWT的一部分)作为接收方验证信息是否被篡改的依据. RS256 (采 ...
- day51_9_15_Django
一.pycharm接受网页信息原理. 如何实现在后端接受浏览器的数据,并解析出有用的信息呢? 使用socket编写网络连接,然后通过浏览器访问ip+端口号. import socket def ind ...
- 题解：openjudge 1.11——01
题目 思路:二分查找 来,上代码 #include<cstdio> #include<iostream> using namespace std; +]; int n,m; i ...