jQuery01
目录
前言
jQuery01学习开始
一、复习
- DOM: 文档 对象 模型
- HTML代码 转换成 document 对象, 然后再渲染到页面上
- 利用 JS 直接操作 document 来实现更加 灵活的操作
- 选择要操作的元素
- id:
document.getElementById- 父 parentElement
- 子 children
- 兄 previousElementSibling
- 弟 nextElementSibling
- css选择器
- 单个 querySelector
- 多个 querySelectorAll
- 操作属性
- 系统属性
- img 的 src : 切换 img 标签显示的图
- className: class属性的本体
- classList: 集合 -- 包含很多快捷操作class的方法
- innerText: 内容文本
- innerHTML: 内容中所有HTML代码
- 自定义属性
- 规范 :
data-（存放在dataset）- 不规范: 随意声明(1.getAttribute 2.setAttribute .)
- 事件
- click :点击
- focus : 焦点
- blur : 失去焦点
- change : 值变更
- keyup :键盘按键抬起
- scroll : 滚动
- mouseover :鼠标悬浮
二、jQuery
2006年发布的框架, 秉承着write less, do more---写的少, 做的多理念诞生- 把原生的 复杂的操作, 封装之后 , 得到更加简单的用法
- 使用 jQuery 必须参考其
说明书：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
三、css操作
<!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>css 09:13</title> </head> <body> <ul> <li>泡泡</li> <li>亮亮</li> <li>铭铭</li> </ul> <!-- 脚本通常分两类: 开发版 和 产品版 --> <!-- 开发版: 带有格式和注释, 适合查看源码, 体积大 --> <!-- 产品版: 通常带 min 标识, 把注释和格式删除, 体积小. 适合用 --> <!-- jquery-3.6.1.min.js需要额外下载 或者直接使用线上资源 --> <script src="./jquery-3.6.1.min.js"></script> <script> // 由 jQuery 脚本中, 提供的全局变量 console.dir($) console.log($('li')) //查看其原型 // 修改style 内联样式 $('li').css('color', 'blue') // 接收对象类型 $('li').css({ background: 'orange', // css中, 多个单词组成的属性, 此处兼容 破折号语法 和 小驼峰 'margin-bottom': '10px', fontSize: '40px' }) </script> </body> </html>
四、点击事件
<!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>click 事件</title> </head> <body> <ul> <li>泡泡</li> <li>铭铭</li> <li>亮亮</li> </ul> <script src="./jquery-3.6.1.min.js"></script> <script> // 查询到所有li $('li').click(function () { console.log(this) // this: 当前触发事件的对象 this.style.color = 'green' // $(DOM元素) : 把元素封装在 JQ的对象里 // 就可以使用 JQ 原型中提供的各种 强力方法 console.log('$(this)', $(this)) $(this).css('background', 'orange') }) </script> </body> </html>
五、class
<!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>class 09:38</title> <style> .active { background-color: orange; } #box { width: 200px; height: 200px; border: 3px solid gray; } </style> </head> <body> <button>添加</button> <button>删除</button> <button>切换</button> <div id="box"></div> <script src="./jquery-3.6.1.min.js"></script> <script> // eq(i) : equal等于 // eq(i) : 从查询到的数组中, 获取序号 i 的元素 console.log($('button').eq(0)) // 添加 $('button').eq(0).click(function () { $('#box').addClass('active') }) // 移除 $('button').eq(1).click(function () { $('#box').removeClass('active') }) // 切换 $('button').eq(2).click(function () { $('#box').toggleClass('active') }) </script> </body> </html>
- 练习
<!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>练习 10:11</title> <style> img { transition: 0.4s; border: 4px solid transparent; } img.active { border: 4px solid orange; border-radius: 50%; } </style> </head> <body> <div id="box"> <img src="./imgs/smallskin-1.jpg" alt=""> <img src="./imgs/smallskin-2.jpg" alt=""> <img src="./imgs/smallskin-3.jpg" alt=""> <img src="./imgs/smallskin-4.jpg" alt=""> <img src="./imgs/smallskin-5.jpg" alt=""> </div> <script src="./jquery-3.6.1.min.js"></script> <script> $('#box>img').click(function () { // siblings(): 找到当前元素的 所有兄弟元素 $(this).addClass('active').siblings().removeClass('active') // 当前项.添加样式.兄弟元素们.移除样式 }) </script> </body> </html>
- 练习
<!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>练习 10:25</title> <link rel="stylesheet" href="./reset.css"> <style> ul { display: flex; background-color: #002c69; padding: 0 30px; } li { color: white; padding: 10px 20px; cursor: pointer; /* 文本无法被双击选中 */ user-select: none; } li.active { background-color: orange; /* 当前选中项, 不应该再接收点击事件 */ /* 鼠标指针事件: 全部删除 */ pointer-events: none; } </style> </head> <body> <ul> <li class="active">首页</li> <li>关于净美仕</li> <li>公司动态</li> <li>产品中心</li> <li>联系我们</li> </ul> <script src="./jquery-3.6.1.min.js"></script> <script> $('li').click(function () { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>
- 练习
<!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>练习 10:48</title> <link rel="stylesheet" href="./reset.css"> <style> ul { background-color: #f5f5f6; padding: 40px; display: flex; } li { width: 36px; height: 36px; background-color: white; color: #4e6ef2; border-radius: 4px; margin-right: 8px; text-align: center; line-height: 36px; cursor: pointer; user-select: none; } li.active { color: white; background-color: #4e6ef2; pointer-events: none; } </style> </head> <body> <ul> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <script src="./jquery-3.6.1.min.js"></script> <script> $('li').click(function () { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>
六、show_hide
<!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>显示 与 隐藏 11:22</title> <style> #box { width: 200px; height: 200px; background-color: aquamarine; } </style> </head> <body> <!-- DOM主要操作 大概有: --> <!-- 1. 操作样式 --> <!-- 2. 显示状态切换 --> <button>显示</button> <button>隐藏</button> <button>切换</button> <div id="box"></div> <script src="./jquery-3.6.1.min.js"></script> <script> // 隐藏 $('button').eq(1).click(function () { $('#box').hide() // 隐藏: 利用 style.display="none" 实现 }) // 显示 $('button').eq(0).click(function () { $('#box').show() // 显示 }) // 切换 $('button').eq(2).click(function () { $('#box').toggle() }) </script> </body> </html>
- 练习
<!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>菜单折叠 11:35</title> </head> <body> <div id="menu"> <h3>今日午餐:</h3> <ul> <li>黄焖鸡</li> <li>炝莲白</li> <li>羊汤泡馍</li> <li>驴肉火烧</li> <li>麻辣烫</li> </ul> </div> <script src="./jquery-3.6.1.min.js"></script> <script> $('#menu h3').click(function () { // next(): 下一个兄弟元素, 相当于 nextElementSibling // $(this).next().toggle() // toggle: 瞬间切换 // fadeToggle: 带透明度动画的切换 // slideToggle: 带滑动动画的切换 $(this).next().slideToggle() }) </script> </body> </html>
- 练习
<!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>练习 11:45</title> <style> #box { position: fixed; right: 0; bottom: 0; width: 200px; border: 1px solid #bbb; } </style> </head> <body> <div id="box"> <button>关闭</button> <br> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam ut quisquam exercitationem. Doloremque fuga reprehenderit, perspiciatis iste voluptas adipisci est ullam nisi, saepe dolorum sint. Aliquam, minus quidem. Dolores, molestiae. </div> <script src="./jquery-3.6.1.min.js"></script> <script> // 关闭按钮: $('#box>button').click(function () { // $('#box').hide() // 参数1: 动画时长, 单位毫秒 1秒 = 1000毫秒 // $('#box').fadeOut(2000) //渐出 // 参数2: 动画结束时的回调函数 $('#box').slideUp(2000, function () { setTimeout(() => { $('#box').slideDown() //滑动展开 }, 3000); }) //滑动收起 }) </script> </body> </html>
七、标签栏切换
<!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>标签栏切换 14:01</title> <link rel="stylesheet" href="./reset.css"> <style> #tabs { width: 700px; } #tabs>.tab-bar { display: flex; border-bottom: 2px solid #e4393c; background-color: #f7f7f7; } #tabs>.tab-bar>li { padding: 10px 25px; cursor: pointer; } #tabs>.tab-bar>li.active { background-color: #e4393c; color: white; } #tabs>.tab-content { position: relative; border: 2px solid gray; height: 400px; } #tabs>.tab-content>li { position: absolute; height: 100%; top: 0; left: 0; width: 100%; } </style> </head> <body> <div id="tabs"> <ul class="tab-bar"> <li class="active">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价</li> <li>预售说明</li> </ul> <ul class="tab-content"> <li style="background: red;"></li> <li style="background: blue;"></li> <li style="background: green;"></li> <li style="background: orange;"></li> <li style="background: brown;"></li> </ul> </div> <script src="./jquery-3.6.1.min.js"></script> <script> $('#tabs>.tab-bar>li').click(function () { $(this).addClass('active').siblings().removeClass('active') // 获取点击项的序号; index(): 获取元素在 所有兄弟元素中的序号 var i = $(this).index() console.log(i) // 知道选项的序号, 找到对应序号的内容, 让其显示, 让其他的隐藏 $('.tab-content>li').eq(i).fadeIn().siblings().fadeOut() }) // 让 .tab-content 下的 第一个li显示, 其他的隐藏 $('.tab-content>li').eq(0).show().siblings().hide() </script> </body> </html>
- 练习
<!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>练习 14:43</title> <link rel="stylesheet" href="./reset.css"> <style> #tabs { width: 700px; } .tab-bar { display: flex; background-color: #000; } .tab-bar>li { color: #aaadbc; line-height: 40px; width: calc(100% / 5); text-align: center; cursor: pointer; } .tab-bar>li.active { background-color: #262626; color: #ecad45; } .tab-content { height: 350px; position: relative; } .tab-content>li { position: absolute; height: 100%; width: 100%; background-size: cover; } </style> </head> <body> <div id="tabs"> <ul class="tab-content"> <li style="background-image: url(./wzry/111.jpg);"></li> <li style="background-image: url(./wzry/222.jpg);"></li> <li style="background-image: url(./wzry/333.jpg);"></li> <li style="background-image: url(./wzry/444.jpg);"></li> <li style="background-image: url(./wzry/555.jpg);"></li> </ul> <ul class="tab-bar"> <li class="active">技能特效研讨</li> <li>七周年CG</li> <li>首届精英杯开赛</li> <li>10万奖金福利</li> <li>讨论赢好礼</li> </ul> </div> <script src="./jquery-3.6.1.min.js"></script> <script> $('.tab-bar>li').mouseover(function () { $(this).addClass('active').siblings().removeClass('active') var i = $(this).index() // 动画效果: 带有持续时间, 如果本次动画未结束 就触发下一次动画, 就会出现排队执行的情况 --- 动画队列 // 解决: 在执行新的动画前, 停止旧的动画 // stop: 停止动画 $('.tab-content>li').stop() $('.tab-content>li').eq(i).fadeIn().siblings().fadeOut() }) // 初始化 $('.tab-content>li').eq(0).show().siblings().hide() </script> </body> </html>
八、自定有动画
<!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>自定义动画 15:40</title> <style> #box { width: 40px; height: 40px; border-radius: 4px; background-color: orange; /* 方便在动画中调整位置 */ position: relative; } </style> </head> <body> <!-- JQ提供了自定义动画, 同 css 的过渡效果 --> <!-- 更专业的动画 推荐采用 关键帧 @keyFrame --> <button>开始动画</button> <button>结束动画</button> <div id="box"></div> <script src="./jquery-3.6.1.min.js"></script> <script> $('button').eq(0).click(function () { // animate: 带有过渡效果的 修改css样式 // 所有 大小的属性, 默认单位 px // 参数1: 目标css效果 // 参数2: 持续时间, 单位毫秒 1000毫秒 = 1秒 $('#box').animate({ width: 240 }, 2000) // JQ利用 JS 每隔1/60 秒, 更新一次 内联样式实现的 $('#box').animate({ height: 240, borderRadius: '50%' }).animate({ left: 200, width: 30, height: 30 }) }) //停止 $('button').eq(1).click(function () { // 默认设定: 停止当前动画, 立刻开始 动画队列中后续的 // 参数1: 是否要清空队列, 默认false, 代表不清空 // 参数2: 结束动画时, 是否跳转到最终的目标效果, 默认false; 不会跳转 $('#box').stop(true, true) }) // JQ适合辅助 实现一些 简单的动画 // 不支持 transform 和 颜色 </script> </body> </html>
- 练习
<!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>练习 16:15</title> <link rel="stylesheet" href="./reset.css"> <style> #tabs { width: 300px; overflow: hidden; } .tab-bar { background-color: #9ac7ed; padding-top: 2px; display: flex; } .tab-bar>li { padding: 10px 15px; color: #2a70be; cursor: pointer; } .tab-bar>li.active { color: #c24949; background-color: white; } .tab-content { display: flex; height: 300px; position: relative; /* left: -200%; */ } .tab-content>li { /* 关闭自动 缩放能力 */ flex: none; width: 100%; height: 100%; color: white; } </style> </head> <body> <div id="tabs"> <ul class="tab-bar"> <li class="active">新闻</li> <li>社会</li> <li>娱乐</li> </ul> <ul class="tab-content"> <li style="background: red;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam aperiam illum a veniam consequuntur minima labore sapiente unde, vero harum aut atque illo enim omnis doloribus pariatur dolores ducimus? Veniam. </li> <li style="background: blue;"> 一款名为《我是渣渣辉》的游戏上架Windows 10应用商店，游戏广告页面上使用了张家辉的形象，并写着“装备RMB回收，交易1秒到 </li> <li style="background: green;"></li> </ul> </div> <script src="./jquery-3.6.1.min.js"></script> <script> $('.tab-bar>li').click(function () { $(this).addClass('active').siblings().removeClass('active') var i = $(this).index() // 0 1 2 $('.tab-content').stop().animate({ left: `-${i}00%` }) }) </script> </body> </html>
九、属性操作
<!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>属性操作 16:51</title> </head> <body> <!-- 属性分两类 --> <!-- 1. 系统属性 : 官方提供的 --> <!-- 2. 自定义属性: 自定义的 data- 和 随便写的 --> <button id="btn1" data-sun-kai="凯凯" data-pp="泡泡" ename="亮亮">Click me</button> <script src="./jquery-3.6.1.min.js"></script> <script> // 系统属性, 用 prop 方法读 var id = $('#btn1').prop('id') console.log(id) // 自定义: 用 data- 声明的 // 如果是 JQ 类型的对象, 推荐变量名用 $ 做前缀: 见名知意 var $btn1 = $('#btn1') console.log($btn1.data('pp')); console.log($btn1.data('sun-kai')); // 自定义: 乱写的 console.log($btn1.attr('ename')); / // 修改 // 系统属性 prop $btn1.prop('id', 'xxxx') // 自定义属性: 统一用 attr 方法 $btn1.attr('ename', '暗暗') $btn1.attr('data-pp', '小鱼') $btn1.attr('data-sun-kai', '追封少年') </script> </body> </html>
十、大小图切换
<!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>大小图切换练习 17:20</title> <link rel="stylesheet" href="./reset.css"> <style> #box>ul { display: flex; } #box>ul img { width: 90px; height: 90px; border: 4px solid transparent; cursor: pointer; margin-right: 4px; } #box>ul>li.active>img { border-color: orange; } </style> </head> <body> <div id="box"> <img src="./imgs/1_lg.jpg" alt=""> <ul> <li data-big="./imgs/1_lg.jpg" class="active"><img src="./imgs/1_sm.jpg" alt=""></li> <li data-big="./imgs/2_lg.jpg"><img src="./imgs/2_sm.jpg" alt=""></li> <li data-big="./imgs/3_lg.jpg"><img src="./imgs/3_sm.jpg" alt=""></li> <li data-big="./imgs/4_lg.jpg"><img src="./imgs/4_sm.jpg" alt=""></li> </ul> </div> <script src="./jquery-3.6.1.min.js"></script> <script> $('#box li').mouseover(function () { $(this).addClass('active').siblings().removeClass('active') // 读取当前项上的自定义属性 data-big var big = $(this).data('big') // src: 属于系统属性 prop $('#box>img').prop('src', big) }) </script> </body> </html>
- 实现下图的效果
<!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>练习</title> <link rel="stylesheet" href="./reset.css"> <style> body{ background-color: #000; } #box{ width: 600px; } #box>img{ width: 100%; } #box>ul{ width: 100%; display: flex; margin-top: 10px; } #box>ul>li{ margin: 0 3px; cursor: pointer; } #box>ul>li>img{ width: calc(100%); border: 1px solid transparent; } #box>ul>li.active>img{ border-color: red; } .mask{ background-color: rgba(0,0,0,0.6); position: fixed; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="box"> <img src="./lol/big37000.jpg" alt=""> <ul> <li class="active"><img src="./lol/small37000.png" alt=""></li> <li><img src="./lol/small37001.png" alt=""></li> <li><img src="./lol/small37002.png" alt=""></li> <li><img src="./lol/small37003.png" alt=""></li> <li><img src="./lol/small37004.png" alt=""></li> </ul> </div> <script src="./vendor/jquery-3.6.1.min.js"></script> <script> $('li').mouseover(function(){ $(this).addClass('active').siblings().removeClass('active') var i = $(this).index() $('#box>img').prop('src',`./lol/big3700${i}.jpg`) }) </script> </body> </html>
总结
jQuery01学习结束
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
