《锋利的jQuery》之jQuery简介

2023-11-09 00:37•html•阅读 1549

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>

$(document).ready(function() {

alert("Hello world!");

}

</script>

</head>

</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"))