jQuery概述
JavaScript语言是NetScape公司开发的一种脚本语言,其功能强大,交互性强,是Web前端语言发展过程中的一个重要里程碑。JavaScript的实时性、跨平台、使用简单且安全性较高等特点决定了其再Web前端涉及中的重要第位。
但随着浏览器种类的推陈出新,JavaScript对浏览器的兼容性收到了极大挑战,网页前端设计者往往因浏览器的不兼容而导致工作量大增。2006年1月,美国John Resing创建了一个基于JavaScript的开源框架——jQuery。与JavaScript相比,jQuery具有代码高效、浏览器兼容性更好等特征,极大简化了对DOM对象、事件处理、动画效果以及AJAX等操作。
jQuery优势
- 访问和操作DOM元素
jQuery中封装了大量的DOM操作,可以非常方便地获取或修改页面中的某个元素,包括元素的移动、赋值、删除等操作 - 强大的选择器
jQuery允许开发人员使用CSS1~CSS3所有的选择器,方便快捷地控制元素的CSS样式,并很好地兼容各种浏览器 - 可靠的事件处理机制
使用jQuery将表现层与功能层分离,可靠的事件处理机制让开发者更多专注于程序的逻辑设计 - 完善的Ajax操作
Ajax异步交互技术极大方便了程序的开发,提高了浏览器的体验度。在jQuery库中将Ajax操作封装到函数$.ajax()中,开发者只需专心实现业务逻辑处理,无需关注浏览器的兼容性问题 - 链式操作方式:
在某一个对象上产生一系列动作时,jQuery允许在现有对象上连续多次操作,链式操作是jQuery的特色之一 - 完善的文档
jQuery是一个开源产品,提供了丰富的文档
jQuery1.x与jQuery2.x对浏览器的支持情况:
版本 | IE | Chrome | Firefox | 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+ |
引入jQuery库
jQuery不需要安装,只需要将下载的jQuery库放到站点的一个公共目录中,然后在页面中通过< script />标签引入即可。
<script type=''text/javascript' src='js/jquery-2.x.js'></script>
测试:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
</head>
<body>
<div id="myDiv">Hello World</div>
<script type="text/javascript">
$(document).ready(function(){
alert($("#myDiv").html());
});
</script>
</body>
</html>
window.onload与$(document).ready()区别
区别项 | window.onload | $(document).ready() |
---|---|---|
执行时间 | 必须在页面全部加载完毕(包含图片下载)后才能执行 | 在页面中所有DOM结构下载完毕后执行,此时可能DOM元素关联的内容并没有加载完毕 |
执行次数 | 一个页面只能由一个,当页面中存在多个window.onload时,仅输出最后一个的结果,无法完成多个结果同时输出 | 一个页面可以有多个,姐u共可以相继输出 |
简化写法 | 无 | 可以简写成$() |