Jquery是一種流行的JavaScript框架。使用Jquery可以輕松地創(chuàng)建動態(tài)、交互式的網(wǎng)頁。其中，輸出UI界面通常使用Jquery的UI插件。下面我們來介紹如何使用Jquery的UI插件輸出li列表。

<!-- HTML代碼 -->
<ul id="myList">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

首先，我們需要在HTML文件中導(dǎo)入Jquery和Jquery UI的庫文件。

<!-- 導(dǎo)入jquery庫文件 -->
<script src="jquery-3.5.1.min.js"></script>
<!-- 導(dǎo)入jquery UI庫文件 -->
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-ui.min.js"></script>

接下來，我們使用Jquery UI中的sortable()函數(shù)將列表項設(shè)為可拖動。

<!-- Jquery代碼 -->
<script>
$( function() {
$( "#myList" ).sortable();
$( "#myList" ).disableSelection();
});
</script>

最后，我們在CSS樣式中設(shè)置一些列表項的樣式。

/* CSS樣式 */
#myList {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
background-color: #f1f1f1;
border: 1px solid #ddd;
}
#myList li {
margin: 0 5px 5px 5px;
font-size: 14px;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
#myList li:hover {
background-color: #ddd;
}

通過以上步驟，我們就可以使用Jquery UI插件輸出一個美觀、可交互的li列表了。效果如下：

• 列表項1
• 列表項2
• 列表項3