10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)

10款新鲜出炉的 jQuery 插件

1. Slick

Slick 是一个强大的幻灯片插件，可以创建漂亮的响应式幻灯片，支持无限循环，自动播放，可定制的导航和分页器等等。

示例用法：

<div class="slider">
  <div><img src="http://placehold.it/800x400" alt=""></div>
  <div><img src="http://placehold.it/800x400" alt=""></div>
  <div><img src="http://placehold.it/800x400" alt=""></div>
</div>

<script>
$('.slider').slick({
  autoplay: true,
  arrows: false,
  dots: true
});
</script>

2. Magnific Popup

Magnific Popup 是一个功能强大的轻盈的弹出框插件，支持多种类型的内容，如图片、视频、Google 地图、PDF 文档和 AJAX 内容等。

示例用法：

<a href="http://placehold.it/800x400" class="popup-image">
  <img src="http://placehold.it/400x200" alt="">
</a>

<script>
$('.popup-image').magnificPopup({
  type: 'image'
});
</script>

3. slicknav

slicknav 是一个小巧的响应式导航插件，可以自动转换成下拉菜单，支持嵌套子菜单和多种配置选项。

示例用法：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<script>
$('nav ul').slicknav();
</script>

4. Isotope

Isotope 是一个流式响应式布局插件，可以帮助您构建漂亮的网格布局和筛选器效果。它支持多种布局选项和动画效果。

示例用法：

<div class="grid">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item large">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

<script>
$('.grid').isotope({
  itemSelector: '.item',
  layoutMode: 'packery',
  percentPosition: true,
  packery: {
    gutter: '.gutter-sizer'
  }
});

</script>

5. DataTables

DataTables 是一个灵活和功能强大的表格插件，可以对 HTML 表格进行排序、分页、搜索和筛选。它支持多种数据源和配置选项。

示例用法：

<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

<script>
$('#my-table').DataTable();
</script>

6. Chosen

Chosen 是一个强大的下拉框插件，可以使 HTML 下拉框更加美观和易用。它支持搜索、多选和回调等功能。

示例用法：

<select class="chosen">
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="orange">Orange</option>
</select>

<script>
$('.chosen').chosen();
</script>

7. Moment.js

Moment.js 是一个轻便的日期处理库，可以轻松处理日期和时间，包括格式化、解析、比较和计算。

示例用法：

<div>
  <span id="date"></span>
  <span id="time"></span>
</div>

<script>
setInterval(function() {
  $('#date').text(moment().format('YYYY-MM-DD'));
  $('#time').text(moment().format('HH:mm:ss'));
}, 1000);
</script>

8. Typeahead.js

Typeahead.js 是一个快速、灵活、易于使用的自动完成插件，可以帮助用户快速找到他们要查找的内容。它支持多种数据源和自定义模板。

示例用法：

<input class="typeahead" type="text" name="my-input" placeholder="Type here">

<script>
var data = {
  valueKey: 'name',
  template: '<p>{{name}} - {{email}}</p>',
  engine: Hogan
};

var emails = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '/path/to/emails.json'
});

emails.initialize();

$('.typeahead').typeahead(null, data);
</script>

9. StickyKit

StickyKit 是一个小型而强大的粘性元素插件，可以帮助您创建固定的用户界面元素，如导航栏、侧栏和工具提示。

示例用法：

<div class="container">
  <div class="stick-me">...</div>
  <div class="stick-me">...</div>
</div>

<script>
$('.stick-me').stick_in_parent();
</script>

10. Cropper

Cropper 是一个易于使用的图像剪切插件，可以帮助您在浏览器中裁剪和编辑图像。它支持多种功能和选项，并且可定制。

示例用法：

<img src="http://placehold.it/800x400" id="image">

<script>
var cropper = new Cropper(document.getElementById('image'), {
  aspectRatio: 16 / 9,
  crop: function(e) {
    console.log(e.detail.x);
    console.log(e.detail.y);
    console.log(e.detail.width);
    console.log(e.detail.height);
    console.log(e.detail.rotate);
    console.log(e.detail.scaleX);
    console.log(e.detail.scaleY);
  }
});
</script>

这些插件都是非常适合在您的网站中添加一些功能和交互的。当然，这些只是众多优秀的 jQuery 插件之一，您可以根据您的需求寻找适合您网站的插件。