jQuery 插件的使用

jQuery 插件是什么

为了简化 jQuery 开发的难度

它是基于 jQuery 库针对某个具体使用场景（如轮播图功能…等）编写的 JavaScript 逻辑。

查找的两种主要方式：

1. jQuery 官网，地址：https://plugins.jquery.com
2. 通过搜索引擎对具体场景进行搜索

使用步骤

1. 引入 jQuery 文件

2. 引入 jQuery 插件文件

3. 使用插件 – 利用插件达到实现效果

lazyload 懒加载插件

lazyload 插件是什么

用处：用于较长 HTML 页面中延迟加载图片

• 在浏览器窗口之外的图片不会被加载，直到用户操作滚动条滚动到这些图片才会被加载

优点：

• 提高 HTML 页面加载速度
• 帮助减少服务器负载

如何使用 lazyload 插件

1. 引入 lazyload 文件

2. $('img').lazyload();
   

核心方法的参数

核心方法lazyload() 方法，具有 options 参数

设置提前加载图片

threshold - 设置当前图片距离浏览器窗口多少像素时加载

设置加载图片的触发事件

click、mouse over等

设置显示图片的效果

effect - 设置加载的动画效果

masonry 瀑布流插件

瀑布流布局是什么

又称 瀑布流式布局。

视觉效果为参差不齐的多栏布局，随页面滚动条向下滚动，这种布局会不断加载数据块并附加到当前尾部

特点：

• 琳琅满目：整版以图片为主，大小不一的图片也会按照一定的规律排序
• 唯美：图片的风格以唯美的图片为主
• 操作简单

实现瀑布流布局的效果

1. HTML 页面结构

• 定义一个容器元素
• 在容器元素中的所有元素呈现瀑布流效果

2. 定位瀑布流布局的容器元素，并调用 masonry() 核心方法

   $().masonry(options)
   //	itemSelector - 指定需要瀑布流布局效果的元素（选择器）
   

masonry插件是什么

是 jQuery 实现瀑布流布局的插件， Masonry 可以被看做是 css 的浮动布局

不管排列的元素是水平浮动还是垂直浮动，Masonry 都是根据网格先垂直再水平排列，像修墙一样

如何使用masonry插件

只需在 jQuery 脚本中使用.masonry ()方法

核心方法的参数

swiper 轮播图插件

swiper插件是什么

是一款免费，开源，强大的移动端触摸滑动插件，兼容PC端

使用时，对HTML结构和样式名称有要求，必须使用 swiper-container

<!--可视化窗口 -->
<div class="swiper-container">
<!-- 图片容器 -->
<div class="swiper-wrapper">
<div class="swiper-slide" id="slide1">嘟嘟嘟嘟</div>
<div class="swiper-slide" id="slide2">滴滴滴滴</div>
<div class="swiper-slide" id="slide3">啦啦啦啦</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
// direction: 'vertical',
// loop: true
autoplay: true
});
</script>

jQuery 的插件机制

jQuery插件种类

• 对象方法插件

  用法：是将对象方法封装起来，用于对通过选择器获取的 jQuery 对象进行操作，是最常见的一种插件。

• 全局函数插件

  可以将独立的函数添加到 jQuery 命名空间下，例如$.each()方法等。

• 选择器插件

  个别情况小，会需要用到选择器插件。虽然 jQuery 的选择器已经很强大，但还是会需要扩展一些个性化的选择器用法。

对象方法插件

1. 引入 jQuery 文件

2. html 部分

   
   <button id="btn">按钮</button>
   

3. 使用 jQuery 插件

    <script>
   $('#btn').button();
   </script>
   

4. 使用jQuery.fn.extend()方法

   jQuery.fn.extend({
   button: function () {
   //提供自定义样式 - this指向调用该方法的jQuery对象
   this.css({
   color: 'red'
   });//让按钮中的字体变红
   }
   });
   

最后

以上就是傲娇期待为你收集整理的jQuery 插件的使用的全部内容，希望文章能够帮你解决jQuery 插件的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。