博客列表 >0402作业jquery的引入方式和工厂函数-2018年4月7号补

0402作业jquery的引入方式和工厂函数-2018年4月7号补

改变从心开始
改变从心开始原创
2018年04月07日 15:54:01545浏览

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议