收藏
批改状态：合格
老师批语：
一、jquery的引入方式
jquery有两种引入方式
1、将jquery文件下载的本地后，通过本地引入的方式使用
例如：
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
2、使用在线引入方式，一般使用国内CDN加速服务引入
例如：
<script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
二、$(document).ready(function()) 的简写为 $(function())
代码演示：http://111.231.88.20/front/html/0402/1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的$(document).read()使用方式</title>
<style type="text/css">
div{
text-align: center;
}
.header{
width: 980px;
height: 100px;
background-color: #00CED1;
margin: auto;
}
.main{
width: 960px;
height: 600px;
background-color: #90EE90;
margin: 10px auto;
}
.footer{
width: 980px;
height: 100px;
background-color: #00CED1;
margin: auto;
}
</style>
<!--本地引入方式-->
<!--<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>-->
<!--在线引入方式-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//完整写法
// $(document).ready(function(){
// $(".main").click(function(){
// $(".main").css('background-color','#666666')
// })
// })
//简写
$(function(){
$(".main").click(function(){
$(".main").css('background-color','#666666')
})
})
</script>
</head>
<body>
<div class="header">
网站头部
</div>
<div class="main">
网站内容区,点击变化背景颜色
</div>
<div class="footer">
网站底部
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
1、jquery的两种引入方式各有各的好处，如果是在线环境下的话，我觉得使用在线引入方式比较方便，不用自己把jquery文件放入目录中！
2、$(doucment).ready(function())方法的功能是：在文档加载后激活函数
$(doucment).ready(function()) 和 window.noload(function()) 的区别是
window.noload(function())需要在页面所有元素资源（包括图像、视频等）全部加载完成后才激活函数
$(doucment).ready(function())会在页面的DOM结构加载完成后就激活函数
$(doucment).ready(function())的简写是 $(function)
实际使用中 $(doucment).ready(function())里面的function函数不能省略
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
