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

目录

jQuery引入

离线引入: 

在线引入:

onload事件的几种方式

普通方式

jQuery方式

离线使用:

在线使用


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>


版权声明:本文为qq_40323256原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。