什么是jQuery UI的历史以及如何使用它

jQuery UI是一个精心策划的用户界面交互、效果、小工具和主题，建立在jQuery JavaScript库之上。它是轻松设计有吸引力的网站的最佳方式。例如，如果你想在网页上添加日期选择器，那么你可以简单地创建一个文本框，并在文本框上附加jQuery UI datepicker()函数。它将创建有吸引力的日期选择器小部件。

我们为什么要使用jQuery UI？

jQuery UI包含一组插件，为核心jQuery库提供新的功能。它被分为四组，即互动、部件、效果、实用工具。它是一个开源的库，包含不同的动画效果和小工具，有助于开发高度互动的用户友好型网络应用程序。这个库需要的维护非常少。它几乎可以在所有的浏览器上使用。

如何在项目中使用jQuery UI？

基本上有两种方法可以在项目中添加jQuery UI。第一种是使用CDN链接，第二种是通过下载jQuery UI的所有文件。

1.使用CDN链接：无需下载jQuery UI文件，你可以直接使用head部分的CDN链接来运行代码。

<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel =”stylesheet”>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

2.下载jQuery UI文件：访问jQueryUI的官方文档（https://jqueryui.com/ ），点击自定义下载按钮，下载该库的自定义版本。下载压缩文件后，解压缩文件并将其保存在一个文件夹中。之后创建一个HTML文件，在代码的头部部分添加以下链接。

<link rel=”stylesheet” href=”jqueryui/jquery-ui.min.css”>   
<script src=”jqueryui/external/jquery/jquery.js”></script>   
<script src=”jqueryui/jquery-ui.min.js”></script>

例子：在这个例子中，我们将使用jQuery UI创建一个动画手风琴效果。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
    "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js">
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
  
    <script>
         $(function () {$ ("#gfg").accordion({
                animate: 1000
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>jQuery UI Accordion animate Option</h3>
    <br><br>
  
    <div id="gfg">
        <h3>GFG</h3>
        <div>GeeksforGeeks</div>
        <h3>Geeks</h3>
        <div>GeeksforGeeks</div>
        <h3>GeeksforGeeks</h3>
        <div>Welcome to GeeksforGeeks</div>
    </div>
</body>
  
</html>

输出:

什么是jQuery UI的历史以及如何使用它？