jQuery主题工具使其通过CSS3装饰元素非常容易。
关于jQuery主题的好事是他们是语义的;也就是说，我们可以指定元素的一般目的，然后让主题应用相应的特定CSS。
我们可以使用TheMeroller应用程序轻松创建新主题或者修改现有主题。

许多jQuery接口元素会自动使用当前CSS主题。
当然，我们还可以将它们应用于我们自己的任何元素以获得一致的外观。

主题只是CSS类。
要将CSS主题应用于元素，我们只能为对象添加特殊类。

例如，我们可以通过将此代码添加到IT中，使段落看起来像UI-窗口小部件的当前定义：

<div class = "ui-widget">
My div now looks like a widget
</div>

当然，将类添加到HTML中违反了语义设计的原则之一，因此最好使用jQuery在JavaScript中进行工作：

function themify(){
  //add theme-based CSS to the elements
  $("div").addClass("ui-widget")
  .addClass("ui-widget-content")
  .addClass("ui-corner-all");
  $(":header").addClass("ui-widget-header")
  .addClass("ui-corner-all");
  $("#resizeMe")
  .append('<span class = "ui-icon ui-icon-star"></span>');
 }

主题()函数将所有主题添加到页面上的元素，将漂亮的jQuery主题应用于它。

• 用jQuery识别所有DIV。

• 将UI-Widget类添加到所有Divs。
  此类在主题中定义。所有jQuery主题都有此类定义，但具体细节因主题而异。通过这种方式，我们可以交换主题来更改外观，并且代码仍然有效。 UI-Widget类将元素定义为小部件。

• 也添加UI-窗口小部件内容。
  Divs需要有两个课程，所以一些程序员使用链接指定Div也应该是班级的成员。此UI-Widget-Content类表示窗口小部件的内容应进行样式。

• 指定圆角。
  圆角已成为Web 2.0视觉设计的标准。使用jQuery实现这种效果极易实现 - 只需将UI角 - 所有类添加到我们想要圆角的任何元素。
  圆角使用CSS3，所有浏览器尚未支持。页面不会在较旧的浏览器中显示圆角，但页面仍然会正常工作。

• 使所有头标符合小部件 - 标题样式。
  jQuery主题包括一个很好的标题样式。我们可以轻松使所有标题标记(H1到H6)遵循此主题。使用：header筛选器来标识所有标题，并将UI-Widget-Header和UI-Caless - 所有类应用于这些标题。

jQuery UI包支持许多有趣的类。

| 类 |使用在|描述|
|--- | --- | - - |
| ui-widget |小部件的外容器|使元素看起来像小部件。 |
| ui-widget-header |标题元素|应用独特的标题外观。 |
| ui-widget-content |小部件|将窗口小部件内容样式应用于元素和子项。 |
| ui-state-default | 可点击的元素|显示标准（未击倒）状态。 |
| ui-state-hover | 可点击的元素|显示悬停状态。 |
| ui-state-focus | 可点击的元素|当元素有键盘焦点时，显示焦点状态。 |
| ui-state-active |可点击的元素|在元素上单击鼠标时显示活动状态。 |
| ui-state-highlight |任何窗口小部件或者元素|指定当前突出显示元素。 |
| ui-state-error |任何窗口小部件或者元素|指定元素包含错误或者警告


消息。 |
| ui-state-error text |文本元素|允许在不更改其他元素的情况下突出显示错误

（主要用于表单验证）。 |
| ui-state-disabled |任何窗口小部件或者元素|展示了当前禁用小部件。 |
| ui-corner-all, ui-corner-tl (等) |任何窗口小部件或者元素|将当前角大小添加到元素。指定特定的TL，TR，BL，BR，顶部，底部，左，右。 |
| ui-widget-shadow |任何小部件|将影子效果应用于小部件。 |

在UI主题中定义了一些其他类，但这些是最常用的。
有关更多详细信息，请参阅当前的jQuery UI文档。

如何添加图标

请注意元素内显示的小的开始。
此元素是jQuery UI图标的示例。
所有jQuery主题都支持一组标准的图标，它是小(16px平方)图像。
图标集包括箭头的标准图标以及菜单和工具栏中常用的图像。

一些jQuery UI元素自动使用图标，但我们也可以直接添加它们。
要在程序中使用图标，请按照下列步骤操作：

• 包括jQuery UI主题。
  图标是主题包的一部分。包括与主题对应CSS样式表。

• 确保可访问图像。
  下载主题包时，它包含一个图像目录。此目录中包含的图像用于创建自定义背景以及图标。 CSS文件期望一个名称调用的目录与CSS相同。
  此目录应包含以UI图标开头的多个图像。这些图像包含所有必要的图标。如果图标图像文件不可用，则不会显示图标。

• 创建一个跨度，我们希望将显示图标。
  将空跨元素放置在何处，以便在HTML中出现图标。如果需要，我们可以将SPAN直接放在HTML中，或者我们可以通过jQuery添加它。

• 将UI-Icon类添加到跨度。
  这告诉jquery将跨度视为图标。跨度的内容将被隐藏，并且跨度将被调整大小以保持16像素方形图标图像。

• 添加第二个类以识别特定图标。
  查看TheMeroller页面以查看可用图标。将悬停在此页面上的图标上时，我们可以看到与图标关联的类名。

我们可以将代码直接添加在HTML中：

<p id = "myPara">
 This is my text
 <span class = "ui-icon ui-icon-star"></span>
</p>

或者，我们可以使用jQuery将相应的代码添加到元素：

$("#myPara").append('<span class = "ui-icon ui-icon-star"></span>');