三十四、jquery练习 手机点餐demo

一、所用知识点：

1.jquery事件绑定方法：

(1) bind():类似于js中事件的监听方法；

   语法:  $(selector).bind(event,data,function,map)

selector:被选元素；

event:添加到元素的事件（一个或多个）；

data:可选，传递到函数的额外数据；

function:执行函数；

map:事件映射 ({event:function, event:function, ...})

(2) on(): 向元素添加事件处理程序

语法：$(selector).on(event,childSelector,data,function) 

   childSelector：可选，规定只能添加到指定的子元素上的事件处理程序；

(3) 元素.方法(function(){})：最常用的事件绑定方法

eg: $(“div”).click(执行函数)

 

2.jquery事件移除方法：

(1)unbind() :从被选元素上移除添加的事件处理程序

语法：$(selector).unbind(event,function,eventObj)

(2)off():移除通过 on() 方法添加的事件处理程序

语法：$(selector).off(event,selector,function(eventObj),map)

注意：off()其实也可以移除bind()绑定的事件

 

3.jquery遍历方法：列举几个常用的

add() 把元素添加到匹配元素的集合中;

children() 返回被选元素的所有直接子元素

find() 返回被选元素的后代元素 //注意find()是所有后代 children()只指儿子

each() 为每个匹配元素执行函数 //相当于js中的遍历循环

eq() 返回带有被选元素的指定索引号的元素

next() 返回被选元素的后一个同级元素

prev() 返回被选元素的前一个同级元素

parent() 返回被选元素的直接父元素

parents() 返回被选元素的所有祖先元素 //注意区别

siblings() 返回被选元素的所有同级元素

slice() 把匹配元素集合缩减为指定范围的子集

blur() 添加/触发失去焦点事件

4.jquery HTML/CSS常用方法

addClass() 向被选元素添加一个或多个类名;//与js不同的是无需写已有的类名称

removeClass() 从被选元素移除一个或多个类 

after() 在被选元素后插入内容

before() 在被选元素前插入内容 

append() 在被选元素的结尾插入内容

appendTo() 在被选元素的结尾插入 HTML 元素 

attr() 设置或返回被选元素的属性/值

eg:console.log($("#bn").attr("value"));//获取 只能单个获取
$("#bn").attr("value","点我");//设置单个属性
$("#bn").attr({   //设置多个属性
    "value":"点击",
    "type":"text"
})

prop() 设置或返回被选元素的属性/值 //用法和attr()一致

css() 为被选元素设置或返回一个或多个样式属性 

html() 设置或返回被选元素的内容

text() 设置或返回被选元素的文本内容 

remove() 移除被选元素（包含数据和事件）

empty() 从被选元素移除所有子节点和内容 

replaceAll() 把被选元素替换为新的 HTML 元素

 

二、步骤

1.基础界面 样式

注意：调试需使用手机调试界面，这里手机型号为iPhone6 Plus;

另外手机字体无法通过字体大小设置调整，需在head标签内添加手机自适应语句：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=no">
<!--手机app自适应大小-->

 

2、点击购物车 显示选择商品同时创建一行商品栏

   需要动态创建dom元素：

   var 名=”dom元素内容”；

   注意：当未选择商品时，不能再点击添加商品栏

$("#btnmenu").click(function(){
    //动态创建dom元素
    var trdata="<tr class='trlist'><td class='number'></td><td class='pro_num'></td><td class='name'></td><td class='num'></td><td class='totle'></td><td class='del'><button>删除</button></td></tr>"
    //判断是否存在商品
    if($(".pro_num:last")==undefined)
    {
        $(".tab").append(trdata);//使用前后追加的语法
        num++;
        $(".number:last").html(num<10?"0"+num:num);
    }
    else{
        if($(".pro_num:last").html()!="")
        {
            $(".tab").append(trdata);//使用前后追加的语法
            num++;
            $(".number:last").html(num<10?"0"+num:num);
        }
    }

    //显示菜单
    $(".tablist").css("display","block");

})

 

 

3.点击添加购物车商品到商品栏中

遍历每个商品，点击时分别截取编号以及名称添加到动态创建的dom元素栏中；

注意：由于计算总价需要用到单价 但是这里没有显示单价 所以将单价作为title属性添加到商品数量中；$(".num").last().html(1+"/个").attr("title",$(this).attr("title"));

 

//点击购物车内容添加 each遍历
$(".tablist td").each(function () {
    $(this).click(function(){
        var h_text=$(this).html();
        $(".pro_num").last().html(h_text.substr(0,4));//字符串截取
        $(".name").last().html(h_text.substring(5,h_text.length-1));//截取商品名称
        $(".num").last().html(1+"/个").attr("title",$(this).attr("title"));//将单价隐藏到数量中
        //获取单价  默认总价
        var price=$(this).attr("title");//attr()获取属性
        $(".totle").last().html(price+"元");
    });
});

 

4.添加数量显示时间

由于是手机中无法使用”-””+”,这里使用动态创建input元素value值改变数量值，在给元素添加input元素时需要阻止冒泡；

利用失焦事件将input输入的value作为商品数量；

计算总价 将数量的title属性值*input的value值

//添加数量显示事件
$(".num").each(function(){
    $(this).click(function(){
        //清空默认的数量文本，动态创建input输入框修改数量
        var num_txt=$(this).html().substring(0,$(this).html().indexOf("/"));//记录数量值
        $(this).html("");//清空
        var input=$("<input type='text' class='text' value='"+num_txt+"'>");//创建dom
        $(this).append(input);//给this添加input
        //给input添加失焦事件 修改数量 链式操作
        $(".text").click(function(){
            return false;//防止事件冒泡 添加给input
        }).keydown(function(e){ //处理输入数量必须为数字
            if(!e.key.match(/[0-9]/)){
                return false;
            }
        }).blur(function(){//失焦事件
            //失焦时清除input文本框 并将value值赋给对应td
            var txt_num=$(this).val();

            //修改总价
            var Price=$(this).parent("td").attr("title");//获取隐藏于数量的单价
            $(this).parent("td").next().html(Price*txt_num+"元");//计算总价 next()下一个同级元素
            //或者$(this).parent("td").siblings(".totle").html(Price*txt_num+"元");//sibling()名为..的同胞兄弟
            $(this).parent("td").html(txt_num+"/个");
        })
    });
});

 

5.点击删除按钮移除当前行商品栏

注意：当删除一行商品栏，需要重新对序号排序

定义一个全局变量num 每次删除重新遍历排序；

//添加删除按钮的事件
$(".del").each(function(){
    $(this).click(function(){
        $(this).parents("tr").remove();
        //重新对列表排序
        num=0;
        $(".trlist").each(function(){ //利用遍历每个tr 找其子集第一个修改num
            num++;
            $(this).children("td").first().html(num<10?"0"+num:num);
        });
    });
});

三、完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=no">
    <!--手机app自适应大小-->
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .block{
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
        #title{
            line-height: 35px;
            background-color: black;
            color: white;
            text-align: center;
        }
        #btnmenu{
            width: 18%;
            height: 4%;
            display: block;
        }
        .tab{
            width: 100%;
            margin-top: 2px;
        }
        .tab td{
            width: 16.6666%;;
            border: 1px solid silver;
            text-align: center;
            padding: 5px 0;
        }
        .tablist{
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 30%;
            display: none;
        }
        .tablist td{
            width: 20%;
            line-height: 35px;
            border: 1px solid silver;
            white-space: nowrap;
            font-size: 14px;
        }
        .text{
            width: 100%;
            height: 100%;
            outline: none;
            border-style: none;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="block">
    <div id="title">购物车</div>
    <button id="btnmenu">添加购物</button>
    <table class="tab">
        <tr>
            <td>序号</td>
            <td>编号</td>
            <td>名称</td>
            <td>数量</td>
            <td>总价</td>
            <td>操作</td>
        </tr>
    </table>
    <!--商品列表-->
    <table class="tablist">
        <caption>请选择商品</caption>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
        <tr>
            <td title="5">1001(方便面)</td>
            <td title="2">1002(辣条)</td>
            <td title="1">1003(泡菜)</td>
            <td title="1">1004(火腿)</td>
            <td title="3">1005(饼干)</td>
        </tr>
    </table>
</div>
<script src="js/jquery-3.0.0.js"></script>
<script>
    var num=0;
    $(function(){
        $("#btnmenu").click(function(){
            //动态创建dom元素
            var trdata="<tr class='trlist'><td class='number'></td><td class='pro_num'></td><td class='name'></td><td class='num'></td><td class='totle'></td><td class='del'><button>删除</button></td></tr>"
            //判断是否存在商品
            if($(".pro_num:last")==undefined)
            {
                $(".tab").append(trdata);//使用前后追加的语法
                num++;
                $(".number:last").html(num<10?"0"+num:num);
            }
            else{
                if($(".pro_num:last").html()!="")
                {
                    $(".tab").append(trdata);//使用前后追加的语法
                    num++;
                    $(".number:last").html(num<10?"0"+num:num);
                }
            }

            //显示菜单
            $(".tablist").css("display","block");

            //添加数量显示事件
            $(".num").each(function(){
                $(this).click(function(){
                    //清空默认的数量文本，动态创建input输入框修改数量
                    var num_txt=$(this).html().substring(0,$(this).html().indexOf("/"));//记录数量值
                    $(this).html("");//清空
                    var input=$("<input type='text' class='text' value='"+num_txt+"'>");//创建dom
                    $(this).append(input);//给this添加input
                    //给input添加失焦事件 修改数量 链式操作
                    $(".text").click(function(){
                        return false;//防止事件冒泡 添加给input
                    }).keydown(function(e){ //处理输入数量必须为数字
                        if(!e.key.match(/[0-9]/)){
                            return false;
                        }
                    }).blur(function(){//失焦事件
                        //失焦时清除input文本框 并将value值赋给对应td
                        var txt_num=$(this).val();

                        //修改总价
                        var Price=$(this).parent("td").attr("title");//获取隐藏于数量的单价
                        $(this).parent("td").next().html(Price*txt_num+"元");//计算总价 next()下一个同级元素
                        //或者$(this).parent("td").siblings(".totle").html(Price*txt_num+"元");//sibling()名为..的同胞兄弟
                        $(this).parent("td").html(txt_num+"/个");
                    })
                });
            });

            //添加删除按钮的事件
            $(".del").each(function(){
                $(this).click(function(){
                    $(this).parents("tr").remove();
                    //重新对列表排序
                    num=0;
                    $(".trlist").each(function(){ //利用遍历每个tr 找其子集第一个修改num
                        num++;
                        $(this).children("td").first().html(num<10?"0"+num:num);
                    });
                });
            });
        });
        //点击购物车内容添加 each遍历
        $(".tablist td").each(function () {
            $(this).click(function(){
                var h_text=$(this).html();
                $(".pro_num").last().html(h_text.substr(0,4));//字符串截取
                $(".name").last().html(h_text.substring(5,h_text.length-1));//截取商品名称
                $(".num").last().html(1+"/个").attr("title",$(this).attr("title"));//将单价隐藏到数量中
                //获取单价  默认总价
                var price=$(this).attr("title");//attr()获取属性
                $(".totle").last().html(price+"元");
            });
        });
    });
</script>
</body>
</html>