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

目录

回到顶部

 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))

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

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

相关文章

如何去阅读源码,我总结了18条心法

那么到底该如何去阅读源码呢&#xff1f;这里我总结了18条心法&#xff0c;助你修炼神功 学好JDK 身为一个Javaer&#xff0c;不论要不要阅读开源项目源码&#xff0c;都要学好JDK相关的技术。 所有的Java类开源项目&#xff0c;本质上其实就是利用JDK已有的类库和关键字实现…

这13个不经意却很不卫生的行为,很多人都没意识到

这13个不经意却很不卫生的行为&#xff0c;很多人都没意识到 北京崇文中方中医医院名医馆 2023-11-11 17:01 发表于北京 我们在生活中不经意间做出的一些动作&#xff0c;或者日常养成的一些行为习惯&#xff0c;正在悄悄伤害着我们的身体健康。可惜的是很多人都不知道这一点…

archery修改为不能自提自审核上线SQL

目录 背景修改代码效果参考 背景 我和同事都可以提交上线SQL&#xff0c;但是不能自己提交的SQL自己去审核通过。目前的情况是可以自提自审。 修改代码 找到/opt/archery/sql/utils/workflow_audit.py文件 ...省略...# 判断用户当前是否是可审核staticmethoddef can_revie…

VMware Workstation系列:Windows10 优化VMware虚拟机运行速度总结(单台、多台-ESXI)

Windows10 优化VMware虚拟机运行速度总结 一. 单台或两台同时运行前言&#xff1a;优化方法环境&#xff1a; 1、清除多余快照2、清理磁盘。3、虚拟机全局设置5、设置“优先级”6、设置“设备”7、编辑虚拟机设置8、分配合适的内存和CPU 二. 多台并行背景&#xff1a;一. 下载1…

【WiFI问题自助】解决WiFi能连上但是没有网的问题

WiFi能连上但是没有网的问题 背景&#xff1a;wifi能连上&#xff0c;但是没有网 解决 遇事不决&#xff0c;先重启啊&#xff01;怎么重启&#xff1f;拔掉电源再插上&#xff01;拔掉网线再插上&#xff01; 直接ok了。 思考记录 今天WiFi又上不了网了&#xff0c;昨天报…

【OpenCV实现图像:使用OpenCV进行图像处理之透视变换】

文章目录 概要计算公式举个栗子实际应用小结 概要 透视变换&#xff08;Perspective Transformation&#xff09;是一种图像处理中常用的变换手段&#xff0c;它用于将图像从一个视角映射到另一个视角&#xff0c;常被称为投影映射。透视变换可以用于矫正图像中的透视畸变&…

Jenkins 配置节点交换内存

查看交换内存 free -hswapon -s创建swap文件 dd if/dev/zero of/mnt/swap bs1M count1024启用交换文件 设置权限 chmod 600 /mnt/swap设置为交换空间 mkswap /mnt/swap启用交换 swapon /mnt/swap设置用户组 chown root:root /mnt/swap查看 swapon -s重启系统也能生效还需要修…

设计模式-行为型模式-模板方法模式

一、什么是模板模式 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一个算法骨架&#xff0c;允许子类在不改变算法整体结构的情况下重新定义算法的某些步骤。 主要组成部分&#xff1a; 1、模板方法&#xff08;Templ…

论文笔记:Localizing Cell Towers fromCrowdsourced Measurements

2015 1 Intro 1.1 motivation opensignal.com 、cellmapper.net 和 opencellid.org 都是提供天线&#xff08;antenna&#xff09;位置的网站 他们提供的天线位置相当准确&#xff0c;但至少在大多数情况下不完全正确这个目标难以实现的原因是蜂窝网络供应商没有义务提供有…

wincc定时器功能介绍

1定时器功能介绍 WinCC中定时器的使用可以使WinCC按照指定的周期或者时间点去执行任务&#xff0c;比如周期执行变量归档、在指定的时间点执行全局脚本或条件满足时打印报表。WinCC已经提供了一些简单的定时器&#xff0c;可以满足大部分定时功能。但是在有些情况下&#xff0c…

【计算机网络】多路复用的三种方案

文章目录 1. selectselect函数select的工作特性select的缺点 2. pollpoll函数poll与select的对比 3. epollepoll的三个接口epoll的工作原理epoll的优点LT和ET模式epoll的应用场景 &#x1f50e;Linux提供三种不同的多路转接&#xff08;又称多路复用&#xff09;的方案&#xf…

【python FastAPI】fastapi中如何限制输入参数,如何让docs更好看,如何自定义错误码json返回

原则&#xff1a; 输入输出都基于BaseModel依靠JSONResponse制定返回错误的json信息依靠装饰器中app.post制定responses字典从而让docs文档更丰富 import uvicorn from pydantic import BaseModel, Field from fastapi import FastAPI, HTTPException from fastapi.middleware…

Python之pyc文件的生成与反编译

目录 1、什么是pyc文件 2、手动生成pyc文件 3、pyc文件的执行 4、pyc文件的反编译 1、什么是pyc文件 pyc文件&#xff08;PyCodeObject&#xff09;是Python编译后的结果。当python程序运行时&#xff0c;编译的结果是保存于PyCodeObject&#xff0c;程序运行结束后&#x…

(动手学习深度学习)第13章 实战kaggle竞赛:狗的品种识别

文章目录 1. 导入相关库2. 加载数据集3. 整理数据集4. 图像增广5. 读取数据6. 微调预训练模型7. 定义损失函数和评价损失函数9. 训练模型 1. 导入相关库 import os import torch import torchvision from torch import nn from d2l import torch as d2l2. 加载数据集 - 该数据…

基于野马算法优化概率神经网络PNN的分类预测 - 附代码

基于野马算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于野马算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于野马优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

【FPGA】Verilog:计数器 | 异步计数器 | 同步计数器 | 2位二进制计数器的实现 | 4位十进制计数器的实现

目录 Ⅰ. 实践说明 0x00 计数器(Counter) 0x01 异步计数器(Asynchronous Counter)

深度学习中的图像融合:图像融合论文阅读与实战

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 abs 介绍图像融合概念&#xff0c;回顾sota模型&#xff0c;其中包括数字摄像图像融合&#xff0c;多模态图像融合&#xff0c; 接着评估一些代表方法 介绍一些常见应用&#xff0c;比如RGBT目标跟踪&#xff0c;…

鸿蒙4.0开发笔记之DevEco Studio启动时不直接打开原项目(二)

1、想要在DevEco Studio启动时不直接打开关闭前的那个项目&#xff0c;可以在设置中进行。 有两个位置可以进入“设置”&#xff0c;一个是左上角的File>Settings&#xff0c;二是右上方的设置图标。 2、进入Settings界面以后&#xff0c;选择Appearance&Behavior下面…

Java Stream中的API你都用过了吗?

公众号「架构成长指南」&#xff0c;专注于生产实践、云原生、分布式系统、大数据技术分享。 在本教程中&#xff0c;您将通过大量示例来学习 Java 8 Stream API。 Java 在 Java 8 中提供了一个新的附加包&#xff0c;称为 java.util.stream。该包由类、接口和枚举组成&#x…

AIGC创作系统ChatGPT网站系统源码,支持最新GPT-4-Turbo模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…