网站开发人员 怎么保存,岷县网站建设,如何做网络营销,网站首页版式目录
回到顶部 Swiper轮播图
jQuery源码_立即执行函数
jQuery源码_链式调用
jQuery源码_参数重载
jQuery扩展 回到顶部 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compati…
目录
回到顶部 Swiper轮播图
jQuery源码_立即执行函数
jQuery源码_链式调用
jQuery源码_参数重载
jQuery扩展 回到顶部 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/scriptstylediv {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
bodydiv内容1/divdiv内容2/divdiv内容3/divdiv内容4/divdiv内容5/divdiv内容6/div!-- 让a标签失去href属性的效果 --a hrefjavaScript:void(0) idbtn回到顶部/ascript//当滚动条的位置处于距顶部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 relstylesheet hrefdist/css/swiper-bundle.min.css
/head
body...script srcdist/js/swiper-bundle.min.js/script...
/body
/html2.添加HTML内容。Swiper7的默认容器是.swiperSwiper6之前是.swiper-container。
div classswiperdiv classswiper-wrapperdiv classswiper-slideSlide1/divdiv classswiper-slideSlide2/divdiv classswiper-slideSlide3/div/div!-- 如果需要分页器 --div classswiper-pagination/div!-- 如果需要导航按钮 --div classswiper-button-prev/divdiv classswiper-button-next/div!-- 如果需要滚动条 --div classswiper-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))
