搭建jQuery开发环境

在jQuery的官方网站http://jquery.com/下载最新的jQuery库。在下载界面可以直接下载jQuery1.x和jQuery2.x两种版本.其中jQuery1.x版本在原来的基础上继续支持IE6、7、8版本的浏览器;而jQuery2.x不再支持IE8及更早版本,但因其有具有更小、更快等特点,得到广大开发者的一致好评。
jQuery1.x和jQuery2.x对浏览器的支持情况如表所示:

版本IEChromeFirrfoxSafariOperaIOSAndroid
jQuery1.x6+支持支持5.1+12.1+6.1+2.3,4.0+
jQuery2.x9+支持支持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. 项目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>

上述代码中,通过jQuery读取< div>标签中的内容,$(document).ready()方法的作用类似于JavaScript中window.onload事件,但也有一定区别:

区别项window.onload$(document).ready()
执行时间必须在页面全部加载完成(包含图片下载)后才能执行在页面中所有DOM结构下载完毕后执行,此时可能DOM元素关联的内容并没有加载完毕
执行次数一个页面只能有一个,当页面中存在多喝window.onload时,仅输出最后一个的结果明晚发完成多个结果同时输出一个页面可以有多个,结果可以相继输出
简化写法可以简写成$()
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值