收藏
批改状态：合格
老师批语：
一、学习心得
1，今日正式进入JQ学习阶段，通过前面学习的JS基础知识，小牛试刀感觉到了JS在前端编程的魅力，学习JQ是对JS合理高效的编程最好的应用。
2，今日主要学习了jq引用和$(document).ready()，两种最基础，但是很重要的知识点。一起进入JS最优秀的框架JQ学习中来吧。
二、知识点
1，jquery引用方式
共有两种方式，本地直接引入：官网下载好jquery-3.3.1.js文件放到本地，修改属性src直接引用。CDN网络资源引用：推荐使用百度静态资源库找到jquery-3.3.1.js网络地址，同样修改src为CDN网址即可。
1）效果图
2）源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery引用方式</title>
</head>
<body>
<h2>测试JQ是否引用成功</h2>
</body>
</html>
<!-- 第一种：本地引入 -->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$('h2').click(function(){
alert('如果看到我，JQ是本地方式是引入成功的')
})
</script>
<!-- 第二种：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('如果看到我，JQ是CND方式是引入成功的')
})
</script>点击 "运行实例" 按钮查看在线实例
2，$(document).ready()使用方式
1）加载事件共用两种方法：window.onload（）和$(document).ready()，二者区别：
window.onload（）：页面元素全部加载完成以后再去执行
$(document).ready()：只要生成DOM结构就会触发
推荐使用：$(document).ready()，效率更高，用户体验更好
2）代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$(document).ready()使用说明</title>
<style type="text/css">
.list_stype {
float: left;
list-style-type: none;
background-color: blue;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
window.onload = function() {
$('li').addClass('list_stype');
}
</script>
</head>
<body>
<h1>列表测试</h1>
<ul>
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
