jQuery 插件

@

目录

• ① jQuery常用插件
  • 1. jQuery 插件常用的网站
  • 2. jQuery 插件使用步骤
  • 3. jQuery 插件常见效果举例
  • jquery.mousewheel.js、
• ② 多库共存
  • 1.问题概述
  • 2.客观需求
  • 3.jQuery 解决方案
• ③ jQuery UI

---

① jQuery常用插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

1. jQuery 插件常用的网站#

1. jQuery 插件库
2. jQuery 之家
3. Bootstrap v3

2. jQuery 插件使用步骤#

1. 引入相关文件。（ jQuery 文件 和 插件文件）
2. 复制相关html、 css、 js (调用插件)。

3. jQuery 插件常见效果举例#

1. 瀑布流

   带排序功能的js masonry瀑布流插件效果演示_jQuery之家

2. 图片懒加载

   图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载
   当我们页面滑动到可视区域，再显示图片。
   我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

3. 全屏滚动（ fullpage.js）
   gitHub： https://github.com/alvarotrigo/fullPage.js
   中文翻译网站： http://www.dowebok.com/demo/2014/77/

4. bootstrap组件

   凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html

5. bootstrap插件

   bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。

   使用步骤：

   1.引入bootstrap相关css和js

   2.去官网复制html

   3.复制js代码，启动js插件。

jquery.mousewheel.js、#

jQuery鼠标滚轮插件
官网：GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.
翻译：
一个jQuery插件，通过增量规范化添加跨浏览器鼠标滚轮支持。
为了使用插件，只需将mousewheel事件绑定到一个元素。
它还提供了两个名为mousewheel和unmousewheel的助手方法，其作用与jQuery中的其他事件助手方法类似。
使用规范化的deltaX和deltaY属性更新事件对象。此外，事件对象上还有一个名为deltaFactor的新属性。将deltaFactor乘以deltaX或deltaY以获得浏览器报告的滚动距离。

下面是同时使用bind和helper方法语法的示例：

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

向事件处理程序添加三个参数（delta、deltaX和deltaY）的旧行为现在已被弃用，并将在以后的版本中删除。

jquery 滚轮插件 jquery.mousewheel.js - 简书 (jianshu.com)

② 多库共存

1.问题概述#

jQuery使用$作为标示符， 随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。

2.客观需求#

需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

3.jQuery 解决方案#

1. 把里面的 $ 符号 统一改为 jQuery。

   jQuery("div");
   

2. jQuery 变量规定新的名称： $.noConflict()

   var xx = $.noConflict();  
   xx('div');
   

演示代码

$(function() {
	// 让jquery 释放对$ 控制权 让用自己决定
	var suibian = jQuery.noConflict();
	console.log(suibian("span"));
})

③ jQuery UI

jQuery UI 教程_Jquery UI中文网