@
目录① jQuery常用插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。
1. jQuery 插件常用的网站
2. jQuery 插件使用步骤
- 引入相关文件。( jQuery 文件 和 插件文件)
- 复制相关html、 css、 js (调用插件)。
3. jQuery 插件常见效果举例
-
瀑布流
-
图片懒加载
图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载
当我们页面滑动到可视区域,再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意,此时的js引入文件和js调用必须写到 DOM元素(图片)最后面 -
全屏滚动( fullpage.js)
gitHub: https://github.com/alvarotrigo/fullPage.js
中文翻译网站: http://www.dowebok.com/demo/2014/77/ -
bootstrap组件
凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html
-
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
)的旧行为现在已被弃用,并将在以后的版本中删除。
② 多库共存
1.问题概述
jQuery使用$
作为标示符, 随着jQuery的流行,其他 js 库也会用这$
作为标识符, 这样一起使用会引起冲突。
2.客观需求
需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。
3.jQuery 解决方案
-
把里面的
$
符号 统一改为jQuery
。jQuery("div");
-
jQuery 变量规定新的名称:
$.noConflict()
var xx = $.noConflict(); xx('div');
演示代码
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})