jQuery的引入及onload事件的几种方式

疆~

已于 2022-04-10 11:52:31 修改

阅读量6.5k

点赞数 1

文章标签： jQuery

于 2019-04-13 10:20:11 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/89278266

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery官网：https://jquery.com/

jQuery引入

离线引入：

下载：https://jquery.com/download/

在线引入：

通过cdn 引入，更多参考：https://www.runoob.com/jquery/jquery-install.html

3.5.1版本的

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

2.1.4版本的

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

onload事件的几种方式

普通方式

比如现在我们要实现如下功能：弹出“helloworld”对话框，普通的方式有以下几种

第一种方式：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function init() {
            alert("helloWorld");
        }
    </script>
</head>

<body onload="init()">
</body>

</html>

第二种方式：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function init() {
            alert("helloWorld");
        }
        window.onload = init();
    </script>
</head>

<body>
</body>

</html>

第三种方式：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            alert("helloWorld");
        }
    </script>
</head>

<body>
</body>

</html>

jQuery方式

离线使用：

新建web项目，导入jQuery进js文件夹

第一种方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			function init(){
				alert("helloWorld");
			}
			$(init);//用来指定网页加载完成后要执行的函数
			
		</script>
	</head>
	<body>
	</body>
</html>

第二种方式：（此方法貌似最简单）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			$(function(){
				alert("helloworld");//用匿名函数的方式。表示网页加载完成后执行此匿名函数
			})
		</script>
	</head>
	<body>
	</body>
</html>

在线使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <script type="text/javascript">
        $(() => alert("helloWorld"));
    </script>
</head>

<body>
</body>

</html>

疆~

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery的引入及onload事件的几种方式

（一）jQuery下载链接：https://pan.baidu.com/s/1ODSzeDbx1geKrDuwTuqvhw提取码：pz0e（二）onload事件的几种方式（普通方式，jQuery方式）新建web项目，导入jQuery进js文件夹比如现在我们要实现如下功能：弹出“helloworld”对话框，普通的方式有以下几种第一种方式：<!DOCT...
复制链接

扫一扫