jQuery本地引入：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery本地引入</title>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>点击我会弹出欢迎对话框</h2>
<script type="text/javascript">
$('h2').click(function(){
alert('欢迎您！')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jQuery外部引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery外部引入</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h2>点击我会弹出欢迎对话框</h2>
<script type="text/javascript">
$('h2').click(function() {
alert('欢迎您！')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
$(document).ready使用方式学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>$(document).ready使用方式学习</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function() {
alert("hello!")
})
})
</script>
</head>
<body>
<h2>点击我会弹出欢迎对话框</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
$(document).ready简写使用方式学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>$(document).ready简写使用方式学习</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("h2").click(function() {
alert("hello!")
})
})
</script>
</head>
<body>
<h2>点击我会弹出欢迎对话框</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
学习总结：
1、内容比较简单，要注意拼写方式，否则易出错误；
2、$(document).ready很方便，减少了大量代码的输入。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
