实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的两种引入</title>
</head>
<body>
<h2>中文网</h2>
</body>
</html>
<!-- 本地引入 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 在线引入 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('h2').click(function(){
alert('成功！')
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$(document).ready()使用方式与简写</title>
<style type="text/css" media="screen">
.horiz{
float: left;
list-style-type: none;
padding: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#list>li').addClass('horiz')
})
// ready()方法更好，只要生成了DOM结构就能执行
// window.onload = function () {
// $('#list > li').addClass('horiz')
// }
// onload方法必须要全部执行完成后，才执行
// 网页渲染顺序：
// 第一步：生成DOM结构
// 第二步：加载资源
// window.onload()：等到加载资源全部完成才会触发
// $(document).ready()：只要生成DOM结构就会触发
</script>
</head>
<body>
<h2>列表</h2>
<ul id="list">
<li>项目1</li>
<li>项目2</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
