ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery 插件

2022-01-27 01:32:13  阅读:176  来源: 互联网

标签:jQuery jquery 插件 mousewheel js event


@

目录


① 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事件绑定到一个元素。
它还提供了两个名为mousewheelunmousewheel的助手方法,其作用与jQuery中的其他事件助手方法类似。
使用规范化的deltaXdeltaY属性更新事件对象。此外,事件对象上还有一个名为deltaFactor的新属性。将deltaFactor乘以deltaXdeltaY以获得浏览器报告的滚动距离。

下面是同时使用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);
});

向事件处理程序添加三个参数(deltadeltaXdeltaY)的旧行为现在已被弃用,并将在以后的版本中删除。

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中文网

标签:jQuery,jquery,插件,mousewheel,js,event
来源: https://www.cnblogs.com/gh-StudyNotes/p/15848582.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有