您的位置：首页 > Web前端 > JQuery

原生js与jquery加载页面元素比较

2019-08-05 16:38 1126 查看

原生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是个标签加载完就执行
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航