大厂都在看的购物车

jquery

jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。

其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。

1.$()或者是jQuery()

    1.1

        jQuery(selector,context):

        接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。

        默认情况下，对匹配元素的查找都是从根元素ducument对象开始，也就是说查找范围是整棵文档树。但是如果给定了上下文context，则在指定上下文中查找.

        ps.

        <span>body span</span>

        <span>body span</span>

        <span>body span</span>

        <div class="wrap">

            <span>wrap span</span>

            <span>wrap span</span>

            <span>wrap span</span>

        </div>

        $('span').css('background-color','red');//所有的span都会变红

        $('span','.wrap').css('background-color','red');//只有.wrap中的span会变红

    1.2

        jQuery(html,ownerDocument) 、jQuery(html,props):

        用所提供的html创建dom元素。

        html参数是要创建的标签，可以是单标签也可以是多标签。

        第二个参数用于创建新DOM元素的文档对象，如果不传入则默认为当前的文档对象。

        //单标签  两种方式都可以往body中插入div


        $('<div>').appendTo('body');

        $('<div></div>').appendTo('body'); 


        // 多标签嵌套

        $('<div><span>dfsg</span></div>').appendTo('body')

        appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

        同样也有其他方法在被选元素的头部，以及头部外部，尾部外部添加元素。

    1.3

        jQuery(element or elementsArray)：

        如果传入一个DOM元素或者是DOM元素的数组，则把DOM元素封装到jQuery对象中并返回。

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

        // 传入DOM元素

        $('li').each(function(index,ele){

                $(ele).on('click',function(){

                    $(this).css('background','red');//这里的DOM元素就是this

                })

        })


        //传入DOM数组

        var aLi=document.getElementsByTagName('li');

            aLi=[].slice.call(aLi);//集合转数组

            var $aLi=$(aLi);

            $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象'

    1.4

        jQuery(object)：

        如果传入的是一个object对象，则把该对象封装到jQuery对象中并返回。

        var obj={name:'谦龙'};

        var $obj=$(obj);//封装成jQuery对象

        //绑定自定义事件

        $obj.on('say',function(){

            console.log(this.name)//输出谦龙

        });

        $obj.trigger('say')

    1.5

        jQuery(callback)：

        当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行。

        $(function(){


        })

        //以上代码和下面的效果是一样的

        $(document).ready(function(){

            ...//代码

        })

    1.6

        jQuery(jQuery object)：

        当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素。

        var aLi=$('li');

        var copyLi=$(aLi);//创建一个aLi的副本

        console.log(aLi);

        console.log(copyLi);

        console.log(copyLi===aLi);

    1.7

        jQuery()：

        如果不传入任何的参数，则返回一个空的jQuery对象，属性length为0。

        注意这个功能可以用来复用jQuery对象，例如可以创建一个空的jQuery对象，然后在需要的时候先手动修改其中的元素，然后在调用jQuery方法。从而避免重复创建jQuery对象。

2. :gt()

    :gt 选择器选取 index 值高于指定数的元素。

    ps.

        $('tr:gt(0)')：选取下表为0 之后所有的tr元素。


    扩展：

        :lt 选择器来选取 index 值小于指定数的元素。

3. each()

    each() 方法规定为每个匹配元素规定运行的函数。

    通俗来讲就是循环便利，相当于是for,foreach.

    $('tr:gt(0)').each(function () {

        console.log(this);

        这里的this指向的是循环遍历的每一个tr 下的 td;

            ps.

                输出结果：

                        <td width="150px">31</td>

            <td width="150px">iphhone</td>

            <td width="300px">

            <button>-</button>

            <input type="text" value="0">

            <button>+</button>

            </td>

            <td width="150px">$4000</td>

            <td width="150px">0</td>

            <td width="150px"><a class="a">移除</a></td>

        可以说是指向当前调用者;

    })

4. find()

        find() 方法返回被选元素的后代元素。

        $(this).find('td:eq(2)')


    4.1

        eq():


        :eq() 选择器选取带有指定 index 值的元素。

    在 第3部 $(this) 拿到每一个tr下面的所有td之后

    .find('td:eq(2)') 去查找第三个td

5. children()

        children() 方法返回返回被选元素的所有直接子元素，也就是说第一代子级

    5.1


        children()和find()的区别

        children()：只返回儿子一级的子元素

        find()：返回所有后代

6. first()  last()

    first():返回第一个匹配到的元素

    last():返回最后一个匹配到的元素

7. 拿到加减号给加减号添加点击事件

    7.1


        $(this).find('td:eq(2)').children().first()

        拿到tr下的第三个td找到里边的子元素获取到第一个元素 减号 添加点击事件

        <td width="300px">

    <button>-</button>

    <input type="text" value="0">

    <button>+</button>

    </td>

    7.2

        $(this).find('td:eq(2)').children().last()

        拿到tr下的第三个td找到里边的子元素获取到最后一个元素 加号 添加点击事件

        <td width="300px">

    <button>-</button>

    <input type="text" value="0">

    <button>+</button>

    </td>

8. next()  prev()

    8.1

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

        prev()： 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

    8.2

        $(this).next().val(); $(this).next().prev();

        在加号减号分别拿到input里商品数量，进行商品数量操作。

9. val()  text()

    9.1

        val()

            方法返回或设置被选元素的值。

            元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

    9.2

        text()

            方法设置或返回被选元素的文本内容。

            当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

            当该方法用于设置内容时，则重写所有匹配元素的内容。

    9.3

        html()：补充

            方法设置或返回被选元素的内容（innerHTML）。

            当该方法用于返回内容时，则返回第一个匹配元素的内容。

            当该方法用于设置内容时，则重写所有匹配元素的内容。

    9.4

        text() html() 区别：

        一个是操作文本内容，一个是操作元素内容。

10. 加减事件

    10.1

        加号事件

            10.1.1

                通过$(this).prev().val();拿到加号上一个元素，也就是input商品数量的值，进行 加1

                然后商品数量加了之后，

                要给input重新赋值，

                要重新计算商品的总价以及购物车的总金额


                jia.click(function () {

        var num = $(this).prev().val();

        num++;

        $(this).prev().val(num);//给input重新赋值

        total($(this));//调用购物车总金额函数

        allmoney();//调用购买商品总价函数

        })

    10.2

        减号事件

            10.2.1

                通过$(this).next().val();拿到加号下一个元素，也就是input商品数量的值，进行 加1

                然后商品数量加了之后，

                要给input重新赋值，

                要重新计算商品的总价以及购物车的总金额

                jian.click(function () {

        var num = $(this).next().val();

        num--;

        if (num < 0) {

        num = 0;

        if (confirm("已经是0件了你确定要删除这件商品吗") == true) {

        $(this).parent().parent().remove();

        }

        }

        $(this).next().val(num);

        total($(this));

        allmoney();

        })

            10.2.2

                confirm()

                    方法用于显示一个带有指定消息和确认及取消按钮的对话框。

                    如果访问者点击"确定"，此方法返回true，否则返回false。

11. parent()

        方法返回被选元素的直接父元素。该方法只沿着 DOM 树向上遍历单一层级。

        11.1

            parents():方法返回被选元素的所有祖先元素。

            祖先是父、祖父、曾祖父，依此类推。

            该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（<html>）。

        注意：

            如果 filter 参数为空，该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。

        11.2

            closest(): 方法返回被选元素的第一个祖先元素。

            祖先是父、祖父、曾祖父，依此类推。

            该方法从当前元素向上遍历，直至文档根元素的所有路径（<html>），来查找 DOM 元素的第一个祖先元素。


        11.2.1

            parents() 与 closest() 的不同


            parents()

                从父元素开始

                沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先

                返回包含零个、一个或多个元素的 jQuery 对象


            closest()

                从当前元素开始

                沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个祖先

                返回包含零个或一个元素的 jQuery 对象


        11.3

            parentsUntil()：方法返回介于 selector 与 stop 之间的所有祖先元素。

            该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径，直到到达指定的元素为止。


            注意：

            如果两个参数都为空，该方法将返回所有祖先元素（与 parents() 方法相同）。

            .parentsUntil(stop,filter)


12. substr()

        方法可在字符串中抽取从 start 下标开始的指定数目的字符。

        返回值:

        一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

13. remove()

        方法移除被选元素，包括所有的文本和子节点。

        该方法也会移除被选元素的数据和事件。

        13.1

            detach()

                方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。

                该方法会保留移除元素的副本，允许它们在以后被重新插入。


        13.2

            empty()

                方法移除被选元素的所有子节点和内容。

                该方法不会移除元素本身，或它的属性。

14. :not()

        方法返回不符合一定条件的元素。

        该方法让您规定一个条件。不符合条件的元素将从选择中返回，符合条件的元素将被移除。

        该方法通常用于从被选元素组合中移除一个或多个元素。

        14.1

            filter()

                方法返回符合一定条件的元素。

                该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。

                该方法通常用于缩小在被选元素组合中搜索元素的范围。


    tr:not(:first):not(:last):

    返回除了第一个和最后一个的tr元素集合。

15. 计算单个商品总价  计算总购买价

    15.1

        单个商品总价

        //商品单个总价

    function total(o) {

            // 参数o 加减调用时所传的当前的元素集合

    var n = o.parent().children().first().next().val();

            // n 代表的是找到o，也就是说找到加号或者是减号的  parent父级元素 的 children儿子元素 的 first第一个元素的 next下一个元素 的 val值

            // 也就是说拿到input框里的商品数量

    var money = Number(o.parent().next().text().substr(1));

            // money 代表的是 o 父级的下一个元素的text文本 然后通过substr拿到商品单个价格  也就是￥2000

    o.parent().next().next().text(n * money);

            //最后找到 展示总价的td，计算出总价之后赋值。

    }

    15.2

        计算所有商品的总价

        //总购买价

        function allmoney() {

        var num = 0;

        $('tr:not(:first):not(:last)').each(function () {

                    // tr:not(:first):not(:last) 这里的意思就是除了第一个tr 和 最后一个tr 去循环

                    //因为这里的第一个tr和最后一个tr是表头和表尾

        num += Number($(this).find('td:eq(4)').text());

                    //最后就是把所有的tr里面第五个td的文本 也就是单个商品的总价 相加计算出 所有总价

        })

        $('tr:last').children().first().next().text(num);

                // 最后找到最后一个tr里的儿子元素的第二个元素 设置文本内容  也就是总价。

        }

16. 删除商品

    16.1

        拿到当前要删除商品的总价

        $(this).parent().prev().text();

    16.2

        拿到购物车总价

        $('tr:last').children().first().next().text();

    16.3

        最后用购物车总价减去单个商品的总价，重新给购物车总价赋值

        $('tr:last').children().first().next().text(b-a);

        然后删除整条元素

        $(this).parent().parent().remove();

17. 清除购物车

    17.1

        删除所有商品

        $('tr:not(:first):not(:last)').remove();

        这里是除了第一个tr和最后一个tr，其余的tr元素全部删除，

        操作dom，来改变购物车展示的内容。

    17.2

        清空总价数据为0

        $('tr:last').children().first().next().text('0');


总结：

    1.jquery 实际操作dom

    2.涉及原生方法

    3.购物车逻辑

        3.1 添加商品，增加商品数量，增加单个商品总价，同时增加总金额

        3.2 减少商品，减少商品数量，减少单个商品总价，同时减少总金额

            当商品数量小于0时移除商品

        3.3 删除商品，减少商品总价

        3.4 清空购物车，总金额变为0

    4.this指向

        方法中的所有this均指向当前调用者

    5.最后总结一下子，基础其实很重要。



附上源码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<style type="text/css">

    td {

        text-align: center;

        height: 50px;

        border-bottom: 1px solid gray;

    }

    a {

        padding: 5px 10px;

        background: red;

        color: #fff;

        font-weight: bold;

        border-radius: 5px;

        text-align: center;

    }

    tr:last-child td {

        border: none;

    }

</style>

<body>

    <table cellspacing="0" cellpadding="0">

        <tr>

            <td width="150px">产品编号</td>

            <td width="150px">产品名字</td>

            <td width="300px">产品数量</td>

            <td width="150px">单价</td>

            <td width="150px">总价</td>

        </tr>

        <tr>

            <td width="150px">31</td>

            <td width="150px">iphhone</td>

            <td width="300px">

                <button>-</button>

                <input type="text" value="0">

                <button>+</button>

            </td>

            <td width="150px">$4000</td>

            <td width="150px">0</td>

            <td width="150px"><a class="a">移除</a></td>

        </tr>

        <tr>

            <td width="150px">52</td>

            <td width="150px">NOKIA</td>

            <td width="300px">

                <button>-</button>

                <input type="text" value="0">

                <button>+</button>

            </td>

            <td width="150px">$2000</td>

            <td width="150px">0</td>

            <td width="150px"><a class="a">移除</a></td>

        </tr>

        <tr>

            <td width="150px">77</td>

            <td width="150px">Samng</td>

            <td width="300px">

                <button>-</button>

                <input type="text" value="0">

                <button>+</button>

            </td>

            <td width="150px">$1000</td>

            <td width="150px">0</td>

            <td width="150px"><a class="a">移除</a></td>

        </tr>

        <tr>

            <td width="150px">23</td>

            <td width="150px">qq</td>

            <td width="300px">

                <button>-</button>

                <input type="text" value="0">

                <button>+</button>

            </td>

            <td width="150px">$3000</td>

            <td width="150px">0</td>

            <td width="0px"><a class="a">移除</a></td>

        </tr>

        <tr>

            <td width="150px">总购买价</td>

            <td width="150px">0</td>

            <td width="300px"></td>

            <td width="150px"></td>

            <td width="0px"><a id="qingchu">清空购物车</a></td>

            <td width="150px"></td>

        </tr>

    </table>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $('tr:gt(0)').each(function () {

        var jian = $(this).find('td:eq(2)').children().first()

        var jia = $(this).find('td:eq(2)').children().last()

        //          减点击事件

        jian.click(function () {

            var num = $(this).next().val();

            num--;

            if (num < 0) {

                num = 0;

                if (confirm("已经是0件了你确定要删除这件商品吗") == true) {

                    $(this).parent().parent().remove();

                }

            }

            $(this).next().val(num);

            total($(this));

            allmoney();

        })

        //加点击事件

        jia.click(function () {

            var num = $(this).prev().val();

            num++;

            $(this).prev().val(num);

            total($(this));

            allmoney();

        })

    })

    //商品单个总价

    function total(o) {

        var n = o.parent().children().first().next().val();

        var money = Number(o.parent().next().text().substr(1));

        o.parent().next().next().text(n * money);

    }

    //总购买价 

    function allmoney() {

        var num = 0;

        $('tr:not(:first):not(:last)').each(function () {

            num += Number($(this).find('td:eq(4)').text());

        })

        $('tr:last').children().first().next().text(num);

    }

    //删除

    $('.a').click(function () {

        let a=$(this).parent().prev().text();//当前商品的总价

        let b=$('tr:last').children().first().next().text();//购物车的总价

        $('tr:last').children().first().next().text(b-a);

        $(this).parent().parent().remove();

    })

    //清除购物车

    $('#qingchu').click(function () {

        $('tr:not(:first):not(:last)').remove();

        $('tr:last').children().first().next().text('0');

    })

</script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341

推荐阅读更多精彩内容

  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 648评论 0赞 3
  • jQuery（一）
    第一章 认识jQuery jQuery 能做什么 1. 取得文档中的元素 2. 修改页面的外观 CSS虽然为影响文...
    七弦桐语阅读 476评论 0赞 1
  • JQuery
    //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 698评论 0赞 9
  • jquery函数大全
    $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 501评论 0赞 4
  • jquery方法大全
    Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 554评论 0赞 1