在jQuery的官方网站http://jquery.com/下载最新的jQuery库。在下载界面可以直接下载jQuery1.x和jQuery2.x两种版本.其中jQuery1.x版本在原来的基础上继续支持IE6、7、8版本的浏览器;而jQuery2.x不再支持IE8及更早版本,但因其有具有更小、更快等特点,得到广大开发者的一致好评。
jQuery1.x和jQuery2.x对浏览器的支持情况如表所示:
版本 | IE | Chrome | Firrfox | Safari | Opera | IOS | Android |
---|---|---|---|---|---|---|---|
jQuery1.x | 6+ | 支持 | 支持 | 5.1+ | 12.1+ | 6.1+ | 2.3,4.0+ |
jQuery2.x | 9+ | 支持 | 支持 | 5.1+ | 12.1+ | 6.1+ | 2.3,4.0+ |
每个版本又分为一下两种:开发版和生产版:
版本 | 大小/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>
- 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>
上述代码中,通过jQuery读取< div>标签中的内容,$(document).ready()方法的作用类似于JavaScript中window.onload事件,但也有一定区别:
区别项 | window.onload | $(document).ready() |
---|---|---|
执行时间 | 必须在页面全部加载完成(包含图片下载)后才能执行 | 在页面中所有DOM结构下载完毕后执行,此时可能DOM元素关联的内容并没有加载完毕 |
执行次数 | 一个页面只能有一个,当页面中存在多喝window.onload时,仅输出最后一个的结果明晚发完成多个结果同时输出 | 一个页面可以有多个,结果可以相继输出 |
简化写法 | 无 | 可以简写成$() |