1、jQuery的两种引入方式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的两种引入方式</title>
</head>
<body>
<h2>好好学习</h2>
</body>
</html>
<!-- 1.本地引入 -->
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<!-- 2.cdn在线引入（如百度静态资源库） -->
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、jQuery的几种执行方式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的执行方式</title>
<style type="text/css">
.horiz{
float: left;
list-style: none;
margin-left: 10px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 2.使用window.onload：等页面DOM元素和所有资源加载完毕后立即执行
// window.onload = function(){
// $('#list>li').addClass('horiz')
// }
// 3.$(document).ready()：只需等页面的DOM元素加载完毕即可执行
// $(document).ready(function(){
// $('#list > li').addClass('horiz')
// })
// 4.$(document).ready的简写方式
$(function(){
$('#list > li').addClass('horiz')
})
</script>
</head>
<body>
<h2>喜欢的电影</h2>
<ul id="list">
<li>爱情片
<ul>
<li>《罗马假日》</li>
<li>《泰坦尼克号》</li>
<li>《假如爱有天意》</li>
</ul>
</li>
<li>喜剧片
<ul>
<li>《大话西游》</li>
<li>《小鬼当家》</li>
<li>《三傻大闹宝莱坞》</li>
</ul>
</li>
<li>剧情片
<ul>
<li>《肖申克的救赎》</li>
<li>《小萝莉的猴神大叔》</li>
<li>《我的名字叫可汗》</li>
</ul>
</li>
</ul>
</body>
</html>
<!-- 1.放在最后面等页面元素加载完执行 -->
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('#list>li').addClass('horiz')
</script> -->运行实例 »
点击 "运行实例" 按钮查看在线实例
