收藏
批改状态：未批改
老师批语：
jQuery作为一个优秀的JavaScript代码库，能够有效地提高编程效率，避免原生代码的繁琐工作
1.jQuery的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的引入方式</title>
</head>
<body>
<h1>点击测试</h1>
</body>
</html>
<!-- jQuery就是一个普通的js外部文件 -->
<!-- 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">
$('h1').click(function() {
alert('引入成功');
})
</script>点击 "运行实例" 按钮查看在线实例
效果图：
2.$(document).ready()使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$(document).ready()使用方式</title>
<style type="text/css">
.horiz {
float: left;
list-style-type: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// window.onload:在页面元素全部加载完成后会自动调用的事件
window.onload = function() {
$('li').addClass('horiz');
}
// $(document)获取整个HTML文档
// ready()加载完成之后
// $(document).ready(function() {
// $('li').addClass('horiz');
// })
// 简写
// $(function() {
// $('li').addClass('horiz');
// })
// $(document).ready() ------- window.onload()
// 页面的渲染顺序
// 1.第一步 生成DOM结构
// 2.加载资源：图片，文件
// window.onload()：必须要等到加载资源全部完成才会触发
// $(document).ready()：只要生成DOM结构就会触发
</script>
</head>
<body>
<h1>列表</h1>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
总结：
jQuery实质就是对JavaScript的封装
页面的渲染顺序
1.第一步：生成DOM结构
2.第二步：加载资源：图片，文件
window.onload()：必须要等到加载资源全部完成才会触发
$(document).ready()：只要生成DOM结构就会触发
相比于window.onload()，$(document).ready()更有优势，例如网站中图片过多，window.onload()等待时间则会很长，而运用$(document).ready()，则能配合ajax，先生成小的图片，再逐渐退换，增强用户体验
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
