收藏
批改状态：合格
老师批语：
jquery的两种引入方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的两种引入方式</title>
</head>
<body>
<h2>php中文网</h2>
<!-- 1.本地引入
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<!-- 2.外部引入 -->
<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('www.php.io')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
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: 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')
})*/
//简写:
$(function(){
$('#list > li').addClass('horiz')
})
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>个人必备
<ul>
<li><a href="">京东</a></li>
<li>手机</li>
<li>相机</li>
</ul>
</li>
<li>省钱利器
<ul>
<li><a href="">购物</a></li>
<li>拼多多</li>
<li>钱多多</li>
</ul>
</li>
</ul>
<!-- <script type="text/javascript">
$('#list > li').addClass('horiz')
</script> -->
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：通过学习jquery的本课程学会了如何本地和外部引用jquery；以及如何把jquery从原来的写在代码最后放到head中；
学会了$(选择器).css(方法)。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
