jQuery中的页面载入（$()、ready(fn)、onload）

最新推荐文章于 2021-11-27 17:58:01 发布

不动声色的小蜗牛

最新推荐文章于 2021-11-27 17:58:01 发布

阅读量399

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107445852

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用jQuery进行页面载入时有集中方式，我们通过例子来说明一下：

第一种（通过window.onload()）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

		<script>
            
			function t(){
				//通过attr()方法为id属性值为jd的href赋值
				$("#jd").attr("href","https://www.jd.com/");
			}
			
		</script>
		
	</head>
	<body>

		//此时该a标签没有超链接，我们通过jQuery来为其添加超链接
		<a id="jd">京东</a>
		
	</body>
</html>

但此时我们会发现，“京东”并没有超链接，因为代码从上往下，依次执行，执行到<script></script>元素中时，JavaScript中的t()函数方法并没有找到一个id值为jd的标签，所以就不能添加相应的属性及属性值。

那要怎么解决这个问题呢？这就要用到window.onload()，它的作用就是要等到整个页面加载完成时，才能执行JavaScript中的t()函数方法，此时就可以找到id值为jd的标签了。

那问题是在哪加？

答案有两种：一种是直接在function t(){}方法前加上“<mark>window.onload = </mark>”就可以了；另一种就是在body标签栏里添加“onload = "t()"”。

第二种（通过ready(fn)）:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

		<script>
            
			$(document).ready(function(){
				$("#jd").attr("href","https://www.jd.com/");
			});
			
		</script>
		
	</head>
	<body>

		//此时该a标签没有超链接，我们通过jQuery来为其添加超链接
		<a id="jd">京东</a>
		
	</body>
</html>

$(document).ready()可以执行N次，所以不需要添加其他的东西就可以了

第三种（直接通过$(fn)）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

		<script>
            
			$(function(){
				$("#jd").attr("href","https://www.jd.com/");
			});
			
		</script>
		
	</head>
	<body>

		//此时该a标签没有超链接，我们通过jQuery来为其添加超链接
		<a id="jd">京东</a>
		
	</body>
</html>

其实这一种就是第二种的简化版。

不动声色的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery中的页面载入（$()、ready(fn)、onload）

用jQuery进行页面载入时有集中方式，我们通过例子来说明一下：第一种（通过window.onload()）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> &l
复制链接

扫一扫