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.hqwc.cn/news/205635.html

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

相关文章

Oracle(2-5)Usage and Configuration of the Oracle Shared Server

文章目录 一、基础知识1、 Server Configurations服务器配置2、Dedicated server process专用服务器进程3、Oracle Shared ServerOracle共享服务器4、Benefits of Shared Server 共享服务器的优点5、Processing a Request 处理请求6、Configuring Shared Server 配置共享服务器…

Linux OpenGauss 数据库远程连接

目录 前言 1. Linux 安装 openGauss 2. Linux 安装cpolar 3. 创建openGauss主节点端口号公网地址 4. 远程连接openGauss 5. 固定连接TCP公网地址 6. 固定地址连接测试 前言 openGauss是一款开源关系型数据库管理系统&#xff0c;采用木兰宽松许可证v2发行。openGauss内核…

在建立 OkHttp3 Client 时设置超时时间

这里写目录标题 一. 前言二. 导入mavengradle 三. 设置超时时间 一. 前言 OkHttp是一个处理网络请求的开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司开发。OkHttp3是Java和Android都能用&#xff0c;Android还有一个著名网络库叫Volley&#xff0c;那个只有Andro…

前端实现表格生成序号001、002、003自增

我们最终想要实现的效果如图&#xff0c;从后端获取数据之后&#xff0c;不使用data中的id&#xff0c;而是使用自己生成的按照顺序自增的序号id。 script <template><el-table :data"sticker" border style"width: 100%" id"stickerList&q…

前端js调取摄像头并实现拍照功能

前言 最近接到的一个需求十分有意思&#xff0c;设计整体实现了前端仿 微信扫一扫 的功能。整理了一下思路&#xff0c;做一个分享。 tips: 如果想要实现完整扫一扫的功能&#xff0c;你需要掌握一些前置知识&#xff0c;这次我们先讲如何实现拍照并且保存的功能。 一. windo…

如何清理mac的存储空间

MacBook用户往往会面临同一个问题&#xff1a;存储空间不足无法下载文件&#xff0c;或者内存不足运行大型软件卡顿的情况。影响电脑运行卡顿的原因之一是mac系统其他系统数据&#xff0c;大部分是系统隐藏的缓存文件、日志文件等。为了系统安全起见&#xff0c;默认为隐藏状态…

基于window10的远程桌面报错:要求的函数不受支持 的问题解决方法

基于window10的远程桌面报错&#xff1a;要求的函数不受支持 的问题解决方法 设置方法&#xff1a; 一、WINR 在框内输入gpedit.msc 二、依次打开 计算机配置----管理模板-----系统—凭据分配—加密数据库修正–改为以启用—易受攻击 第一步&#xff1a; 第二步&#xff1a;…

解决VSCode运行时自动保存问题【图文解析】

用VSCode写前端时老是自动保存&#xff0c;代码还没写完就开始 刷新页面 调用接口 出现报错之类的&#xff0c;很烦人&#xff0c;所以就写一篇修改VSCode自动保存文件的文章&#xff0c;以免自己忘记在哪设置。 同事总是用不自动保存&#xff0c;每次写完都要ctrls一下&#x…

80%测试员被骗,关于jmeter 的一个弥天大谎!

jmeter是目前大家都喜欢用的一款性能测试工具&#xff0c;因为它小巧、简单易上手&#xff0c;所以很多人都愿意用它来做接口测试或者性能测试&#xff0c;因此&#xff0c;在目前企业中&#xff0c;使用各个jmeter的版本都有&#xff0c;其中以jmeter3.x、4.x的应该居多。 但是…

Redis主从复制,哨兵和Cluster集群

主从复制&#xff1a; 主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可用的。主从复制主要实现了数据的多机备份&#xff08;和同步&#xff09;&#xff0c;以及对于读操作的负载均衡和简单的故障恢复。 缺陷&#xff1a;故障恢复无法自动化…

HC32L110小华半导体SWD模式切换的问题

在将SWD配置为普通引脚并配置为输出后&#xff0c;如果需要重新配置为SWD&#xff0c;需要将其配置为输入才行&#xff0c;如下&#xff1a; Clk_SetFunc(ClkFuncSwdPinIOEn, TRUE); //配置SWD引脚为普通引脚模式 Gpio_InitIOExt(SWCLK_PORT, SWCLK_PIN, GpioDirOut, TRUE,…

一起学docker系列之六如何搭建私服版本的Docker镜像仓库

目录 前言1 下载并运行私服版本的Docker镜像仓库2 准备上传私服的Docker镜像3 为镜像打上符合私服规范的标签4 修改Docker守护进程的配置文件5 推送镜像到私服版本的Docker镜像仓库6 验证私服的镜像结语 前言 Docker是一种开源的容器技术&#xff0c;可以让开发者和运维人员快…