本文实例讲述了jQuery操作元素的内容和样式。分享给大家供大家参考，具体如下：
<html>
<head>
<title>jQuery操作元素的样式和内容</title>
<meta charset="UTF-8"/>
[removed][removed]
[removed]
//操作元素的样式
function testHtml1(){
//获取要操作的对象
var showdiv=$("#showdiv");
jQuery是一个强大的JavaScript库，它简化了对HTML文档的遍历、事件处理、动画以及Ajax交互。在本实例中，我们将深入探讨如何使用jQuery操作元素的内容和样式。
要使用jQuery，我们需要在HTML文档中引入jQuery库。在这个例子中，通过`<script>`标签引入了百度CDN上的jQuery 1.9.1版本。
### 操作元素内容
1. **`html()`方法**：`html()`用于获取或设置元素的HTML内容。在`testHtml1()`函数中，`showdiv.html()`返回的是元素内的原始HTML代码，包括任何标签和文本。而在`testHtml2()`和`testHtml3()`函数中，`html()`方法被用来添加或拼接HTML内容。`testHtml2()`将HTML字符串插入元素，而`testHtml3()`则在现有内容基础上添加新的HTML。
2. **`text()`方法**：与`html()`不同，`text()`方法只处理文本内容，不解析HTML标签。在`testText1()`和`testText2()`函数中，`text()`用于获取或设置元素的纯文本内容，不包含任何HTML。
### 操作元素样式
1. **`css()`方法**：此方法用于获取或设置元素的CSS样式。在`testCss1()`中，`showdiv.css("background-color", "yellow")`将背景颜色设置为黄色，而`showdiv.css("width")`则返回元素的宽度值。在`testCss2()`中，我们一次性设置了多个样式属性，通过一个对象传递，键是属性名，值是属性值。
2. **`addClass()`方法**：`addClass()`用于向元素添加CSS类。在`testAddClass()`中，`div.addClass("common")`和`div.addClass("word")`分别为元素添加了"class=common"和"class=word"，允许元素同时拥有多个类。
3. **`removeClass()`方法**：`removeClass()`方法用于移除元素的CSS类。在`testRemoveClass()`函数中，`div.removeClass("word")`移除了名为"word"的类属性。
### 示例代码解析
HTML部分包含了两个`<input>`按钮，分别用于触发`testHtml1()`和`testHtml2()`函数，展示`html()`方法的用法。CSS部分定义了几个类，供`addClass()`和`removeClass()`方法使用。
jQuery提供了简单易用的API来操作DOM元素的内容和样式，使得开发者可以更方便地实现动态效果和交互。了解并熟练掌握这些方法，对于进行前端开发来说至关重要。在实际项目中，根据需求灵活运用这些方法，可以大大提高开发效率和代码质量。
