原生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>

总结：

  1. 原生js加载页面元素通过window.onload()方法
  2. jquery加载页面元素通过ready()方法
  3. 开发中常用jquery的ready简写写法
  4. 使用jquery需要事先下载jquery库(压缩版和完整版，开发中加载压缩版即可，完整版用于平时读源码)，用srcipt标签导入jquery库的压缩版
  5. 使用jquery库需要另写一个script标签，在里面写jquery代码
  6. ready比windown.load要快的原因是，window.load是等标签加载完，渲染(一些资源文件，如图片，音乐等)完之后再执行，ready是个标签加载完就执行

原生js与jquery加载页面元素比较的更多相关文章

  1. jquery加载页面的方法

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

  2. jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){  $("#a&qu ...

  3. [转]jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

  4. JS和jquery加载的区别

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  6. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  7. 原生js实现懒加载并节流

    像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费.采用懒加载技术,即用户浏览到哪儿,就加载该处的图片.这样节省网络资源.提升用户体验.减少服务器压力. 方法1: ...

  8. js学习之原生js实现懒加载

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 阻止Infinitescroll.js无限滚动加载页面解决方法

    由于某些原因,想终止当前页继续翻页的操作,可在Infinitescroll回调函数中将翻页事件取消. 代码如下: // -- 每页滚屏加载的页数-- var IpageItems = 5; var i ...

随机推荐

  1. Mybatis中动态SQL语句中的parameterType不同数据类型的用法

    Mybatis中动态SQL语句中的parameterType不同数据类型的用法1. 简单数据类型,    此时#{id,jdbcType=INTEGER}中id可以取任意名字如#{a,jdbcType ...

  2. c++ lesson 一（命名空间输入输出）

    // // main.cpp // C++lessonOne // // Created by keyan on 15/11/13. // Copyright © 2015年 keyan. All r ...

  3. 021.Docker mysql启动时执行初始化sql

    1.拉取Mysql镜像 # docker pull mysql:5.7 2.检查mysql镜像 # docker inspect mysql:5.7 ## "Entrypoint" ...

  4. [20190920]完善vim调用sqlplus脚本.txt

    [20190920]完善vim调用sqlplus脚本.txt --//以前写的http://blog.itpub.net/267265/viewspace-2140936/=>[20170617 ...

  5. Webshell篇

    常用方法简介: 一.0day拿webshell 参考工具:织梦漏洞利用小工具 二.通过注入漏洞拿Webshell 前提条件:具有足够权限,对写入木马的文件夹要有写入权限,知道网站绝对路径. 对于mss ...

  6. 在C++工程上添加CUDA编译环境

    1.直接在新建工程的时候选择CUDA,这样的工程既能编译C++也能编译CU 2.在已有的C++工程上添加CUDA编译环境 右键工程-->生成依赖项-->生成自定义-->勾选CUDA ...

  7. Re-androideasy

    题目地址 https://dn.jarvisoj.com/challengefiles/androideasy.apk.17e528e9498d4ae25dc82ad43730a03d 先看看功能 然 ...

  8. 目标检测中的pooling操作

    1.SPPnet池化过程 假设这个feature map的尺寸是M*N*256,将这个feature map的每一个channel以4*4,2*2和1*1来划分格子,每个格子里面做max poolin ...

  9. node.js是用来做什么的？这是我看到最好的解释了

    一种JavaScript的运行环境,能够使得JavaScript脱离浏览器运行. 参考链接:https://www.cnblogs.com/suhaihong/p/6598308.html https ...

  10. python批量json文件转xml文件脚本(附代码)

    场景:在使用了mask rcnn跑实验后标注了大量地json格式文件,现在打算使用yolo和faster rcnn 跑实验 所以需要将之前地json文件转为xml     但是找了很久,没发现有批量处 ...