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

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

news 2026/2/10 10:35:46

目录

回到顶部

 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.引入 以一张信息表为例 性别 学历 工作经验 是否婚配 是否生子 客户来源 ... 针对某个可以列举完全的可能性字段&#xff0c;我们应该如何存储 只要某个字段的可能性时列举完全的&#xff0c;那么一般情况下都会采用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

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

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

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

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

问题概述&#xff1a; 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开机报错&#xff0c;显示显示No bootable devices found&#xff0c;如下图所示&#xff1a; 解决方案如下&#xff1a; 1. F2进入BIOS (1) 重启开启&#xff0c;按F2进入BIOS系统。 (2) 进入Boot Sequence&#xff0c;目前系统选择了UEFI&#xff0c;而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接口&#xff0c;没有提供集成SDK。因此无需引入Maven依赖&#xff0c;直接以Https方式请求即可。 有些第三方提供了集成的Java SDK&#xff0c;可根据需求自行选用。 本文采用直接调用官方API的方式。 基础配置 企业微信注册后&#xff0c;可…...

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

[前端] V8引擎编译原理

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

编程日记 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

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

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

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

16 Go的反射

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

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

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

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

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

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

需要将对应的list换成本地list&#xff0c;和对象换成本地对象 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茶、花椒、八角、肉桂、杜仲、厚朴、枸杞、忍冬

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;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文件中定义的类&#xff0c;将通过代码和示例解读&#xff0c;帮助大家理解和使用。 目录 代码B.pyA.py 调用过程 代码 B.py 如在文件B.py,定义了类别Bottleneck&#xff0c;其包含卷积层、正则化和激活函数层&#xff0c;主要对…...

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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/12/31 17:08:10

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...

编程新知 2026/2/8 6:54:24