JQuery
1. JQuery动画
1.1 显示-隐藏动画
-
show()语法: $(对象).show([speed, [easing], [fn]]) //参数介绍: 1. show() 方法中的3个参数可以不用设置, 显示元素没有动画效果 2. 第一个参数表示动画速度,可以设置 'slow' , 'normal', 'fast' 或者表示动画的时长毫秒 3. 第二个参数表示动画切换效果, 默认 'swing[摇动摆动,由快到慢]' 或者 设置 'linear' 4. 第三个参数表示动画完成后执行的函数(回调函数) //代码演示1,未设置任何参数,控制元素显示,没有动画效果 var btn = $('input'); var div = $('div'); btn.click(function(){ div.show(); }) //代码演示2,设置第一个参数,元素按照动画显示 var btn = $('input'); var div = $('div'); btn.click(function(){ div.show('fast'); }) //代码演示3,设置两个参数,元素实现切换效果 btn.click(function(){ div.show('normal','swing'); }) //代码4演示,设置第三个参数,动画执行完后回调函数 btn.click(function(){ div.show('normal','swing', function(){ alert('动画完成'); }); }) -
hide()语法: $(对象).hide([speed, [easing], [fn]); //参数介绍: 1. 参数可以省略,隐藏元素没有动画效果 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 //代码演示同上 -
toggle()语法: $(对象).toggle([speed], [easing], [fn]) //参数介绍 1. 参数可以省略, 如果元素显示则切换为隐藏的,如果元素隐藏的则切换为显示的 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 //代码演示同上 -
案例-好友列表案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 300px; border: 1px solid #000; margin: 150px auto; } h4 { margin: 0; height: 55px; line-height: 55px; background-color: skyblue; text-align: center; border-bottom: 1px solid #000; cursor: pointer; } .list1:last-child h4 { border-bottom: 0 none; } .content { display: none; height: 300px; } </style> </head> <body> <div class="box"> <div class="list1"> <h4>我的好友</h4> <div class="content"> 朋友列表 </div> </div> <div class="list1"> <h4>土豪</h4> <div class="content"> 兰博基尼、布加迪、法拉利、劳斯莱斯 </div> </div> <div class="list1"> <h4>程序员</h4> <div class="content"> Tom、Jerry、nll、ll </div> </div> <div class="list1"> <h4>美工</h4> <div class="content"> 罗丝、朱迪、冰冰 </div> </div> </div> <script src="./jQuery.min.js"></script> <script> $('h4').click(function(){ $(this).siblings().show('fast').parent().siblings().find('.content').hide('fast'); }); </script> </body> </html>
1.2 滑动动画
-
slideDown()介绍: slideDown() 显示元素(通过改变元素高度) 语法: // $(对象).slideDown([speed],[easing],[fn]); 参数介绍: 1. 参数可以省略 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 //代码演示1: $('input').click(function(){ $('div').slideDown(); }) //代码演示2 $('input').click(function(){ $('div').slideDown('fast'); }) //代码演示3 $('input').click(function(){ $('div').slideDown('fast', 'linear'); }) //代码演示4 $('input').click(function(){ $('div').slideDown('fast', 'linear', function(){ alert('动画完成') }); }) -
slideUp()介绍: 通过高度变化（向上减小）来动态地隐藏所有匹配的元素 语法: // $(对象).slideUp([speed,[easing],[fn]]) 参数介绍: 1. 参数可以省略 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 //代码演示: $('input').click(function(){ $('div').slideUp('fast', 'linear', function(){ console.log('动画完成') }); }) -
slideToggle()语法: // $(对象).slideToggle([speed],[easing],[fn]) 参数介绍: 1. 参数可以省略 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 //代码演示: $('input').click(function(){ $('div').slideToggle('fast', 'linear', function(){ console.log('动画完成') }); }) -
小米案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; color: #888; font-family: '微软雅黑'; font-size: 14px; } .nav { width: 980px; height: 60px; margin: 0 auto; line-height: 60px; position: relative; } .nav li { float: left; } .nav li a { padding: 0 15px; font-size: 20px; } .nav ul { overflow: hidden; } .content { width: 100%; height: 200px; left: 0; position: absolute; display: none; border-top: 1px solid #ccc; box-shadow: 0 0 5px 2px #ccc; } .content .item { width: 100%; height: 100%; padding-left: 100px; padding-top: 60px; box-sizing: border-box; display: none; } </style> </head> <body> <div class="nav"> <ul> <li><a href="javascript:;">小米手机</a></li> <li><a href="javascript:;">Redmi红米</a></li> <li><a href="javascript:;">电视</a></li> <li><a href="javascript:;">笔记本</a></li> <li><a href="javascript:;">家电</a></li> <li><a href="javascript:;">路由器</a></li> <li><a href="javascript:;">智能硬件</a></li> <li><a href="javascript:;">服务</a></li> <li><a href="javascript:;">社区</a></li> </ul> <div class="content"> <div class="item">小米手机</div> <div class="item">Redmi红米</div> <div class="item">电视</div> <div class="item">笔记本</div> <div class="item">家电</div> <div class="item">路由器</div> <div class="item">智能硬件</div> <div class="item">服务</div> <div class="item">社区</div> </div> </div> <script src="./jQuery.min.js"></script> <script> //1. 鼠标进入大盒子显示内容区域,鼠标离开隐藏内容区域 $('.nav').hover(function () { $('.content').slideDown(); //2.给每一项设置鼠标进入事件 $(this).find('a').hover(function () { $(this).css('color', 'orange').parent().siblings().children().css('color', '#888'); //获取索引 var index = $(this).parent().index(); //显示内容区域 $('.item').eq(index).show().siblings().hide(); }, function () { $(this).css('color', '#888'); }) }, function () { $('.content').slideUp(); }); </script> </body> </html>
1.3 淡入淡出动画
-
fadeIn()介绍: 通过透明度的变化来实现所有匹配元素的淡入效果[显示] 语法: // $(对象).fadeIn([speed],[easing],[fn]) 参数介绍: 1. 参数可以不用设置 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 //代码演示1: $('input').click(function(){ $('div').fadeIn(); }) //代码演示2 $('input').click(function(){ $('div').fadeIn('fast'); }) //代码演示3 $('input').click(function(){ $('div').fadeIn('fast', 'linear'); }) //代码演示4 $('input').click(function(){ $('div').fadeIn('fast', 'linear', function() { alert('动画完成'); }); }) -
fadeOut()扫描二维码关注公众号，回复： 12224998 查看本文章
介绍: 通过透明度的变化来实现所有匹配元素的淡出效果[隐藏] 语法: // $(对象).fadeOut([speed],[easing],[fn]) 参数介绍: 1. 参数可以不用设置 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 -
fadeToggle()介绍: 通过透明度的变化来开关所有匹配元素的淡入和淡出效果 语法: // $(对象).fadeToggle([speed,[easing],[fn]]) 参数介绍: 1. 参数可以不用设置 2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. 第三个参数表示回调函数,动画完成后执行 -
fadeTo()介绍: 可以自定义透明度动画效果 语法: // $(对象).fadeTo([[speed],opacity,[easing],[fn]]) 参数介绍: 1. speed 表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间 [必须设置] 2. opacity 表示透明度, 0 - 1 之间必须设置 3. easing 表示动切换效果, 默认值 'swing' 或者 设置 'linear' 4. fn 表示回调函数,动画完成后执行 //代码演示: $('input').click(function(){ $('div').fadeTo(1000, 0.1); }) -
高亮显示案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: #000; } .box { width: 630px; height: 400px; border: 1px solid #ccc; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; } .item { width: 200px; height: 186px; } </style> </head> <body> <div class="box"> <div class="item"><img src="imgs/01.jpg" alt=""></div> <div class="item"><img src="imgs/02.jpg" alt=""></div> <div class="item"><img src="imgs/03.jpg" alt=""></div> <div class="item"><img src="imgs/04.jpg" alt=""></div> <div class="item"><img src="imgs/05.jpg" alt=""></div> <div class="item"><img src="imgs/06.jpg" alt=""></div> </div> <script src="./jQuery.min.js"></script> <script> $('.item').hover(function(){ $(this).stop().fadeTo('fast', 1).siblings().stop().fadeTo('fast', 0.3); }, function(){ $('.item').stop().fadeTo('fast', 1); }); </script> </body> </html>$('.item').hover(function(){ $(this).fadeTo('fast', 1, 'linear').siblings().fadeTo('fast', 0.5, 'linear'); },function(){ $('.item').fadeTo('fast', 1); }) // 问题: 当鼠标无限次晃动,动画会一直排队执行 // 解决: 通过stop()停止动画排队,必须写到动画前 $('.item').hover(function(){ $(this).stop().fadeTo('fast', 1, 'linear').siblings().stop().fadeTo('fast', 0.5, 'linear'); },function(){ $('.item').stop().fadeTo('fast', 1); })
1.5自定义动画
-
animate()介绍: 用于创建自定义动画的函数。 语法: // $(对象).animate(params,[speed],[easing],[fn]); 参数介绍: 1.params 一组包含作为动画属性和终值的样式属性和及其值的集合 [必须设置] 2.speed 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) 3.easing 默认jQuery提供"linear" 和 "swing". 4.fn:在动画完成时执行的函数 //代码演示1 $('input').click(function(){ $('div').animate({ 'left': '500px' }) }) //代码演示2 $('input').click(function(){ $('div').animate({ 'left': '500px' }, 'fast') }) //代码演示3 $('input').click(function(){ $('div').animate({ 'left': '500px' }, 'fast', 'linear') }) //代码演示4 $('input').click(function(){ $('div').animate({ 'left': '500px' }, 'fast', 'linear', function(){ alert('动画完成') }) }) //注意: 1. animate自定义动画,无法实现颜色动画效果,如果需要改变颜色,需要单独下载插件实现 2. 无法直接实现css中转化效果,如果需要实现,则可以通过添加类名得的方式实现 3. 单独的属性,可以使用驼峰命名法 ('marginLeft' 替代 'margin-left') https://www.runoob.com/jquery/eff-animate.html -
案例-手风琴案例
-
搭建HTML结构
<div id="box"> <ul> <li class="current"><img src="images/1.jpg" /></li> <li class="small"><img src="images/2.jpg" /></li> <li class="small"><img src="images/3.jpg" /></li> <li class="small"><img src="images/4.jpg" /></li> <li class="small"><img src="images/5.jpg" /></li> </ul> </div> -
设置CSS样式
<style> ul { list-style: none } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } #box .current { width: 900px; } #box .small { width: 90px; } </style> -
设置JS代码
<script src="./jQuery.min.js"></script> <script> $('li').hover(function(){ $(this).stop().animate({ 'width': '900px' }).siblings().stop().animate({ 'width': '90px' }) }) </script>- 注意: 在所有动画前加 stop()方法停止动画排队
-
2.JQ操作元素属性
1.1 回顾webAPI中操作标签属性
-
操作标签内置系统属性
getAttribute(属性名)setAttribute(属性名, 值)removeAttribute(属性名)
-
操作标签自定义属性
-
getAttribute(属性名)setAttribute(属性名, 值)removeAttribute(属性名) -
DOM.datasetDOM.dataset 返回的是一个对象 ☞ 获取自定义属性值: DOM.dataset.属性名 ☞ 设置自定义属性值: DOM.dataset.自定义属性名 = 值;
-
1.2 JQ操作元素属性
-
获取标签内置系统属性
语法: $(对象).prop('属性名'); //代码演示: var div = $('div'); var res = div.prop('class'); console.log(res); -
设置标签内置系统属性
语法: $(对象).prop('属性名', 值); //代码演示: var div = $('div'); var res = div.prop('class', 123); //备注如果设置多个可以通过对象的方式设置,例如: $('input').prop({ 'id': 'test', 'name': 'abc' }); -
获取标签自定义属性
语法: $(对象).attr(自定义属性名); //代码演示: var div = $('div'); var res = div.attr('data-myname'); -
设置标签自定义属性
语法: $(对象).attr(自定义属性名, 值); //代码演示: var div = $('div'); var res = div.attr('myAge', 18); -
备注
$(对象).attr() 既可以操作标签自定义属性也可以操作标签内置属性
####1.3案例-选择功能
-
搭建HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 980px; margin: 100px auto; } .title { width: 100%; height: 40px; line-height: 40px; background-color: #ccc; font-size: 14px; font-family: '微软雅黑'; } .title .bar { float: left; } .ckAll { margin-left: 20px; } .price { margin-left: 400px; margin-right: 100px; } .totle { margin-left: 100px; margin-right: 100px; } .content { width: 100%; margin: 10px 0; } .item { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 2px; box-sizing: border-box; position: relative; } .item .ck { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); } .bot { width: 100%; height: 40px; line-height: 40px; background-color: #ccc; font-size: 14px; font-family: '微软雅黑'; } .bot .ck { margin-left: 20px; } .active { background-color: #fff4e8; } </style> </head> <body> <div class="box"> <div class="title"> <!-- 全选 --> <div class="bar ckAll"> <input type="checkbox" class='ckbtn'> 全选 </div> <!-- 单价 --> <div class="bar price">单价</div> <!-- 数量 --> <div class="bar num">数量</div> <!-- 小计 --> <div class="bar totle">小计</div> <!-- 操作 --> <div class="bar done">操作</div> </div> <div class="content"> <div class="item"> <div class="ck"> <input type="checkbox"> </div> </div> <div class="item"> <div class="ck"> <input type="checkbox"> </div> </div> <div class="item"> <div class="ck"> <input type="checkbox"> </div> </div> </div> <div class="bot"> </div> </div> </body> </html> -
实现选择效果
<script src="./jQuery.min.js"></script> <script> //功能1: 点击全选按钮 (function(){ $('.ckbtn').click(function(){ //获取当前的状态 var flag = $(this).prop('checked'); $('.ck input').prop('checked', flag); //点击全选按钮设置样式 if($(this).prop('checked')) { $('.item').addClass('active'); }else { $('.item').removeClass('active'); } }) })(); //功能2: 点击每一个复选框 (function(){ $('.ck input').click(function(){ //给对应的item设置样式,如果当前是未被选中的,则需要添加样式,否则移除样式 if($(this).prop('checked')) { $(this).parents('.item').addClass('active'); }else { $(this).parents('.item').removeClass('active'); } //定义一个变量,用来记录是否都选中了 var flag = true; //实现全选功能: 如果每一个复选框都被选中,那么全选按钮就被选中, 否则不选中 var cks = $('.ck input'); for(var i = 0; i < cks.length; i++) { if(cks[i].checked == false) { flag = false; break; } } // 将flag的值赋值给全选按钮 $('.ckbtn').prop('checked', flag); }) })(); </script>
4. JQ操作标签中的值
1.1 获取/设置表单控件中的值
-
获取
语法: $(对象).val() -
设置
语法: $(对象).val(值);
1.2获取/设置普通标签中的值
-
获取
语法: $(对象).text(); // 特点与原生js中的innerText一样 $(对象).html(); // 特点与原生js中的innerHTML一样 -
设置
语法: $(对象).text(值); // 特点与原生js中的innerText一样 $(对象).html(值); // 特点与原生js中的innerHTML一样
1.3 案例-小计功能
-
设置HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box"> <div class="title"> <!-- 全选 --> <div class="bar ckAll"> <input type="checkbox" class='ckbtn'> 全选 </div> <!-- 单价 --> <div class="bar price">单价</div> <!-- 数量 --> <div class="bar num">数量</div> <!-- 小计 --> <div class="bar totle">小计</div> <!-- 操作 --> <div class="bar done">操作</div> </div> <div class="content"> <div class="item"> <!-- 复选框 --> <div class="ck"> <input type="checkbox"> </div> <!-- 图片展示 --> <div class="imgShow left"> <img src="imgs/hr.jpg" alt=""> </div> <!-- 文字内容 --> <div class="text left"> <p>荣耀20i 3200万AI自拍 超广角三摄 全</p> <p>荣耀20i 3200万AI自拍 超广角三摄 全</p> </div> <!-- 单价 --> <div class="s-price left"> ¥ <strong>1299.00</strong> </div> <!-- 数量 --> <div class="num1 left"> <a href="javascript:;" class="sub">-</a> <input type="text" value="1"> <a href="javascript:;" class="add">+</a> </div> <!-- 总结 --> <div class="t_price left"> ¥<strong>1299.00</strong> </div> <!-- 删除 --> <div class="del left"> <a href="javascript:;">移除购物车</a> </div> </div> <div class="item"> <!-- 复选框 --> <div class="ck"> <input type="checkbox"> </div> <!-- 图片展示 --> <div class="imgShow left"> <img src="imgs/hr.jpg" alt=""> </div> <!-- 文字内容 --> <div class="text left"> <p>荣耀20i 3200万AI自拍 超广角三摄 全</p> <p>荣耀20i 3200万AI自拍 超广角三摄 全</p> </div> <!-- 单价 --> <div class="s-price left"> ¥<strong>1299.00</strong> </div> <!-- 数量 --> <div class="num1 left"> <a href="javascript:;" class="sub">-</a> <input type="text" value="1"> <a href="javascript:;" class="add">+</a> </div> <!-- 总结 --> <div class="t_price left"> ¥<strong>1299.00</strong> </div> <!-- 删除 --> <div class="del left"> <a href="javascript:;">移除购物车</a> </div> </div> <div class="item"> <!-- 复选框 --> <div class="ck"> <input type="checkbox"> </div> <!-- 图片展示 --> <div class="imgShow left"> <img src="imgs/hr.jpg" alt=""> </div> <!-- 文字内容 --> <div class="text left"> <p>荣耀20i 3200万AI自拍 超广角三摄 全</p> <p>荣耀20i 3200万AI自拍 超广角三摄 全</p> </div> <!-- 单价 --> <div class="s-price left"> ¥<strong>1299.00</strong> </div> <!-- 数量 --> <div class="num1 left"> <a href="javascript:;" class="sub">-</a> <input type="text" value="1"> <a href="javascript:;" class="add">+</a> </div> <!-- 总结 --> <div class="t_price left"> ¥<strong>1299.00</strong> </div> <!-- 删除 --> <div class="del left"> <a href="javascript:;">移除购物车</a> </div> </div> </div> <div class="bot"> </div> </div> </body> </html>
-
设置CSS样式
<style type="text/css"> * { margin: 0; padding: 0; font-family: '微软雅黑'; } .box { width: 980px; margin: 100px auto; } .title { width: 100%; height: 40px; line-height: 40px; background-color: #ccc; font-size: 14px; font-family: '微软雅黑'; } .title .bar { float: left; } .ckAll { margin-left: 20px; } .price { margin-left: 400px; margin-right: 100px; } .totle { margin-left: 100px; margin-right: 100px; } .content { width: 100%; margin: 10px 0; } .item { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 2px; box-sizing: border-box; position: relative; } .item .ck { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); } .bot { width: 100%; height: 40px; line-height: 40px; background-color: #ccc; font-size: 14px; font-family: '微软雅黑'; } .bot .ck { margin-left: 20px; } .active { background-color: #fff4e8; } .left { float: left; } .imgShow { border: 1px solid #ccc; margin-left: 80px; margin-top: 8px; } .text { margin-top: 8px; line-height: 40px; margin-left: 10px; font-size: 14px; } .s-price { line-height: 100px; margin-left: 42px; font-size: 14px; color: orange; } .num1 { width: 100px; height: 30px; border: 1px solid #ccc; margin-top: 30px; margin-left: 48px; } .sub { width: 20px; height: 30px; display: block; float: left; line-height: 30px; text-align: center; text-decoration: none; border-right: 1px solid #ccc; box-sizing: border-box; } .num1 input { border: 0 none; outline-style: none; width: 60px; height: 30px; float: left; text-align: center; } .add { width: 20px; height: 30px; display: block; float: left; line-height: 30px; text-align: center; text-decoration: none; border-left: 1px solid #ccc; box-sizing: border-box; } .t_price { line-height: 100px; font-size: 14px; margin-left: 40px; color: red; } .del { line-height: 100px; font-size: 14px; margin-left: 60px; } .del a { text-decoration: none; color: #888; } .del a:hover { color: orange; } </style> -
实现具体功能
-
点击
加号/减号修改输入框中的值//获取输入框中的值: 当前按钮的兄弟元素 var num_v = $(this).siblings('input').val(); // 将当前值增加1 num_v++; //将当前值赋值给输入框 $(this).siblings('input').val(num_v); -
点击
加号/减号计算小计总价补充: 价格保留2位小数 toFixed(2) 例如: var num = 123; num = num.toFixed(2);//计算总价: 当前商品数量 * 商品单价 var money = num_v * $(this).parent().siblings('.sprice').find('strong').text(); //将当前总价设置给总价标签 $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2)); -
用户修改输入框中的值计算小计总结
$('.num1 input').change(function(){ //获取当前输入框中的值 var num_v = $(this).val(); //计算总价: 当前商品数量 * 商品单价 var money = num_v * $(this).parent().siblings('.sprice').find('strong').text(); //将当前总价设置给总价标签 $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2)); })
-
####1.4案例-商品总数-总价功能
-
设置HTML结构
-
设置CSS样式
-
实现功能
-
JQ遍历对象,获取对象中的值
<ul> <li>12</li> <li>12</li> <li>12</li> </ul> 如何获取li标签中的值? 需要遍历li //注意:隐式迭代只能在事件中使用,默认遍历不能依靠隐式迭代 语法: $对象.each(function(index, item){ }) 参数介绍: 1. index 伪数组中的索引值 2. item 伪数组中的每一个DOM对象 注意: 1. each遍历后item是一个dom对象不是JQ对象 -
JQ遍历方式二
//语法: $.each(数组对象, function(index, item){ }) //参数介绍: index 数组中索引值 item 数组中的每一个值 -
实现总数求和功能
var num_sum = 0; //数量求和: 获取页面中的每一个input标签中的值累加 $('.num1 input').each(function(index,item){ num_sum += parseInt($(item).val()); }) //将总和设置给对应的标签 $('.product_num strong').text(num_sum); -
实现总计求和功能
var money_sum = 0; $('.t_price strong').each(function(i, item){ money_sum += Number($(item).text()); }) //将总价设置给对应的标签 $('.product_money strong').text(money_sum.toFixed(2));
-
5. JQ删除元素
1.1 删除元素/元素中内容
-
remove()语法: $对象.remove(); // 特点: 从页面中将当前标签删除 -
empty()语法: $对象.empty(); // 特点: 将标签中的所有内容清空,当前标签依然保存 -
html()语法: $对象.html(''); //特点: 将标签中的所有内容清空,当标签标签依然保留
6.JQ创建元素
1.1 创建元素
-
$对象.html(标签)语法: $对象.html('html标签名'); 例如: $('div').html('<h1>我是标题标签</h1>'); 特点: 与原生js中 innerHTML的效果一样 -
$(html标签)语法: $('html标签'); 返回: JQ标签对象 例如: var span = $('<span></span>');
1.2 添加元素
-
父元素末尾添加元素
语法: $父元素.append(元素); 例如: var p = $('<p>我是创建的p</p>'); $('div').append(p); -
父元素开始位置添加元素
语法; $父元素.prepend(元素); 例如: var p = $('<p>我是创建的p</p>'); $('div').prepend(p); -
设置为当前元素前一个兄弟元素
语法: $对象.before(元素); 例如: var p = $('<p>我是创建的p</p>'); $('div').before(p) -
设置为当前元素后一个兄弟元素
语法: $对象.after(元素) 例如: var p = $('<p>我是创建的p</p>'); $('div').after(p)
1.3 综合案例-弹幕效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.box {
width: 980px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.bottom_bar {
width: 100%;
height: 40px;
border-top: 1px solid #000;
position: absolute;
bottom: 0;
line-height: 40px;
font-family: '微软雅黑';
font-size: 14px;
color: #222;
padding-left: 50px;
box-sizing: border-box;
}
.bottom_bar input {
border: 0 none;
border: 1px solid orange;
border-radius: 5px;
width: 350px;
height: 30px;
outline-style: none;
padding: 0;
vertical-align: middle;
padding-left: 20px;
box-sizing: border-box;
}
p {
position: absolute;
right: 0;
transform: translateX(100%);
word-break: keep-all;
}
</style>
</head>
<body>
<div class="box">
<div class="screen"></div>
<div class="bottom_bar">
<input type="text" placeholder="开始你的表演">
<a href="javascript:;">发送</a>
</div>
</div>
<script src="./jQuery.min.js"></script>
<script>
//随机函数
function getRandom(min, max) {
return Math.floor(Math.random()*(max-min+1) + min);
}
//点击送按钮
$('a').click(function(){
//获取用户输入的内容
var user_input = $('input').val();
//动态创建元素
var p = $('<p></p>');
p.text(user_input);
p.css({
'top' : getRandom(10,300),
'color': getRandom(100, 255),
'font-size': getRandom(14, 30)
})
p.stop().animate({
'right': '150%'
},30000, 'linear', function(){
$(this).remove();
})
//将p标签添加到父元素中
p.appendTo('.screen');
})
$(document).keydown(function(e){
if(e.keyCode == 13) {
//获取用户输入的内容
var user_input = $('input').val();
//动态创建元素
var p = $('<p></p>');
p.text(user_input);
p.css({
'top' : getRandom(10,300),
'color':'rgb('+getRandom(100, 255)+','+ getRandom(50, 255)+','+ getRandom(120, 255)+')',
'font-size': getRandom(14, 30)
})
p.stop().animate({
'right': '150%'
},30000, 'linear', function(){
$(this).remove();
})
//将p标签添加到父元素中
p.appendTo('.screen');
}
})
</script>
</body>
</html>
购物车案例完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: '微软雅黑';
}
.box {
width: 980px;
margin: 100px auto;
}
.title {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #ccc;
font-size: 14px;
font-family: '微软雅黑';
}
.title .bar {
float: left;
}
.ckAll {
margin-left: 20px;
}
.price {
margin-left: 400px;
margin-right: 100px;
}
.totle {
margin-left: 100px;
margin-right: 100px;
}
.content {
width: 100%;
margin: 10px 0;
}
.item {
width: 100%;
height: 100px;
border: 1px solid #ccc;
margin-bottom: 2px;
box-sizing: border-box;
position: relative;
}
.item .ck {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.bot {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #ccc;
font-size: 14px;
font-family: '微软雅黑';
}
.bot .ck {
margin-left: 20px;
}
.active {
background-color: #fff4e8;
}
.left {
float: left;
}
.imgShow {
border: 1px solid #ccc;
margin-left: 80px;
margin-top: 8px;
}
.text {
margin-top: 8px;
line-height: 40px;
margin-left: 10px;
font-size: 14px;
}
.s-price {
line-height: 100px;
margin-left: 42px;
font-size: 14px;
color: orange;
}
.num1 {
width: 100px;
height: 30px;
border: 1px solid #ccc;
margin-top: 30px;
margin-left: 48px;
}
.sub {
width: 20px;
height: 30px;
display: block;
float: left;
line-height: 30px;
text-align: center;
text-decoration: none;
border-right: 1px solid #ccc;
box-sizing: border-box;
}
.num1 input {
border: 0 none;
outline-style: none;
width: 60px;
height: 30px;
float: left;
text-align: center;
}
.add {
width: 20px;
height: 30px;
display: block;
float: left;
line-height: 30px;
text-align: center;
text-decoration: none;
border-left: 1px solid #ccc;
box-sizing: border-box;
}
.t_price {
line-height: 100px;
font-size: 14px;
margin-left: 40px;
color: red;
}
.del {
line-height: 100px;
font-size: 14px;
margin-left: 60px;
}
.del a {
text-decoration: none;
color: #888;
}
.del a:hover {
color: orange;
}
.del_p {
margin-left: 100px;
color: #222;
font-size: 14px;
font-family: '微软雅黑';
text-decoration: none;
}
.clear_p {
margin-left: 50px;
color: #222;
font-size: 14px;
font-family: '微软雅黑';
text-decoration: none;
}
.product_num {
margin-left: 196px;
}
.product_num strong {
color: red;
}
.product_money {
margin-left: 36px;
}
.product_money strong {
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<!-- 全选 -->
<div class="bar ckAll">
<input type="checkbox" class='ckbtn'> 全选
</div>
<!-- 单价 -->
<div class="bar price">单价</div>
<!-- 数量 -->
<div class="bar num">数量</div>
<!-- 小计 -->
<div class="bar totle">小计</div>
<!-- 操作 -->
<div class="bar done">操作</div>
</div>
<div class="content">
<div class="item">
<!-- 复选框 -->
<div class="ck">
<input type="checkbox">
</div>
<!-- 图片展示 -->
<div class="imgShow left">
<img src="imgs/hr.jpg" alt="">
</div>
<!-- 文字内容 -->
<div class="text left">
<p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
<p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
</div>
<!-- 单价 -->
<div class="s-price left">
¥ <strong>1299.00</strong>
</div>
<!-- 数量 -->
<div class="num1 left">
<a href="javascript:;" class="sub">-</a>
<input type="text" value="1">
<a href="javascript:;" class="add">+</a>
</div>
<!-- 总结 -->
<div class="t_price left">
¥<strong>1299.00</strong>
</div>
<!-- 删除 -->
<div class="del left">
<a href="javascript:;">移除购物车</a>
</div>
</div>
<div class="item">
<!-- 复选框 -->
<div class="ck">
<input type="checkbox">
</div>
<!-- 图片展示 -->
<div class="imgShow left">
<img src="imgs/hr.jpg" alt="">
</div>
<!-- 文字内容 -->
<div class="text left">
<p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
<p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
</div>
<!-- 单价 -->
<div class="s-price left">
¥<strong>1299.00</strong>
</div>
<!-- 数量 -->
<div class="num1 left">
<a href="javascript:;" class="sub">-</a>
<input type="text" value="1">
<a href="javascript:;" class="add">+</a>
</div>
<!-- 总结 -->
<div class="t_price left">
¥<strong>1299.00</strong>
</div>
<!-- 删除 -->
<div class="del left">
<a href="javascript:;">移除购物车</a>
</div>
</div>
<div class="item">
<!-- 复选框 -->
<div class="ck">
<input type="checkbox">
</div>
<!-- 图片展示 -->
<div class="imgShow left">
<img src="imgs/hr.jpg" alt="">
</div>
<!-- 文字内容 -->
<div class="text left">
<p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
<p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
</div>
<!-- 单价 -->
<div class="s-price left">
¥<strong>1299.00</strong>
</div>
<!-- 数量 -->
<div class="num1 left">
<a href="javascript:;" class="sub">-</a>
<input type="text" value="1">
<a href="javascript:;" class="add">+</a>
</div>
<!-- 总结 -->
<div class="t_price left">
¥<strong>1299.00</strong>
</div>
<!-- 删除 -->
<div class="del left">
<a href="javascript:;">移除购物车</a>
</div>
</div>
</div>
<div class="bot">
<!-- 删除选中商品 -->
<a href="javascript:;" class="del_p left">删除选中商品</a>
<!-- 清空购物车 -->
<a href="javascript:;" class="clear_p left">清空购物车</a>
<!-- 商品总数 -->
<div class="product_num left">
已购买
<strong>0</strong>
件商品
</div>
<!-- 商品总价 -->
<div class="product_money left">
总价:
<strong>00.00</strong>
</div>
</div>
</div>
<script src="./jQuery.min.js"></script>
<script>
//全选功能
(function () {
$('.ckbtn').click(function () {
$('.ck input').prop('checked', $(this).prop('checked'));
if ($(this).prop('checked')) {
$('.item').addClass('active');
} else {
$('.item').removeClass('active');
}
})
})();
//复选框点击功能
(function () {
$('.ck input').click(function () {
var flag = true;
if ($(this).prop('checked')) {
$(this).parents('.item').addClass('active');
} else {
$(this).parents('.item').removeClass('active');
}
//循环遍历
var cks = $('.ck input');
for (var i = 0; i < cks.length; i++) {
if (cks[i].checked != true) {
flag = false;
break;
}
}
$('.ckbtn').prop('checked', flag);
});
})();
//数量增加减少功能
(function () {
//计算总结
var money = 0;
// 增加
$('.add').click(function () {
//获取输入框中的值
var num = Number($(this).siblings('input').val());
num++;
//将累加后的值赋值给输入框(赋值给当前按钮对应的输入框)
$(this).siblings('input').val(num);
//计算价格
money = num * $(this).parent().siblings('.s-price').find('strong').text();
//将价格赋值给总价标签
$(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));
//计算总结
getMoney();
});
//减少
$('.sub').click(function () {
//获取输入框中的值
var num = Number($(this).siblings('input').val());
if (num <= 0) {
return;
}
num--;
$(this).siblings('input').val(num);
//计算价格
money = num * $(this).parent().siblings('.s-price').find('strong').text();
//将价格赋值给总价标签
$(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));
//计算总价
getMoney();
})
})();
//计算总价和数量
function getMoney() {
var money = 0;
var lis = $('.t_price strong');
$.each(lis, function (index, item) {
money += Number($(item).text());
})
//将总结设置给总结标签
$('.product_money strong').text(money.toFixed(2));
var cont = 0;
var items = $('.num1 input');
items.each(function (inex, item) {
cont += Number($(item).val());
});
//将总数设置给标签
$('.product_num strong').text(cont);
}
getMoney();
//清空购物车功能
$('.clear_p').click(function () {
if (confirm('确定清空么?')) {
$('.content').empty();
getMoney();
}
});
//移除购物车功能
$('.del a').click(function () {
if (confirm('确定删除么?')) {
$(this).parents('.item').remove();
getMoney();
}
})
//删除选中的商品
$('.del_p').click(function () {
//1. 先获取选中的商品
var lis = $('.ck input:checked');
//2. 遍历当前选中元素的父元素item
$.each(lis, function (index, item) {
$(item).parents('.item').remove();
})
getMoney();
})
</script>
</body>
</html>
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！