一、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函数不能省略