jquery
关注
分享
扫一扫
喵帕斯_喵太
前端新人，会从零记录自己的学习知识，遇到问题和解决办法。欢迎大家一起讨论更优质的代码结构。
展开
-
-jq-lazyload插件-懒加载
01-jq-lazyload插件-懒加载<!DOCTYPE html><html lang="zh-CN"><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"原创 2021-05-11 20:10:39 · 218 阅读 · 0 评论 -
-jq-固定导航栏案例-/-小火箭返回顶部案例/
01-jq-固定导航栏案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { verti原创 2021-05-11 20:08:16 · 183 阅读 · 0 评论 -
-jq-链式编程原理
01-jq-链式编程原理<!DOCTYPE html><html lang="zh-CN"><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">原创 2021-05-11 20:04:39 · 214 阅读 · 0 评论 -
-jq-多库共存释放$-jq冲突
0-jq-多库共存释放$ <script> // 释放$ const $my = $.noConflict() </script> <!-- 引入其他带$符号的库 --></head><body> <script> // $(function () { }) // 不能使用$，被释放了 $my(function () {原创 2021-05-11 20:03:33 · 87 阅读 · 0 评论 -
-jq-事件触发(搜索框案例)/-音频-视频播放-load()-play()/
01-jq-事件触发<body> <input type="text" name="word"><button>搜索</button> <script> $(function () { // 给搜索按钮绑定点击事件 $('button').on('click', function () { // 获取输入的数据原创 2021-05-11 20:02:32 · 488 阅读 · 0 评论 -
-jq-事件解绑-off()
01-jq-事件解绑-off()<!DOCTYPE html><html lang="zh-CN"><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">原创 2021-05-11 19:58:20 · 313 阅读 · 0 评论 -
-jq-on注册事件
01-jq-on注册事件<!DOCTYPE html><html lang="zh-CN"><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">原创 2021-05-11 19:54:53 · 166 阅读 · 0 评论 -
-jq-事件委托-bind绑定事件-bind绑定事件-append（）-事件委托：delegate(‘目标子元素选择器‘,‘事件类型‘,回调函数)
01- jq-事件委托<body> <ul> <li>隔壁老王1</li> <li>隔壁老王2</li> <li>隔壁老王3</li> <li>隔壁老王4</li> <li>隔壁老王5</li> <li>隔壁老王6</li>原创 2021-05-11 19:52:21 · 185 阅读 · 0 评论 -
-jq-offset()-position()-scrollLeft()||Top()-偏移-距离文档（body）-滚动-
01-jq-偏移-offset()-距离文档<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2021-05-11 19:47:17 · 179 阅读 · 0 评论 -
-jq-显式迭代-each()/-jq-创建元素-`append()`-`prepend()`--兄弟关系-`after()`-`before()`/-jq-尺寸-width()-height()
01-jq-显式迭代-each()<body> <ul> <li>隔壁老王1</li> <li>隔壁老王2</li> <li>隔壁老王3</li> <li>隔壁老王4</li> <li>隔壁老王5</li> <li>隔壁老王6</li>原创 2021-05-09 22:22:55 · 285 阅读 · 1 评论 -
-jq-data存储数据-/-jq-data临时存储数据-数据编辑-让input框拿到光标：focus()
01-jq-data存储数据<body> <div class="box" data-age="80">前端小白</div> <script> $(function () { // data() const $box = $('.box') // 获取是所有以data-开头的自定义属性 console.log($box.data原创 2021-05-09 20:26:03 · 239 阅读 · 0 评论 -
-jq-属性操作-`prop()`-`attr()`/-jq-点餐系统-/-jq-文本操作-`html()`-`text()`-`val()`
01-jq-属性操作-prop()-attr()<body> <div class="box" id="box1" data-index=1>前端小白</div> <input type="text" name="username" id="un" placeholder="请输入用户名"> <script> $(function () { // prop()原创 2021-05-09 20:20:01 · 167 阅读 · 0 评论 -
-jq-动画-下拉菜单/-jq-动画-淡入淡出效果-`fadeIn()`-`fadeOut()`-`fadeToggle()`-`fadeTo()`/-jq-动画-自定义动画
01-jq-动画-下拉菜单<!DOCTYPE html><html lang="zh-CN"><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">原创 2021-05-09 20:01:46 · 386 阅读 · 1 评论 -
-jq-动画-显示与隐藏-`show()`-`hide()`-`toggle()`/-jq-动画-滑动效果-`slideDown()`-`slideUp()`-`slideToggle()`
01-jq-动画-显示与隐藏-show()-hide()-toggle() .box { width: 100px; height: 100px; background-color: red; display: none; } </style> <script src="../js/jquery-1.12.4.min.js"></sc原创 2021-05-09 19:49:51 · 212 阅读 · 0 评论 -
-jq-样式操作-css/-jq-删除元素-empty() || html(‘‘)-删除元素：remove()
01-jq-样式操作-css <style> .box { width: 100px; height: 100px; background-color: pink; } </style></head><body> <div class="box"></div> <script>原创 2021-05-06 19:55:56 · 182 阅读 · 0 评论 -
jq-手风琴/-jq-淘宝精品显示/-jq-TAB栏目切换
01-jq-手风琴<!DOCTYPE html><html lang="zh-CN"><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"> &l原创 2021-05-06 19:54:47 · 158 阅读 · 0 评论 -
jq-入口函数/jq-原生对象/jq-基本选择器/jq-重点筛选方法`children``find``siblings``parent``next``prev`/
01-jq-入口函数 <script> // 入口 // $(function(){ // 入口}) $(function () { console.log('入口一') }) // $(document).ready(function(){}) $(document).ready(function () { // console.log原创 2021-05-06 19:44:38 · 150 阅读 · 0 评论