《锋利的jQuery》之jQuery简介
1.1 JavaScript简介
JavaScript的缺点:
复杂的文档对象模型(DOM),
不一致的浏览器实现,
缺乏便捷的开发、调试工具。
Ajax(异步的JavaScript和XML)诞生,导火索是Google的一系列新型Web应用:
Gmail、Google Suggest、Google Map等。
涌现大量JS库:Prototype, Dojo, ExtJS, jQuery, YUI...
1.2 jQuery优势
轻量级:使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。
强大的选择器:支持CSS1到3的所有选择器,还可以加入插件使其支持XPath选择器。
DOM操作封装
事件处理机制:可靠,预留退路、循序渐进、非入侵式思想。
Ajax:$.ajax()
不污染顶级变量:jQuery只建立一个名为jQuery的对象,所有函数都在这个对象下。在项目中放心地引用不会冲突。
浏览器兼容性:能够在IE 6.0+, FF 2+, Safari 2.0+和Opera 9.0+下正常运行。
链式操作
隐式迭代:jQuery的方法设计成自动操作对象集合。如用jQuery找到".myClass"类的全部元素,然后隐藏它们时,无需循环遍历每一个返回元素。
丰富的插件
1.3 开始jQuery之旅
<html>
<head>
<script src="..."></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello world!");
}
</script>
</head>
<body></body>
</html>
传统的window.onload():必须等待网页中所有的内容加载完毕后(包括图片)才能执行。
$(document).ready():网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完。
1.4 jQuery对象和DOM对象
DOM对象可以通过document的getElementByTagName或getElementById来获得。
jQuery对象是通过jQuery包装DOM对象后产生的对象,可以调用jQuery的方法。
$("#foo").html(); 等价于 document.getElementById("foo").innerHTML;
jQuery对象转成DOM对象:$("#cr")[0]或$("#cr").get(0)
DOM对象转成jQuery对象:$(document.getElementById("cr"))