2.3.3 jQuery · Web全栈技术指南

# 2.3.3 jQuery ### 2.3.3 jQuery [jQuery](http://jquery.com/)是一个JavaScript代码库（library）。它既非ECMAScript标准库（standard library）的一部分，也非浏览器对JavaScript的扩展（如DOM API那样）。但它十分重要，有必要做一介绍。下面的例子用jQuery实现了与上面相同的功能： ``` <html> <head> <meta charset="utf-8" /> <title>你好</title> </head> <body> <button id="btn1">点我</button> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $('#btn1').click(function() { $('body').html('<h1>你好，JavaScript！</h1>'); }); </script> </body> </html> ``` 这行代码引入了jQuery库： ``` <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> ``` 这段代码对button的click事件注册了一个回调函数： ``` <script> $('#btn1').click(function() { $('body').html('<h1>你好，JavaScript！</h1>'); }); </script> ``` jQuery有几个重要功能。首先就是简单、灵活的HTML元素选择功能。如果读者对CSS选择器（selector）有一些了解就会发现：jQuery可以使用相同的选择器来选择HTML元素。例如，通过ID选择对象 ``` $('#btn1') ``` 或者通过元素名称选择对象 ``` $('body') ``` 其次就是提供简单、一致的编程接口。例如上面用来注册事件的click方法，以及用来设置内容文本的html方法，都比对应的标准API要简单。 “一致性”在此值得一提：我们希望相同的HTML文档在不同的浏览器里表现一致——内容、排版和行为都一样。但实际上这种一致性不是轻易可得的，尤其是在早些年Web标准（如HTML，CSS和ECMAScript的标准）还不完善的时候。虽然现在标准日臻完善，但各浏览器厂商在遵循/理解标准方面仍有差异。jQuery提供的编程接口“抹平”了这种差异性，使我们至少在JavaScript编程方面可以比较容易地做到跨浏览器一致。