04-jQuery工具函数及 jQuery 插件

1. jQuery工具函数

在jQuery中,工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的,我们统称为工具函数,或Utilites函数。

主要作用于：字符串、数组、对象。

调用格式: $.函数名()或jQuery.函数名()

1.1 $.get()

通过远程 HTTP GET 请求载入信息。

jQuery.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数,对象或字符串，传递给服务器的数据。

回调函数:function(data,status,xhr) 可选。请求完成时的回调函数，无论请求成功或失败。

回调函数的参数说明：

data：服务器返回的脚本的文本内容。

status：请求的状态。

xhr： XMLHttpRequest对象。

type:返回内容格式，xml, html, script, json, text, _default

1.2 $.getJSON()

$.getJSON函数获取到文本之后，不会将其当作脚本执行，而会将其解析为JSON。当成功加载URL，并且将内容成功解析为JSON后，解析结果会作为第一个参数传入回调函数中。

语法格式：

jQuery.getJSON(url, [data], [callback])

参数说明：

URL 必需。请求的URL。

data：对象或字符串，传递给服务器的数据。

回调函数:function(data,status,xhr) 可选。请求完成时的回调函数，无论请求成功或失败。

回调函数的参数说明：

data：服务器返回的脚本的文本内容。

status：请求的状态。

xhr： XMLHttpRequest对象。

1.3 $.post()

jQuery.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送 Key/value 参数。

回调函数:function(data,status,xhr) 可选。请求完成时的回调函数，无论请求成功或失败。

回调函数的参数说明：

data：服务器返回的脚本的文本内容。

status：请求的状态。

xhr： XMLHttpRequest对象。

type:返回内容格式，xml, html, script, json, text, _default。

1.4 $.ajax()函数

这些函数可以用于发起任意Ajax请求,通过 HTTP 请求加载远程数据,$.ajax() 返回其创建的 XMLHttpRequest 对象.

jQuery.ajax( [settings ] )

settings:AJAX 请求设置。所有选项都是可选的。详情参照

$.ajax({type: 'GET',url: baseURL + '/api/student/getStudent',data: {name: '小谷'},success: function(data, status, xhr) {console.log(data);},error: function(err) {console.log('请求失败');console.log(err);}
});
$.ajax({type: 'POST',url: baseURL + '/api/student/addStudent',contentType: 'application/json',data: JSON.stringify({}),success: function(data, status, xhr) {console.log(data);},error: function(err) {console.log('请求失败');console.log(err);},cache: false,dataType: 'json'
});

1.5 $.each( array/object, callback )

该工具函数与 $('.box').each() 方法不同，$('.box').each() 方法只能辨认jQuery对象，而 $.each() 工具函数不仅可以遍历数组元素还可以遍历对象属性。第一个参数是要遍历的数组或对象；第二个参数是要在每个数组元素或对象属性上调用的函数。该函数在调用时会带有两个参数：数组元素的索引或对象的属性名，以及数组元素的值或对象的属性值。函数中的 this 值和第二个参数是一样的。

$.each( array, callback )
​
$.each( object, callback )

1.6 $.map()

该函数和Array对象的map()方法类似。它接受数组或类数组对象作为第一个参数；第二个参数则为映射函数。每一个数组元素与索引都会传入这个映射函数中，返回值就是由映射函数返回的值组成的新数组。$.map()与map()方法存在两点不同。首先，如果映射函数返回的是null，该值不会被包含在返回的数组中。其次，如果映射函数返回的是数组，该数组的元素会被添加到结果数组中，而不是数组本身中。

1.7 $.extend()

该函数接受对象作为参数。它会将第二个及其之后参数对象的属性复制到第一个参数对象中，如果同名的属性在第一个参数对象中已经存在，则会覆盖它。该函数会忽略任何值为 undefineed 的属性。如果仅传入一个对象，该对象的属性会被复制到jQuery对象自身中。该对象的返回值是属性被复制到的对象。如果第一个参数的值为 true，会执行深拷贝：第三个（及其之后）对象的属性会被复制到第二个对象上。注意，第一个参数为 false 是不被支持的。

jQuery.extend([deep], newObj, object1, [objectN])

deep:如果设为true为深拷贝，默认为false浅拷贝。

newObj:合并最终的对象。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

浅拷贝: 只复制指向某个对象的地址，新旧对象还是共享同一块内存。修改其中一个对象会影响其他对象。

深拷贝:前面加上true,会另外创建一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改变原对象。

2. jQuery 插件

想要更复杂的特效效果，可以借助于 jQuery 插件完成，这些插件也是依赖于jQuery来完成的，所以必须要先引入。

jQuery 插件常用的网站：

  1. jQuery 插件库 jQuery插件库-收集最全最新最好的jQuery插件

  2. jQuery 之家 jQuery之家-自由分享jQuery、html5、css3的插件库

    jQuery 插件使用步骤：

  3. 引入相关文件。（jQuery 文件 和 插件文件）

  4. 复制相关html、css、js (调用插件)。

2.1 瀑布流插件

jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。

以下为例演示:兼容IE8的响应式网格瀑布流布局jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

代码演示

插件的使用三点：

  1. 引入css.

  2. 引入js

  3. 引入html。 （有的简单插件只需引入html和js，甚至有的只需引入js）

  • 总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）

2.2 图片懒加载插件

图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。

懒加载只需引入html 和 js操作 即可，此插件不涉及css。

代码演示EasyLazyload.js 超好用js图片延迟加载

  • 1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>lazyLoadInit({showTime: 1100,onLoadBackEnd: function(i, e) {console.log("onLoadBackEnd:" + i);},onLoadBackStart: function(i, e) {console.log("onLoadBackStart:" + i);}});
</script>

  • 2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">

2.3 全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：

jQuery全屏滚动插件fullPage.js演示_dowebok

全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际。

代码演示

项目需要使用哪种风格引入对应的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>$(function() {$('#dowebok').fullpage({sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],navigation: true});});
</script>

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

2.4 数字滚动插件

jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。

该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于Waypoints插件来监听滚动事件。

jquery轻量级数字动画插件jquery.countup.js

2.5 页面滚动动画

当页面向滚动时触发动画效果,非常好用

css页面滚动触发动画

2.7 bootstrap组件(之后详细讲解)

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。

2.8 补充:swiper插件(js框架)

Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。同时，在Android、WP8系统以及PC端的浏览器也有着良好的用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/28640.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【git使用二】gitee远程仓库创建与本地git命令用法

【git使用二】gitee远程仓库创建与本地git命令用法

目录 gitee介绍 管理者注册gitee账号 管理者在gitee网站上创建远程仓库 每个开发者安装git与基本配置 1.git的下载和安装 2.配置SSH公钥 3.开发者信息配置 git命令用法 gitee介绍 Gitee&#xff08;又称码云&#xff09;是一个基于Git的代码托管服务&#xff0c;由开源…
阅读更多...
netty：promise的简单示例

netty：promise的简单示例

# 项目代码资源&#xff1a; 可能还在审核中&#xff0c;请等待。。。 https://download.csdn.net/download/chenhz2284/89442495 # 项目代码 【pom.xml】 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><v…
阅读更多...
内存中的buffer和cache

内存中的buffer和cache

一、buffer和cache是内存的一部分即占用了内存的空间 提到查看linux主机内存&#xff0c;我们总会想到free命令也一般用该命令&#xff0c;如下面的输出&#xff1a; [rootlocalhost ~]# freetotal used free shared buff/cache available Mem: …
阅读更多...
利用Cloudera Manager API来监控CDH大数据组件并异常重启实例

利用Cloudera Manager API来监控CDH大数据组件并异常重启实例

一、背景 CDH在生产环境遇到的问题会是千奇百怪，有的大数据组件莫名其妙就挂掉了，大多时候可以通过登录ClouderaManager进行操作，通常这种操作方式并无大问题，但若是某个时刻出现异常，特别是放长假时，而管理人员又不方便登录ClouderaManager，那故障就会持续一段时间，严…
阅读更多...
MyBatis进行模糊查询时SQL语句拼接引起的异常问题

MyBatis进行模糊查询时SQL语句拼接引起的异常问题

项目场景&#xff1a; CRM项目&#xff0c;本文遇到的问题是在实现根据页面表单中输入条件&#xff0c;在数据库中分页模糊查询数据&#xff0c;并在页面分页显示的功能时&#xff0c;出现的“诡异”bug。 开发环境如下&#xff1a; 操作系统&#xff1a;Windows11 Java&#…
阅读更多...
CAN测试工具——BUSMASTER

CAN测试工具——BUSMASTER

文章目录 推荐理由一、菜单栏Transmit WindowDiagnostics二、Tools推荐理由 BUSMASTER是一个用于设计,监测,分析与模拟CAN网络的开源的开放式总线PC软件. 1） 可以和十几种常用CAN总线硬件兼容。比如：IXXAT、PEAK、Kvaser、CANcase XL等。 2）免费，开源 https://rbei-etas.g…
阅读更多...
乐鑫ESP32相关资料整理

乐鑫ESP32相关资料整理

乐鑫科技 Espressif 介绍 乐鑫科技 Espressif AIoT 领域软硬件产品的研发与设计&#xff0c;专注于研发高集成、低功耗、性能卓越、安全稳定、高性价比的无线通信 SoC&#xff0c;现已发布 ESP8266、ESP32、ESP32-S、ESP32-C 和 ESP32-H 系列芯片、模组和开发板。 Espressif Sy…
阅读更多...
C++ virtual public(虚继承类)

C++ virtual public(虚继承类)

这个"virtual"有什么作用&#xff1f; 由于C支持多重继承&#xff0c;所以对于一个派生类中有几个直接父类&#xff0c;而几个直接父类中有几个可能分别继承自某一个基类&#xff08;就是父类的父类&#xff09;&#xff0c;这样在构造最终派生类时&#xff0c;会出现…
阅读更多...
【Vue3】插槽的使用及其分类

【Vue3】插槽的使用及其分类

历史小剧场 后来我才明白&#xff0c;造反的宋江&#xff0c;和招安的宋江&#xff0c;始终是同一个人。 为什么要造反&#xff1f; 造反&#xff0c;就是为了招安。 ----《明朝那些事儿》 概念 在日常的项目开发中&#xff0c;当我们在编写一个完整的组件时&#xff0c;不可避…
阅读更多...
【动态规划】0-1背包问题

【动态规划】0-1背包问题

【动态规划】0-1背包问题 题目:现在有四个物品&#xff0c;背包总容量为8&#xff0c;背包最多能装入价值为多少的物品? 我的图解 表格a【i】【j】表示的是容量为j的背包装入前i个物品的最大价值。 拿a【1】【1】来说&#xff0c;它的值就是背包容量为1&#xff0c;只考虑…
阅读更多...
我的创作纪念日256days

我的创作纪念日256days

机缘 当我回望走过的路&#xff0c;心中有无数的故事在跳跃&#xff0c;试图穿过指尖&#xff0c;流淌在文字之间。成为一名创作者&#xff0c;对我来说并非一蹴而就的决定&#xff0c;而是一场始于内心深处的召唤。那是一种对表达的渴望&#xff0c;对美的追求&#xff0c;最重…
阅读更多...
【探索Linux命令行】从基础指令到高级管道操作的介绍与实践

【探索Linux命令行】从基础指令到高级管道操作的介绍与实践

目录 man 指令&#xff08;说明&#xff09; 介绍 cp 指令&#xff08;复制&#xff09; ​编辑 mv 指令&#xff08;移动&#xff09; ​编辑 cat 指令&#xff08;类似cout&#xff09; less&#xff08;查找&#xff09; head & tail&#xff08;打印&#xff…
阅读更多...
[数据集][目标检测]减速区域检测数据集VOC+YOLO格式1654张1类别

[数据集][目标检测]减速区域检测数据集VOC+YOLO格式1654张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1654 标注数量(xml文件个数)&#xff1a;1654 标注数量(txt文件个数)&#xff1a;1654 标注…
阅读更多...
cap原理是什么？

cap原理是什么？

CAP原理&#xff0c;也被称为CAP定理或Brewer定理&#xff0c;描述了在分布式系统中&#xff0c;一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容错性&#xff08;Partition tolerance&#xff09;这三个特性只能同时满足其中…
阅读更多...
鸿蒙轻内核A核源码分析系列六 MMU协处理器（2）

鸿蒙轻内核A核源码分析系列六 MMU协处理器（2）

3、MMU汇编代码 在arch\arm\arm\include\arm.h文件中&#xff0c;封装了CP15协处理器相关的寄存器操作汇编函数。我们主要看下MMU相关的部分。 3.1 CP15 C2 TTBR转换表基地址寄存器 代码比较简单&#xff0c;结合下图&#xff0c;自行查看即可。该图来自《ARM Cortex-A9 Tec…
阅读更多...
Java学习 - MySQL数据存储过程 + 函数 + 触发器介绍实例

Java学习 - MySQL数据存储过程 + 函数 + 触发器介绍实例

存储过程 存储过程的概念和优点 概念&#xff1a;存储过程是一组预先编译好的SQL语句的集合类比&#xff1a;存储过程类似于 Go 中的函数优点&#xff1a;提高代码重用性&#xff0c;简化操作&#xff0c;减少编译次数 创建存储过程 创建语法 DELIMITER $ # 不能加分号CREA…
阅读更多...
JavaFX HBox

JavaFX HBox

JavaFX API具有将UI控件显示到场景图上的布局类。HBox布局类将JavaFX子节点放在水平行中。 新的子节点附加到右侧的末尾。默认情况下&#xff0c;HBox布局尊重子节点的首选宽度和高度。 当父节点不可调整大小时&#xff0c;例如Group节点&#xff0c;HBox的行高度设置为子节点的…
阅读更多...
【车载开发系列】专业术语汇总（CAN网络管理关联）

【车载开发系列】专业术语汇总（CAN网络管理关联）

【车载开发系列】专业术语汇总&#xff08;CAN网络管理关联&#xff09; 【车载开发系列】专业术语汇总 【车载开发系列】专业术语汇总&#xff08;CAN网络管理关联&#xff09; 英文缩写英文全称中文说明ACKAcknowledge应答-SNISource Node Identifier源节点标识符-CBVControl…
阅读更多...
RSS Channel 元素

RSS Channel 元素

RSS Channel 元素 概述 RSS（Really Simple Syndication）是一种广泛使用的消息来源格式，允许用户订阅并接收他们感兴趣的内容更新。RSS文档通常包含一个或多个<channel>元素，每个元素代表一个特定的内容源。本文将详细探讨<channel>元素的结构和用途，以及如何…
阅读更多...
【工作】计算机行业相关的十六类工作简介

【工作】计算机行业相关的十六类工作简介

本文简单介绍了计算机行业相关的工作类别&#xff0c;共16种&#xff0c;包括常见招聘要求与平均工资。平均工资信息来源&#xff1a;米国企业点评职场社区glassdoor&#xff08;https://www.glassdoor.com/index.htm&#xff09; &#xff08;一&#xff09;软件工程师 软件…
阅读更多...
最新文章

Copyright @ 2022~2023