搭建jQuery开发环境
每个版本又分为一下两种:开发版和生产版:
版本 大小/KB 描述
jquery-1.x.js 约288 开发版,完整无压缩,多用于学习,开发和测试
jquery-2.x.js 约251 开发版,完整无压缩,多用于学习,开发和测试
jquery-1.x.min.js 约94 生产版,经过压缩工具压缩,体积相对比较小,主要勇于产品和项目中
jquery-2.x.min.js 约83 生产版,经过压缩工具压缩,体积相对比较小,主要勇于产品和项目中
在页面中使用jQuery分为两步:首先引入jQuery库,然后使用jQuery实现界面操作。
项目1引入jQuery库
jQuery不需要安装,只需要将下载的jQuery库放到站点的一个公共目录中,然后在页面中通过 < script > 标签引入即可。
<script type="text/javascipt" src="js/jquery-1.x.js"></script>
1
jQuery简单测试
在页面中引入jQuery库后,通过$ ()函数来获取页面中的元素,并对元素进行定位或效果处理。在没有特别说明的情况下,$ 符号即为jQuery对象的缩写形式,例如$(“myDiv”)与jQuery(“myDiv”)完全等价。
<!doctype html>
<head>
<meta charset="utf-8">
<title>测试示例</title>
<script type="text/javascipt" src="js/jquery-1.x.js"></script>
</head>
<body>
<div id="myDiv"> Hello World!</div>
<script type="text/javascript">
$(document).ready(fucntion(e){
//alert(jQuery("#myDiv").html());
alert($("#myDiv").html());
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上述代码中,通过jQuery读取< div>标签中的内容,$(document).ready()方法的作用类似于JavaScript中window.onload事件,但也有一定区别:
区别项 window.onload $(document).ready()
执行时间 必须在页面全部加载完成(包含图片下载)后才能执行 在页面中所有DOM结构下载完毕后执行,此时可能DOM元素关联的内容并没有加载完毕
执行次数 一个页面只能有一个,当页面中存在多喝window.onload时,仅输出最后一个的结果明晚发完成多个结果同时输出 一个页面可以有多个,结果可以相继输出
简化写法 无 可以简写成$(http://www.my516.com)
---------------------