jQuery
关注
分享
扫一扫
jQuery常用技术文章整理
卡尔特斯
GitHub: https://github.com/dengzemiao
掘金：https://juejin.im/user/4450440831840909
展开
-
jQuery 获取元素的高度
在 jQuery 中，获取元素高度的方法有 3 个：height()、innerHeight()、outerHeight()。元素的盒模型： height（高度）、padding（内边距）、margin（外边距）、border（边框）。height()：用于设置或返回当前匹配元素的高度；高度不包括元素的外边距(margin)、内边距(padding)、边框(border)等；对不可见的元素依然有效；还可获取 window、document 对象的高度：$(window).heigh..原创 2021-09-07 14:35:19 · 9803 阅读 · 0 评论 -
前端全屏（轮播）滚动插件
全屏滚动1、fullpage.jsfullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。fullPage.js 的主要功能有：支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时原创 2021-09-02 15:06:07 · 2470 阅读 · 0 评论 -
jQuery 五角星评分案例（详细代码）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; ma原创 2020-10-29 11:05:12 · 983 阅读 · 0 评论 -
jQuery jquery.color.js 背景颜色支持动画
本身jQuery是不支持背景颜色等属性支持动画的，该插件可以让背景颜色等属性支持动画jquery-color GitHub未使用插件的代码以及效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &..原创 2020-10-29 11:05:20 · 1047 阅读 · 0 评论 -
jQuery lazyload.js 懒加载可视范围图片
lazyload 官网lazyload Github2.x 版本使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l..原创 2020-10-29 11:05:30 · 376 阅读 · 0 评论 -
jQuery 自定义插件（详细步骤）
自定义插件方法html 中使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-3..原创 2020-10-29 11:05:39 · 646 阅读 · 0 评论 -
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 300px;原创 2020-10-29 11:05:02 · 266 阅读 · 0 评论 -
jQuery 回车换行、input悬浮全选...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-3.4.1.js"></script&原创 2020-10-28 10:04:58 · 500 阅读 · 0 评论 -
jQuery 动态输入文字展示效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2020-10-28 10:04:19 · 671 阅读 · 0 评论 -
jQuery css() 使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-3.4.1.js"></script&原创 2020-10-28 10:03:39 · 162 阅读 · 0 评论 -
jQuery addClass()、removeClass()、hasClass()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px;原创 2020-10-28 10:03:04 · 254 阅读 · 0 评论 -
jQuery toggleClass()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px;原创 2020-10-28 10:02:30 · 216 阅读 · 0 评论 -
jQuery 显示隐藏动画 show()； hide()； toggle()；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px;原创 2020-10-28 10:02:06 · 797 阅读 · 0 评论 -
jQuery 滑入滑出动画 slideDown()； slideUp()； slideToggle()；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px;原创 2020-10-28 10:00:51 · 740 阅读 · 0 评论 -
jQuery 淡入淡出动画 fadeIn()； fadeOut()； fadeToggle()； fadeTo()；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px;原创 2020-10-28 10:00:20 · 446 阅读 · 0 评论 -
jQuery 自定义动画 animate（详细步骤）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { position: absolute原创 2020-10-28 09:59:46 · 528 阅读 · 0 评论 -
jQuery stop() 停止动画（详细使用）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px;原创 2020-10-28 09:59:21 · 835 阅读 · 0 评论 -
jQuery fullpage.js 全屏分页以及动画使用
鼠标滚动事件<script> var num = 0; // 监听鼠标滚动事件回调 window.onmousewheel = (e) => { num++; console.log(num, e); }</script>全屏滚动可以使用第三方插件 fullpage 来制作。fullpage.js GitHub地址Vue 安装以及使用 fullpagefullpage使用 以及 npm安装fullpage相关使用介绍 1..原创 2020-10-26 10:26:36 · 707 阅读 · 0 评论 -
jQuery pagination(分页器)
基于 jQuery 生成的分页器，高度方便、简洁、易修改。下载地址： DZMPagination<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-10-26 10:18:38 · 2293 阅读 · 0 评论