当前位置：首页 > news >正文

jQuery【回到顶部、Swiper轮播图、立即执行函数、链式调用、参数重载、jQuery扩展】(六)-全面详解（学习总结---从入门到深化）

news 2026/4/27 10:24:41

回到顶部

Swiper轮播图

jQuery源码_立即执行函数

jQuery源码_链式调用

jQuery源码_参数重载

jQuery扩展

回到顶部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div {height: 500px;}#btn {width: 35px;height: 45px;position: fixed;right: 50px;bottom: 50px;background: #333;text-decoration: none;color: #fff;text-align: center;padding: 10px;display: none;}</style>
</head>
<body><div>内容1</div><div>内容2</div><div>内容3</div><div>内容4</div><div>内容5</div><div>内容6</div><!-- 让a标签失去href属性的效果 --><a href="javaScript:void(0)" id="btn">回到顶部</a><script>//当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失$(function () {$(window).scroll(function () {if ($(window).scrollTop() > 500) {$("#btn").fadeIn(200);} else {$("#btn").fadeOut(200);}});//当点击跳转链接后，回到页面顶部位置$("#btn").click(function () {$('body,html').animate({scrollTop: 0},500);});});</script>
</body>
</html>

Swiper轮播图

Swiper 使用方法
1.首先加载插件，需要用到的文件有swiper-bundle.min.js和 swiper-bundle.min.css文件

<!DOCTYPE html>
<html>
<head>...<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>...<script src="dist/js/swiper-bundle.min.js"></script>...
</body>
</html>

2.添加HTML内容。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。

<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide1</div><div class="swiper-slide">Slide2</div><div class="swiper-slide">Slide3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div>
</div>

3.你可能想要给Swiper定义一个大小，当然不要也行

.swiper {width: 600px;height: 300px;
}

4.初始化Swiper

<script>        var mySwiper = new Swiper ('.swiper', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})        
</script>

jQuery源码_立即执行函数

jQuery有很多设计是非常优秀的

The Write Less,Do More(写更少,做更多),无疑是jQuery的核心理念，简洁的API、优雅的链式、强大查询与便捷的操作

立即执行函数解决了命名冲突问题

(function(global, factory) {factory(global);
}(window, function(window, noGlobal) {var jQuery = function( selector, context) {return new jQuery.fn.init( selector,context );};jQuery.fn = jQuery.prototype = {};// code ...return jQuery;
}));

再简化

(function(window, noGlobal){var jQuery = function() {};//code ...
})(window, noGlobal);

jQuery源码_链式调用

链式调用可以让代码变得更加的简洁和优雅

$(this).parent().siblings().find(".content").slideUp();

如何做到链式调用呢

var test = {a:function(){console.log('a');return this;},b:function(){console.log('b');return this;},c:function(){console.log('c');return this}
}
test.a().b().c();

jQuery源码_参数重载

jquery有个特别的设计就是参数重载

$('.test')
$(this)
$(function(){...})

再简化

function test(){}
test(100)
test("Hello")
test(function(){})

$() 就是一个函数，参数不同，就涉及到了函数的重载

function test(args){if(typeof args === "number"){console.log("数字");}if(typeof args === "string"){console.log("字符串");}if(typeof args === "function"){console.log("函数");}
}
test(100)
test("Hello")
test(function(){})

jQuery扩展

jQuery.fn.extend() 或者 $.fn.extend() 函数为 jQuery 扩展一个或多个实例属性和方法

扩展一个print()方法，获得当前元素的内容

$.fn.extend({print:function(){console.log($(this).html())}
})
$("p").print();

扩展getMax()方法，获取两个数字中的最大值，使用 $ 调用

$.extend({getMax: function (x, y) {return x > y ? x : y}
})
alert($.getMax(3, 1))

jQuery【回到顶部、Swiper轮播图、立即执行函数、链式调用、参数重载、jQuery扩展】(六)-全面详解（学习总结---从入门到深化）

目录回到顶部 Swiper轮播图 jQuery源码_立即执行函数 jQuery源码_链式调用 jQuery源码_参数重载 jQuery扩展回到顶部 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compati…...

编程日记 2023/11/24 8:25:30

day60

choice参数 1.引入以一张信息表为例性别学历工作经验是否婚配是否生子客户来源 ... 针对某个可以列举完全的可能性字段，我们应该如何存储只要某个字段的可能性时列举完全的，那么一般情况下都会采用choice参数 2.数据准备 from random imp…...

编程日记 2023/11/24 8:24:29

thingsboard的WebSocket API的使用

1、参考文档 Working with telemetry data | ThingsBoard Community Edition 2、订阅的命令我们需要订阅不同的数据，那么该如何来填写参数呢，你需要参考后端代码 TelemetryPluginCmdsWrapper 以及订阅返回的结果参考类：TelemetrySubscriptionUpdate 链接地址： https:/…...

编程日记 2023/11/24 8:23:27

An issue was found when checking AAR metadata

一、报错信息 An issue was found when checking AAR metadata:1. Dependency androidx.activity:activity:1.8.0 requires libraries and applications that depend on it to compile against version 34 or later of the Android APIs.:app is currently compiled against …...

编程日记 2023/11/24 8:21:25

搭建线上jvm监控

这里写目录标题 Springboot项目配置maven依赖application.properties添加监控JVM的配置类启动springboot项目 Prometheus配置配置grafana Springboot项目配置 maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring…...

编程日记 2023/11/24 8:20:24

【计算机网络笔记】数据链路层概述

系列文章目录什么是计算机网络？ 什么是网络协议？ 计算机网络的结构数据交换之电路交换数据交换之报文交换和分组交换分组交换 vs 电路交换计算机网络性能（1）——速率、带宽、延迟计算机网络性能（2）…...

编程日记 2023/11/24 8:19:23

vscode-insiders Remote-SSH XHR failed无法访问远程服务器

问题概述： destFolder/home/apple/.vscode-server-insiders > destFolder2/vscode-cli-05cd2640ec8a106a4ee99cb38e6ee34fbec04f11.tar.gz > 194f252f7426:trigger_server_download_end > Waiting for client to transfer server archive... > W…...

编程日记 2023/11/24 8:18:22

Ubuntu开机显示No bootable devices found

Ubuntu开机报错，显示显示No bootable devices found，如下图所示： 解决方案如下： 1. F2进入BIOS (1) 重启开启，按F2进入BIOS系统。 (2) 进入Boot Sequence，目前系统选择了UEFI，而Legacy选项为…...

编程日记 2023/11/24 8:17:20

设计模式——行为型模式（二）

6.8 迭代器模式 6.8.1 概述定义：提供一个对象来顺序访问聚合对象中的一系列数据，而不暴露聚合对象的内部表示。 6.8.2 结构迭代器模式主要包含以下角色：抽象聚合（Aggregate）角色：定义存储、添加、删除聚合元素以及创建迭代器对象的接口。具体聚合（ConcreteAggreg…...

编程日记 2023/11/24 8:16:18

SpringBoot中企业微信的API调用

说明企业微信官方提供的均为API接口，没有提供集成SDK。因此无需引入Maven依赖，直接以Https方式请求即可。有些第三方提供了集成的Java SDK，可根据需求自行选用。本文采用直接调用官方API的方式。基础配置企业微信注册后，可…...

编程日记 2023/11/24 8:14:17

[前端] V8引擎编译原理

文章目录 1.什么是V81.1 扫描器Scanner1.2 解析器parser1.3 预解析PreParser1.4 解释器Ignition1.5 编译器TurboFan 1.什么是V8 V8是谷歌的开源高性能JavaScript和WebAssembly引擎，用C编写。它被用于Chrome和Node.js等。它实现ECMAScript和WebAssembly，…...

编程日记 2023/11/24 8:13:14

使用Pytorch实现linear_regression

使用Pytorch实现线性回归 # import necessary packages import torch import torch.nn as nn import numpy as np import matplotlib.pyplot as plt# Set necessary Hyper-parameters. input_size 1 output_size 1 num_epochs 60 learning_rate 0.001# Define a Toy datas…...

编程日记 2023/11/24 8:12:13

网络安全等级保护收费标准？

不同省份价格会略有不同，二级等保一般不低于5万元;三级等保不低于9万元，个别省份也可能7万也能办理，根据企业实际情况和省市选定的代理机构确定。等级保护二级? 第二级等保是指信息系统受到破坏后，会对公民、法人和其他组织的合…...

编程日记 2023/11/24 8:11:11

16 Go的反射

概述在上一节的内容中，我们介绍了Go的并发，包括：Goroutines、Channels、WaitGroups、Mutex、Select等。在本节中，我们将介绍Go的反射。Go语言中的反射是一种在运行时检查类型信息并操作对象的能力，通过反射&#xff0…...

编程日记 2023/11/24 8:10:10

SQL Server 百万数据查询优化技巧三十则

点击上方蓝字关注我互联网时代的进程越走越深，使用MySQL的人也越来越多，关于MySQL的数据库优化指南很多，而关于SQL SERVER的T-SQL优化指南看上去比较少，近期有学习SQLSERVER的同学问到SQL SERVER数据库有哪些优化建议&#xff1f…...

编程日记 2023/11/24 8:09:10

list转map(根据某个或多个属性分组)

需要将对应的list换成本地list，和对象换成本地对象 1、List转Map<String,List> // 根据一个字段分组 Map<String, List<String>> map objectLists.stream().collect(Collectors.groupingBy(Object::getName,Collectors.mapping(Object::getId, …...

编程日记 2023/11/24 8:07:08

常见树种（贵州省）：012茶、花椒、八角、肉桂、杜仲、厚朴、枸杞、忍冬

摘要：本专栏树种介绍图片来源于PPBC中国植物图像库（下附网址），本文整理仅做交流学习使用，同时便于查找，如有侵权请联系删除。图片网址：PPBC中国植物图像库——最大的植物分类图片库一、茶灌…...

编程日记 2023/11/24 8:06:04

千云物流 - 使用k8s负载均衡openelb

openelb的介绍具体根据官方文档进行安装官方文档,这里作为测试环境的安装使用. OpenELB 是一个开源的云原生负载均衡器实现，可以在基于裸金属服务器、边缘以及虚拟化的 Kubernetes 环境中使用 LoadBalancer 类型的 Service 对外暴露服务。OpenELB 项目最初由 KubeSphere 社区…...

编程日记 2023/11/24 8:05:03

C语言之字符串函数

C语言之字符串函数文章目录 C语言之字符串函数1. strlen的使用和模拟实现1.1 strlen的使用1.2 strlen的模拟实现 2. strcpy的使用和模拟实现2.1 strcpy的使用2.2 strncpy的使用2.3 strcpy的模拟实现 3. strcat的使用和模拟实现3.1 strcat的使用3.2 strncat3.3 strcat的模拟实现…...

编程日记 2023/11/24 8:04:02

python中一个文件（A.py）怎么调用另一个文件（B.py）中定义的类AA详解和示例

本文主要讲解python文件中怎么调用另外一个py文件中定义的类，将通过代码和示例解读，帮助大家理解和使用。目录代码B.pyA.py 调用过程代码 B.py 如在文件B.py,定义了类别Bottleneck，其包含卷积层、正则化和激活函数层，主要对…...

编程日记 2023/11/24 8:00:59

jScrollPane移动端适配：触控滚动条的完整解决方案

jScrollPane移动端适配：触控滚动条的完整解决方案【免费下载链接】jScrollPane Pretty, customisable, cross browser replacement scrollbars 项目地址: https://gitcode.com/gh_mirrors/js/jScrollPane jScrollPane是一款功能强大的自定义滚动条插件&…...

编程新知 2026/4/27 6:00:05

开源应用平台Budibase：从低代码到企业级自托管部署全解析

1. 项目概述：从“低代码”到“开源应用平台”的认知跃迁第一次听说Budibase，很多人会下意识地把它归类到“又一个低代码工具”的范畴里。毕竟，市面上打着“拖拽式开发”、“快速构建应用”旗号的产品实在太多了。但当你真正深入使用Budibase&…...

编程新知 2026/4/27 5:18:54

生成对抗网络(GAN)原理与实战指南

1. 生成对抗网络入门指南第一次听说生成对抗网络(GAN)时，我正为一个图像生成项目焦头烂额。传统方法生成的图片总是缺乏真实感，直到发现这个2014年由Ian Goodfellow提出的框架，才真正打开了生成式AI的大门。GAN的核心思想非常巧妙——让两个神…...

编程新知 2026/4/27 5:08:33

嵌入式HTTP服务器nanoclaw：极简RPC与文件服务设计

1. 项目概述：一个为嵌入式世界打造的微型“爪子”如果你在嵌入式开发领域摸爬滚打过几年，尤其是在资源受限的微控制器（MCU）上折腾过网络通信或文件传输，那你一定对“如何在巴掌大的内存里优雅地处理数据流”这个难题深…...

编程新知 2026/4/27 3:50:45

Marzipano 核心组件深度解析：从几何体到渲染器的完整架构

Marzipano 核心组件深度解析：从几何体到渲染器的完整架构【免费下载链接】marzipano A 360 media viewer for the modern web. 项目地址: https://gitcode.com/gh_mirrors/ma/marzipano Marzipano 是一款强大的现代 Web 360 媒体查看器，其核心架…...

编程新知 2026/4/27 3:40:14

Preact高阶组件：逻辑复用的终极设计模式指南

Preact高阶组件：逻辑复用的终极设计模式指南【免费下载链接】preact ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. 项目地址: https://gitcode.com/gh_mirrors/pr/preact 在现代前端开发中，高效的…...

编程新知 2026/4/27 3:31:55