jQuery UI 简介学习笔记
什么是jQuery UI？
jQuery UI 是一个基于 jQuery 的UI库，它包含了许多交互组件、效果、小部件和主题，使得通过简单的代码就可以添加复杂的交互效果和动画。
如何使用jQuery UI？
首先，需要在html页面中引入jQuery和jQuery UI的js文件和css文件。
htmlCopy Code<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.0-pre/dist/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.0-pre/dist/jquery-ui.min.js"></script>
</head>
然后在js文件中调用所需的组件和效果，例如：
javascriptCopy Code$(function() {
//调用sortable组件使得元素可拖拽排序
$('#sortable').sortable();
//调用accordion组件，实现展开/折叠效果
$('#accordion').accordion();
//调用datepicker组件，实现日期选择器
$('#datepicker').datepicker();
});
实例
1. Sortable
Sortable是jQuery UI里的一个强大的拖放插件，可以让你的网站变得更加直观易用。下面是一个示例：
htmlCopy Code<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
javascriptCopy Code$(function() {
$('#sortable').sortable();
});
2. Accordion
Accordion组件允许你快速的构建一个有层次的折叠面板。下面是一个示例：
htmlCopy Code<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
quis gravida magna mi a libero. Fusce vulputate eleifend sapien.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit
fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.
Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing,
dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue
nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum
libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci.
Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl,
id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Nunc
eget massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nullam eleifend pharetra felis.
</p>
</div>
</div>
javascriptCopy Code$(function() {
$('#accordion').accordion();
});
3. Datepicker
Datepicker组件让你可以非常容易的在网站上实现一个日期选择器。下面是一个示例：
htmlCopy Code<input type="text" id="datepicker">
javascriptCopy Code$(function() {
$('#datepicker').datepicker();
});
以上就是使用jQuery UI的一些例子，它们仅仅是jQuery UI库中的冰山一角，不过它们已经足以帮助你添加复杂的交互效果和动画，这将极大地改善你的网站用户体验。