2. 程式人生 > >三十四、jquery練習 手機點餐demo

三十四、jquery練習 手機點餐demo

阿新 • • 發佈：2018-12-16

一、所用知識點：

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>

相關推薦

三十四、jquery練習 手機點餐demo

一、所用知識點： 1.jquery事件繫結方法： (1) bind():類似於js中事件的監聽方法；    語法:  $(selector).bind(event,data,function,map) selector:被選元素； event:新增

【Android Studio安裝部署系列】三十四、將Eclipse項目導入到Android Studio中

png 規範 報錯 dsv 代碼 struct const 程序包 方法 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 概述 我采用的是笨方法：新創建Android Studio項目，然後將Eclipse項目中的目錄一一復制到Android Studio項目中。

三十四、python學之Flask框架(六)資料庫:mysql資料庫及Flask-SQLAlchemy

一、資料庫知識回顧: 1.SQL:關係型資料庫,支援結構化查詢語言: 關係型資料庫:以表的形式儲存; 支援結構化查詢語言:SQL語句; 列數固定;行數可變，定義資料，主鍵、外來鍵，引用同表或不同表的主鍵，這種聯絡稱為關係. 2.關於正規化: 第一

三十四、SpringBoot自定義過濾器

XSS 跨站指令碼工具（cross 斯特scripting），為不和層疊樣式表（cascading style sheets,CSS）的縮寫混淆， 故將跨站指令碼攻擊縮寫為XSS。惡意攻擊者往web頁面裡插入惡意ScriptScript程式碼，當用戶瀏覽該頁之時， 嵌入其中We

三十四、ES6中箭頭函式的使用

1、單引數箭頭函式 ES6中允許使用“箭頭”(=>)定義函式： var f = v => v; 以上程式碼相當於： var f = function( v ) { return v; } “箭頭”(=>)後面是函式體，“箭頭”(=>

三十四、count查詢條數效能試驗

                     count查詢條數效能試驗 --

三十四、HDFS客戶端操作

                              HDFS客戶端操作 1、jar包準備 1）解壓hadoop-2.7.2.tar.gz（原始碼）到非中文目錄hadoop-2.7.2 2）建立_

三十九、Jquery三級聯動dome

說明：和js的三級聯動dome寫法一致，只是用jquery語法； 另外資料這次採用json資料格式做示範；   注意：json資料中同級關係的名稱一致，方便後面的訪問，子父級關係的名稱可以一致也可以不一致； 另外，還需要處理選擇請選擇時的bug(設定預設value=””,當獲取的v

三十八、jquery 購物車功能實現demo

說明：所有功能及實現原理和js購物車一致，只是將所用語法改寫為了jquery語法 一、利用table標籤簡單建立介面樣式； 二、首先實現全選、單選功能 1.全選功能時需要判斷是否有checked屬性；在jquery中設定或返回被選元素的屬性/值的方法有兩種attr()及prop()；

三十七、jQuery多動輪播動畫混疊效果

利用列舉物件封裝方法，通過引數傳遞建立不同的動畫模型並呼叫執行對應動畫； 主要是為了演示如何對動畫混疊進行封裝 一、搭建整體模型 1.封裝層級排序方法 //封裝層級排序方法sortimg:function(){    $(".ulinfo li").e

三十六、jquery手風琴效果

1.基本結構樣式 2.新增手風琴展開事件：當滑鼠進入某個圖片，展開當前圖片，其同胞兄弟合起來，並設定相應的樣式 注意：需要使用stop()處理連續多次滑動的情況； $(this).mouseenter(function(){    //設定span屬性&

三十五、jquery動畫 無縫滾動兩種方式

無縫輪播有兩種方式，一種可以讓ul中的每個li進行移動，另外一種時令整個ul進行移動。無縫輪播效果之前用js寫過一次，以下是用jQuery分別實現這兩種方式；   一、第一種 控制每個li標籤移動實現無縫輪播 1.基本佈局樣式 2.實現自動向左輪播 採用列舉物件封裝函式的方法，封

三十四、Springboot 自動裝配

（一）自動裝配介紹   在以前的Spring中，我們需要使用一個依賴，比如（Druid），那麼我們在引入這個依賴以後，還需要在XML配置檔案中配置一大堆類及其屬性。但是在Springboot中，我們只需要在application.yml中定義一些屬性就可以實現

《我學區塊鏈》—— 三十四、以太坊智慧合約靜態安全分析

三十四、以太坊智慧合約靜態安全分析        以太坊的智慧合約程式碼審計，筆者找到兩種方式：一是 CertiK，一個提供智慧合約安全服務的區塊鏈平臺，是一條公鏈系統，採用 PoP(proof-of-proof)共識機制，用來分析合約需要消耗該區塊鏈平臺的原生

三十四、Linux 程序與訊號——訊號特點、訊號集和訊號遮蔽函式

34.1 訊號特點 訊號的發生是隨機的，但訊號在何種條件下發生是可預測的 程序槓開始啟動時，所有訊號的處理方式要麼預設，要麼忽略；忽略是 SIGUSR1 和 SIGUSR2 兩個訊號，其他都採取預設方式（大多數是終止程序）。 程序在呼叫 exec 函式後，原有訊號的捕捉函式失效 子程序的誕

# Unity 遊戲框架搭建 2019 (三十四、三十五) 9 ~ 10 示例整理

## 第九個示例 目前程式碼如下: ```cs using UnityEngine; #if UNITY_EDITOR using UnityEditor; #endif namespace QFramework { public class ResolutionCheck { #if UNITY_E

javaSE (三十四）File類和遞迴練習（統計資料夾大小、拷貝資料夾、層級列印資料夾、斐波拉契數列、獲取1000階乘全部0和尾部0數目、約瑟夫環）

1、統計資料夾大小： 思路： 套用之前已經做過的，鍵入一個路徑，若有效則封裝成File類 初始化計數器len， 若資料夾下是檔案，則記錄檔案.length() 若資料夾下是資料夾，遞迴 輸出len 注：遞迴也可以刪除資料夾，但是一定要先刪除裡

三十二、python學習之Flask框架(四)模板：jinja2模板、過濾器、模板複用(繼承、巨集、包含)、瞭解CSRF跨站請求攻擊

一、jinja2模板引擎的簡介: 1.模板: 1.1檢視函式的兩個作用: 處理業務邏輯; 返回響應內容; 1.3 什麼是模板: 模板其實是一個包含響應文字的檔案，不是特指的html檔案，其中用佔位符(變數)表示動態部分，告訴模板引擎其具體的

二十四、python學習之前端(六):JQuery進階

一、jquery特殊效果: 1.特殊動畫: 1.1 特殊動畫函式: a.無參直接隱藏/顯示/切換,帶參變成動畫 函式 功能 hide() 隱藏元素

四十二、jQuery的ajax請求

一、Ajax請求方法 1.js原生ajax方法: /1.建立XHR物件 (伺服器互動物件) 注意相容 var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else{