jQuery样式操作：掌握addClass(), removeClass(), toggleClass()与hasClass()

jQuery是一款由John Resig创建的流行的JavaScript库，旨在通过减少代码量（"WRITELESS, DOMORE"）提高开发者的工作效率。它以轻量级著称，压缩后的大小仅有21k，使得它可以在多种浏览器环境下良好运行，包括IE6.0+、FF1.5+、Safari2.0+以及Opera9.0+。jQuery的主要功能包括： 1. **样式操作**： - 获取和设置class属性：利用`attr()`方法实现，因为class是元素的一个属性。 - **添加样式**：`addClass()`方法用于向元素追加或添加新的CSS类。 - **移除样式**：`removeClass()`方法用于移除元素上的全部或指定的class。 - **切换样式**：`toggleClass()`方法根据元素是否具有特定class进行切换，如果存在则删除，反之则添加。 - **检查样式存在性**：`hasClass()`方法用于检测元素是否包含某个特定的class，返回布尔值。 2. **DOM操作**：简化了与HTML文档的交互，如事件绑定、动画效果的实现以及跨浏览器兼容性。 3. **Ajax支持**：使得网页无需刷新就能与服务器进行异步通信，提供了丰富的交互体验。 4. **代码组织**：鼓励代码和HTML内容分离，通过ID标识元素，降低了JavaScript代码的复杂性。 5. **强大的文档和插件**：jQuery拥有详尽的文档，便于学习和使用。社区提供了大量的成熟插件，可以快速扩展功能。 6. **jQuery对象**：jQuery库将DOM对象包装成jQuery对象，这些对象拥有jQuery特有的方法和功能，使得开发者能够以更简洁的方式编写JavaScript代码。 例如，一个简单的jQuery使用示例是引入jQuery库并监听文档加载完成事件： ```html <!-- 引入jQuery库 --> <script src="script/jquery-1.4.2.js"></script> <script> $(document).ready(function(){ // 当DOM加载完毕时，执行此函数 alert("您好, 我是张三丰"); }); </script> ``` 通过这个例子，可以看到jQuery简化了代码的编写，只需要在`$(document).ready()`中编写操作，当页面准备好执行时，这段代码才会运行。这正是jQuery“写更少，做更多”的理念体现。