《JQuery实战进阶：“web技能”》课件-第九章 用jQuery打造个性

JQuery应用开发——用jQuery打造个性网站目录9.1项目效果展示9.2首页-构造json数据9.3首页-json数据展示到页面9.4首页-搜索功能实现9.5首页-产品分类功能实现9.6首页-轮播图功能实现9.7首页-时钟效果9.8首页跳转到详情页面9.9动态生成详情页9.10详情页-产品图片放大镜功能实现9.11详情页—大小图切换功能实现9.12详情页-星际评价功能实现9.13详情页-颜色切换功能实现9.14详情页-改变产品数量功能实现9.15详情页-选项卡功能实现9.16详情页-添加购物车弹框功能实现JQuery应用开发——项目效果展示01环境搭建首页功能展示目录CONTENT02详情页功能展示0301

环境搭建01安装phpstudy，并启动服务安装软件02将项目文件移至www根目录中操作根目录03打开浏览器，地址栏输入本地地址地址栏输入02

首页功能展示1、首页功能展示

构造json数据01搜索功能实现03json数据展示到页面02产品分类功能实现04轮播图功能实现05首页跳转到详情页面0603

详情页功能展示1、详情页功能展示

产品图片放大镜功能实现01星级评价功能实现03大小图切换功能实现02改变产品数量功能实现05选项卡功能实现06添加购物车弹框功能实现07颜色切换功能实现04JQuery应用开发——首页—构造json数据1、构造json数据

id、type、name01salesVolume、productIntroduce03description、src02size04introduce05bitmapProductSize0601构造json数据JQuery应用开发——首页-json数据展示到页面上01案例效果代码实现目录CONTENT02总结0301

案例效果主图商品名称销售数量案例效果：实践：让我们动手实践一下吧02代码实现1、buildProductList函数functionbuildProductList(data){

$(‘.group’).empty();//清空上一次的筛选结果

data.forEach(function(element){

varitem=`商品字符串`//变量的值通过es6语法${element.属性名}获取，

es6模板字符串使用使${}来包裹一个变量或者一个表达式

$('.group').append(item)//在被选元素的结尾（仍然在内部）插入指定内容

})}03总结

1、buildProductList函数03知识讲解2、getList函数—使用ajax获取数据functiongetList(){

$.ajax({

url:"data/list.json",//发送请求的地址

async:true,//异步请求

contentType:'application/json',

//向后台发送数据的格式必须为json字符串

dataType:'json',

success:function(result){

if(result.code==0){

letdata=[]

data=result.data;

buildProductList(data)//获取到的data数据显示到首页上

localStorage.setItem('productList',JSON.stringify(data))

}

}

});}JQuery应用开发——首页-搜索功能实现01案例效果知识讲解目录CONTENT02代码实践03总结0401

案例效果案例效果：02知识讲解1、filter方法

作用：用于对数组进行过滤。创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。语法：Array.filter(function(currentValue,indedx,arr),thisValue)

说明：函数function为必须，数组中的每个元素都会执行这个函数。且如果返回值为true，则该元素被保留；函数的第一个参数currentValue也为必须，代表当前元素的值。02

知识讲解1、filter方法示例letnums=[1,2,3,4,5,6,7,8,9,10];Letres=nums.filter((num)=>{ returnnum>5})console.log(res)//最终输出结果：[6,7,8,9,10]实践：让我们动手实践一下吧03代码实现1、核心代码$('#button').click(function(){varkeyword=$('#keyword').val()getList(keyword)})代码段104

总结1、核心代码functiongetList(keyword){…(省略ajax获取数据的代码)if(keyword){data=result.data.filter(function(x){return.indexOf(keyword)!=-1})}…(省略后面代码)}代码段104

总结JQuery应用开发——首页-产品分类功能实现01案例效果知识讲解目录CONTENT02代码实现03总结0401

案例效果案例效果：02

知识讲解jQuery提供了专门的操作类的方法，包括添加类、移除类、等常用的方法。1、操作元素类方法描述addClass()将指定的类添加到匹配元素中removeClass()从所有匹配的元素中删除全部或者指定的类实践：让我们动手实践一下吧03代码实现1、核心代码$('.product-type').find('li').each(function(){$(this).click(function(){$('.product-type').find('li').removeClass('active')type=$(this).index()$(this).addClass('active')getList()})})代码段104总结1、核心代码functiongetList(keyword){…(省略ajax获取数据的代码)if(type!=-1){data=result.data.filter(x=>x.type==type)

}…(省略后面代码)}代码段204总结JQuery应用开发——首页-轮播图功能实现01案例效果知识讲解目录CONTENT02代码实现03总结0401

案例效果案例效果：步骤1、构造轮播图最基本的HTML结构<divclass="banner"><ul><li><imgsrc="images/banner/banner1.jpg"></li><li><imgsrc="images/banner/banner2.jpg"></li><li><imgsrc="images/banner/banner3.jpg"></li><li><imgsrc="images/banner/banner4.jpg"></li></ul></div>代码段102

知识讲解02

知识讲解步骤2、在页面中引入jquery和jquery.terseBanner.min.js文件<scriptsrc="cdn/jquery/jquery-3.6.0.min.js"></script><scripttype="text/javascript"src="cdn/banner/jquery.tersBanner.min.js"></script>代码段202

知识讲解步骤3、页面DOM元素加载完毕之后，通过terseBanner()方法初始化轮播图插件$('.banner').terseBanner();代码段3实践：让我们动手实践一下吧03代码实现构造基本的HTML结构01初始化插件03在页面中引入jquery文件和插件文件0204总结JQuery应用开发——首页-时钟效果实现01案例效果知识讲解目录CONTENT02代码实现03总结0401案例效果案例效果：02

知识讲解1.Date对象Date对象用于处理日期和时间。成员作用getFullYear()获取表示年份的4位数字，如2020getMonth()获取月份，范围0~11（0表示一月，1表示二月，依次类推）getDate()获取月份中的某一天，范围1~31getDay()获取星期，范围0~6（0表示星期日，1表示星期一，依次类推）getHours()获取小时数，返回0~23getMinutes()获取分钟数，范围0~59getSeconds()获取秒数，范围0~59实践：让我们动手实践一下吧03代码实现步骤1、定义auto函数，获取当前时间functionauto(){vardate=newDate();varyear=checkTime(date.getFullYear());//年,从Date对象以四位数字返回年份

varmonth=checkTime(date.getMonth()+1);//月,从Date对象返回月份（0-11）

varday=checkTime(date.getDate());//日,从Date对象返回一个月中的某一天(1~31)varhours=checkTime(date.getHours());//小时,返回Date对象的小时(0~23)varminutes=checkTime(date.getMinutes());//分钟,返回Date对象的分钟(0~59)varseconds=checkTime(date.getSeconds());//秒,返回Date对象的秒数(0~59)

varcurrentDate=year+"-"+month+"-"+day+""+hours+":"+minutes+":"+seconds;$('#time').text(currentDate)}代码段104总结步骤2、使用setInterval实现时钟效果setInterval(auto,1000);代码段204总结JQuery应用开发——首页跳转到详情页功能实现01案例效果知识讲解目录CONTENT02代码实现03总结04案例效果：01案例效果02

知识讲解1.获取URL参数获取URL的指定部分：location.属性名。设置URL的指定部分：location.属性名=值。

返回完整的路径：location.herf02

知识讲解2.获取元素的属性值获取元素属性值：即把需要获取的属性名传递到attr()方法中。语法：$(selector).attr('property')。语法分析：property可以是元素的样式属性，如style等；也可以是其他属性，如value等；利用attr()方法可以操作元素的任意属性；实践：让我们动手实践一下吧03代码实现步骤1、地址栏地址从首页跳转到详情页，获取首页的参数/idsetTimeout(function(){$('.grouppro').each(function(){$(this).click(function(){varid=$(this).attr('data-id')window.location.href=`detail.html?id=${id}`})})},1*1000)代码段104总结步骤2、buildProductDetail函数functionbuildProductDetail(data){

$('#detail-container').empty();//清空上一次的筛选结果

varitem=`商品详情字符串`//变量的值通过es6语法${element.属性名}获取，

es6模板字符串使用使${}来包裹一个变量或者一个表达式

$('#detail-container').append(item)//在被选元素的结尾（仍然在内部）插入指定内容

}04总结JQuery应用开发详情页——动态生成详情页01案例效果知识讲解目录CONTENT02代码实现03总结04案例效果：案例分析：首页商品列表部分点击预购买的商品在详情页会显示被点击商品的详情信息01案例效果02

知识讲解1.match()方法String对象中的match()方法除了可在字符串内检索指定的值外，还可以在目标字符串中根据正则匹配出所有符合要求的内容，匹配成功后将其保存到数组中，匹配失败则返回false。02

知识讲解1.match()方法varstr=“thisis20220627";varreg=/\d+/;str.match(reg)//20220627示例实践：让我们动手实践一下吧03代码实现步骤1、使用正则表达式从地址栏提取相应参数functiongetUrlParam(name){varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");varr=window.location.search.substr(1).match(reg);if(r!=null)returnunescape(r[2]);returnnull;}代码段104总结步骤2、详情页加载完成后，根据首页点击项对应的数据信息来动态生成详情页$(function(){varproductList=JSON.parse(localStorage.getItem('productList'))varid=getUrlParam('id')//过滤数据

vardetailData=productList.filter(x=>x.id==id)[0]buildProductDetail(detailData)bindDetalEvent(detailData)})代码段204总结JQuery应用开发——详情页-商品图片放大镜功能实现01案例效果知识讲解目录CONTENT02代码实现03总结04案例效果：放大镜效果01案例效果步骤1、构造放大镜效果最基本的HTML结构<divclass="tb-boothtb-pictb-s310"><ahref="images/01.jpg"><imgsrc="${data.src}"alt=""

rel="${data.src}"class="jqzoom"/></a></div>代码段102

知识讲解步骤2、在页面中引入jquery和jquery.imagezoom.min.js文件<scriptsrc="cdn/jquery/jquery-3.6.0.min.js"></script><scriptsrc="cdn/imagezoom/jquery.imagezoom.min.js"></script>代码段202

知识讲解步骤3、页面DOM元素加载完毕之后，通过imagezoom()方法初始化图片放大镜插件代码段3$(".jqzoom").imagezoom();02

知识讲解实践：让我们动手实践一下吧03代码实现构造基本的HTML结构01初始化放大镜03在页面中引入jquery文件和放大镜文件0204总结JQuery应用开发——详情页-大小图切换功能实现01案例效果目录CONTENT代码实现02总结03案例效果：案例分析：鼠标点击小图，被点击项添加红色边框，其余项目是灰色边框鼠标点击小图，并显示相应的大图。01案例效果实践：让我们动手实践一下吧02代码实现点击小图，显示相应的大图$("#thumblistli").click(function(){$(this).addClass("tb-selected").siblings().removeClass("tb-selected");constindex=$(this).index();constsrc=data.bitmapProductSize[colorIndex].bitmapPath[index]$(".jqzoom").attr('src',src);});代码段103总结JQuery应用开发——详情页-星级评价功能实现01案例效果知识讲解目录CONTENT02代码实现03总结04案例效果：案例分析：当移入某个星星，前面的星星都会被点亮；当鼠标移出，星星将会变暗；单击某个星星后即完成评价；鼠标移出后被点击的星星前面的星星都会被点亮；后面的星星变暗。01案例效果02

知识讲解获取元素的方法方法描述nextAll()可获取指定元素后的所有兄弟元素；prevAll()可获取指定元素前的所有兄弟元素；siblings()则可获取指定元素的所有兄弟元素实践：让我们动手实践一下吧03代码实现实施步骤：鼠标移入星星

(mouseover)为当前的li元素和它前面的li元素设置文本内容是实心星星，实现点亮星星的效果。同时设置当前的li元素后的所有li元素文本内容是空心星星，实现星星变暗效果鼠标单击星星

(click)为被点击的当前li元素做一个标记，即设置属性class=current。并显示最终的评分鼠标移出星星

(mouseout)设置所有的li是空心星星，实现星星变暗的效果。找到包含class=current属性的li元素，将该元素和它前面的li元素都变成点亮效果03代码实现实施步骤：鼠标移入星星

(mouseover)为当前的li元素和它前面的li元素设置文本内容是实心星星，实现点亮星星的效果。同时设置当前的li元素后的所有li元素文本内容是空心星星，实现星星变暗效果鼠标单击星星

(click)为被点击的当前li元素做一个标记，即设置属性class=current。并显示最终的评分鼠标移出星星

(mouseout)设置所有的li是空心星星，实现星星变暗的效果。找到包含class=current属性的li元素，将该元素和它前面的li元素都变成点亮效果03代码实现03代码实现实施步骤：鼠标移入星星

(mouseover)为当前的li元素和它前面的li元素设置文本内容是实心星星，实现点亮星星的效果。同时设置当前的li元素后的所有li元素文本内容是空心星星，实现星星变暗效果鼠标单击星星

(click)为被点击的当前li元素做一个标记，即设置属性class=current。并显示最终的评分鼠标移出星星

(mouseout)设置所有的li是空心星星，实现星星变暗的效果。找到包含class=current属性的li元素，将该元素和它前面的li元素都变成点亮效果鼠标移入星星varwjx_k="☆";varwjx_s="★";$(".comment>li").on("mouseenter",function(){$(this).text(wjx_s).prevAll().text(wjx_s);$(this).nextAll().text(wjx_k);});代码段104总结鼠标单击星星$(".comment>li").on("click",function(){$(this).addClass("current").siblings().removeClass("current");$(".fenshu").text($(this).index()+1);});代码段204总结鼠标离开星星$(".comment").on("mouseleave",function(){

//鼠标离开，所有的li都变成空心

$(this).children().text(wjx_k);

//设置类名为current和current前面的变成实心

$("li.current").text(wjx_s).prevAll().text(wjx_s);});代码段304总结JQuery应用开发—详情页-颜色切换功能实现01案例效果目录CONTENT代码实现02总结0301

案例效果案例效果：案例分析：1、点击颜色部分商品列表，实现颜色切换效果，被

选中项为红色边框，其余为灰色边框；2、颜色名称显示被点击项的名称；3、在左侧大小图部分中，小图显示的商品列表跟随

颜色发生实时的切换。实践：让我们动手实践一下吧02代码实现实现颜色切换效果，大小图部分发生实时切换$("#colorListlia").click(function(){$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");$(".jqzoom").attr('src',$(this).find("img").attr("mid"));constindex=$(this).find("img").attr("index")colorIndex=index$('#price').text(data.bitmapProductSize[index].Price)$('#colorName').text(data.bitmapProductSize[index].name)$('#thumblist_item1').attr('src',data.bitmapProductSize[index].bitmapPath[0])$('#thumblist_item2').attr('src',data.bitmapProductSize[index].bitmapPath[1])$('#thumblist_item3').attr('src',data.bitmapProductSize[index].bitmapPath[2])$('#thumblist_item4').attr('src',data.bitmapProductSize[index].bitmapPath[3])$("#thumblist").children("li").removeClass("tb-selected");$("#thumblistli").eq(0).addClass("tb-selected");

});代码段103总结JQuery应用开发—详情页-改变产品数量功能实现01案例效果知识讲解目录CONTENT02代码实现03总结04案例效果：案例分析：点击加号按钮实现购买数量递增功能；点击减号按钮实现购买数量递减功能，产品数量递减为1，减号按钮变为不可用状态；01案例效果02

知识讲解设置表单元素的值$(selector).val();$(selector).val(value);获取表单元素的值val()方法：可以获取和设置表单元素的值；相当于JavaScript中input控件对象value属性的作用；value表示表单元素的value属性的值，selector一般是指表单元素。1、获取和设置表单的值实践：让我们动手实践一下吧03代码实现点击减号按钮，实现购买数量递减功能$('#subVal').click(function(){if(parseInt(n.val())<1){n.val(1)

//小于1时默认恢复为1}elseif(parseInt(n.val())>1){n.val(parseInt(n.val())-1)

//大于1时点击减1}else{

$('#subVal').attr('disabled','disabled')}

})代码段104总结点击加号按钮，实现购买数量递增功能

$('#addVal').click(function(){n.val(parseInt(n.val())+1)$('#subVal').removeAttr('disabled')//大于1时解除减按钮禁止点击的状态})代码段204总结JQuery应用开发—详情页-选项卡功能实