jquer项目总结

最新推荐文章于 2022-06-27 10:28:17 发布

彭雅瑄

最新推荐文章于 2022-06-27 10:28:17 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/weixin_48353150/article/details/108962117

版权

本文详细介绍了在服装商城项目中使用jQuery实现的功能，包括头部换肤、商品评分、产品简介切换、图片预览、衣服换色、尺寸选择、购物车操作以及轮播图展示等，展示了jQuery在前端交互中的强大能力。

摘要由CSDN通过智能技术生成

服装商城项目

1: 头部换肤

$(function(){

               $("#skin li").click(function(){
                   $(this).addClass("selected").siblings().removeClass("selected");
   var cssName = $(this).attr("id");
   //alert(cssName)
   $("#cssfile").attr("href","styles/skin/"+cssName+".css")
               })
           })

给商品评分

$(function() {
                   $(".rating li a").click(function() {
                       var title = $(this).attr("title");
                       alert("你给出的评分是" + title);
                       var cl = $(this).parent().attr("class");
                       $(this).parent().parent().removeClass().addClass("rating " + cl + "star")
                   })
               })

产品简介切换

$(function(){
               var $div_li =$("div.tab_menu ul li");
               $div_li.click(function(){
                       $(this).addClass("selected") //当前<li>元素高亮
                           .siblings().removeClass("selected"); //去掉其他同辈<li>元素的高亮
           var index = $div_li.index(this); // 获取当前点击的<li>元素在全部li元素中的索引。
                       $("div.tab_box > div")    //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
                               .eq(index).show() //显示 <li>元素对应的<div>元素
                               .siblings().hide(); //隐藏其他几个同辈的<div>元素
                   }).hover(function(){
                       $(this).addClass("hover");
                   },function(){
                       $(this).removeClass("hover");
                   })


           })
   $(function(){
                       $(".imgList img").click(function(){
                           var img=$(this).attr("src");
                           var arr=img.split(".jpg");
                           var newsrc=arr.join("_small.jpg");
                           var src=arr.join("_big.jpg")
                           $(".jqzoom img").attr("src",newsrc).attr("jqimg",src);
                           $("#thickImg").attr("href",src)
                       })
                   })

衣服换色

$(function() {
                   $(".color_change>ul>li>img").click(function() {
                       var a = $(this).attr("src");
                       var color = $(this).attr("alt");
                       /*alert(color);*/
                       var src = a.split("img/");
                       /*alert(src[1]);*/
                       var b = src[1].split(".jpg");
                       /*alert(b[0]);*/

                       //更换大图
                       $(".jqzoom>img").attr("src", "images/pro_img/