首先载入jquery库和jSort插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jsort.js"></script>

HTML

接着我们在#ul放置5个标题，用来排序。#asc_btn用来按标题顺序排序，#desc_btn则按倒序。

<ul id="nav">
   <li id="asc_btn">按标题↑</li>
   <li id="desc_btn">按标题↓</li>
</ul>
<ul id="ul"> 
   <li> <h3 class="title">1.首页</h3> <p>提供网站模板,网站源码,网页图标,网页特效,中文字体等网页设计素材下载,为广大网友制作网页提供网站素材免费下载参考</p> <p><a href="http://www.sucaihuo,com">点击查看</a></p> </li> 
   <li> <h3 class="title">2.网站模板</h3> <p>网站模板,网站模板,网站模板下载,免费网站模板,智慧小屋 </p> <p><a href="https://jy.tp.yuanmeng.life/templates">点击查看</a></p> </li> 
   <li> <h3 class="title">3.网页特效</h3> <p>JS代码频道为网页前端人员提供建站常用的网页特效,包括图片代码、导航菜单、选项卡/滑动门资源、文字特效、表单代码、提示框/浮动层/弹出层等资源</p> <p><a href="https://jy.tp.yuanmeng.life/js">点击查看</a></p> </li> 
   <li> <h3 class="title">4.网站导航</h3> <p>精选网站以用户为导向，致力于快速为互联网用户提供设计优秀的网站信息，同时肩负着打击虚假网站的职责</p> <p><a href="https://jy.tp.yuanmeng.life/site">点击查看</a></p> </li> 
   <li> <h3 class="title">5.网站源码</h3> <p>网站源码提供精品pc源码、app源码、wap源码等。</p> <p><a href="https://jy.tp.yuanmeng.life/js">点击查看</a></p> </li> 
</ul>

jQuery

$(function() {
    $("#asc_btn").click(function() {
        $("#ul").jSort({
            sort_by: 'h3.title',//指向item内需要排序的元素，默认为p，本例中要排序的是h3.title。
            item: 'li',//要排序的内容
            order: 'asc' //排序方式，asc-顺序，desc-倒序，默认为asc。
        });
    });

    $("#desc_btn").click(function() {
        $("#ul").jSort({
            sort_by: 'h3.title',
            item: 'li',
            order: 'desc'
        });
    });
});