目录
回到顶部
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))
![实现极坐标图表QPolarChart的角度轴范围是[0,360]时，0度在水平右侧](https://img-blog.csdnimg.cn/5aadcf4575cd4b3db243934e48e2f7d2.png)
![[Linux] shell脚本之循环](https://img-blog.csdnimg.cn/5acc1a6822b9428b9c880c2090fe03ee.png)
