Unit02： jQuery事件处理 、 jQuery动画　　　　

jQuery实现购物车案例

<!DOCTYPE html>

<html>

  <head>

    <title>购物车</title>

    <meta charset="utf-8" />

    <style type="text/css">

      h1 {

        text-align:center;

      }

      table {

        margin:0 auto;

        width:60%;

        border:2px solid #aaa;

        border-collapse:collapse;

      }

      table th, table td {

        border:2px solid #aaa;

        padding:5px;

      }

      th {

        background-color:#eee;

      }

    </style>

    <script src="../js/jquery-1.11.1.js"></script>

    <script>

        //加入购物车

        function add_shoppingcart(btn) {

            //获取商品名

            //obj.eq(i)==$(obj[i])

            var name = $(btn).parent().siblings().eq(0).html();

            //获取单价

            var price = $(btn).parent().siblings().eq(1).html();

            //创建新行

            var $tr =

          $('<tr>'+

            '<td>'+name+'</td>'+

            '<td>'+price+'</td>'+

            '<td align="center">'+

              '<input type="button" value="-"/>'+

              '<input type="text" size="3" readonly value="1"/>'+

              '<input type="button" value="+" onclick="increase(this);"/>'+

            '</td>'+

            '<td>'+price+'</td>'+

            '<td align="center"><input type="button" value="x"/></td>'+

          '</tr>');

            //将此行追加到tbody下

            $("#goods").append($tr);

        }

        //加法

        function increase(btn) {

            //获取数量

            var amount = $(btn).prev().val();

            //+1,再写入文本框

            $(btn).prev().val(++amount);

            //获取单价

            var price = $(btn).parent().prev().html();

            //计算并写入金额

            $(btn).parent().next().html(amount*price);

        }

    </script>

  </head>

  <body>

    <h1>真划算</h1>

    <table>

      <tr>

        <th>商品</th>

        <th>单价(元)</th>

        <th>颜色</th>

        <th>库存</th>

        <th>好评率</th>

        <th>操作</th>

      </tr>

      <tr>

        <td>罗技M185鼠标</td>

        <td>80</td>

        <td>黑色</td>

        <td>893</td>

        <td>98%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>微软X470键盘</td>

        <td>150</td>

        <td>黑色</td>

        <td>9028</td>

        <td>96%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>洛克iphone6手机壳</td>

        <td>60</td>

        <td>透明</td>

        <td>672</td>

        <td>99%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>蓝牙耳机</td>

        <td>100</td>

        <td>蓝色</td>

        <td>8937</td>

        <td>95%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>金士顿U盘</td>

        <td>70</td>

        <td>红色</td>

        <td>482</td>

        <td>100%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

    </table>

    <h1>购物车</h1>

    <table>

      <thead>

        <tr>

          <th>商品</th>

          <th>单价(元)</th>

          <th>数量</th>

          <th>金额(元)</th>

          <th>删除</th>

        </tr>

      </thead>

      <tbody id="goods">

      </tbody>

      <tfoot>

        <tr>

          <td colspan="3" align="right">总计</td>

          <td id="total"></td>

          <td></td>

        </tr>

      </tfoot>

    </table>

  </body>

</html>

jquery_shopping.html

jQuery事件处理演示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    .big {

        width: 250px;

        height: 250px;

    }

</style>

<script src="../js/jquery-1.11.1.js"></script>

<script>

    //window.onload在网页上不能写多次,

    //否则后者会覆盖前者.

    //$(function(){})在网页上可以写多次,

    //它们都有效.

    $(function(){

        //给按钮1绑定单击事件

        $(":button:first").click(function(e){

            console.log(1);

            console.log(e);

        });

        //给图片绑定hover事件

        $("img").hover(

            function(){

                $(this).addClass("big");

                //$(this).css();

                //$(this).attr("style","");

                //$(this).attr("class","");

                //$(this).width().height();

            },

            function(){

                $(this).removeClass("big");

            }

        );

        //给按钮2绑定单击事件

        $(":button:eq(1)").click(function(){

            //让图片在显示与隐藏间切换

            $("img").toggle();

        });

    });

</script>

</head>

<body>

    <p>

        <input type="button" value="按钮1"/>

        <input type="button" value="按钮2"/>

    </p>

    <p>

        <img src="../images/01.jpg" />

    </p>

</body>

</html>

Unit02： jQuery事件处理 、 jQuery动画的更多相关文章

  1. 从零开始学习jQuery (七) jQuery动画-让页面动起来!

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...

  2. jQuery事件处理了解一下

    >>> JQuery 事件处理 一.事件绑定方式 1.事件绑定的快捷方式: 缺点:绑定的事件,无法取消 $("button:eq(0)").dblclick(fu ...

  3. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...

  4. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  5. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  6. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  8. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  9. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

随机推荐

  1. iptables详解（7）：iptables扩展之udp扩展与icmp扩展

    前文中总结了iptables的tcp扩展模块,此处,我们来总结一下另外两个跟协议有关的常用的扩展模块,udp扩展与icmp扩展. udp扩展 我们先来说说udp扩展模块,这个扩展模块中能用的匹配条件比 ...

  2. 跨域问题Java方式解决及Nginx方式解决【亲测可行】

    这两天和前端同事调试微信公众号项目,就遇到了跨域问题:网上相关博客也挺多的,但有很多细节没有点到,在此呢我也再次记录一下解决方式: (算是踩坑日记吧~ ~ ~)   !问题发现: 页面加载不出来,控制 ...

  3. 重温MVC基础入门

    重温MVC基础入门   简介 本文主要是作者回顾MVC基础的文章,整合个人认为基础且重点的信息,通过简单实践进行复习. 相关代码地址:https://github.com/OtherRuan/Revi ...

  4. 启动和停止Oracle服务bat脚本

    总所周知,Oracle随开机启动会占很大内存,而你每次想用的时候还得去计算机服务里去找服务.一个一个的启动,比较麻烦. 这里给出两个bat脚本,来直接双击启动和停止Oracle服务[脚本内容来源于网络 ...

  5. vux配置i18n

    根据使用文档,先引入i18n import VueI18n from 'vue-i18n'; Vue.use(VueI18n) const i18n = new VueI18n({ locale: ' ...

  6. 获取img元素图片的实际尺寸

    // Get on screen image var screenImage = $("#image"); // Create new offscreen image to tes ...

  7. Java虚拟机读写其他进程的数据--Process对象

    使用Runtime对象的exec()方法可以运行平台上的其他程序,该方法产生一个Process对象,Process对象代表由该Java程序启动的子进程. Process类提供了3个方法,用于让程序和其 ...

  8. （转）MapReduce Design Patterns（chapter 6 （part 2））（十二）

    Chain Folding 这是对job 链的一种优化.基本上是一种大体规则:每条记录都会提交给多个mapper,或者给reducer然后给mapper.这种综合处理方法会节省很多读文件和传输数据的时 ...

  9. 《gradle 用户指南中文版》第3章 安装 gradle

    macOS 下安装 gradle,只要可以安装sdk的系统,使用sdk来安装,那么安装方式基本是一样的. Gradle在所有主要操作系统上运行,只需要安装Java JDK或JRE版本7或更高版本.要检 ...

  10. 《PyQt5 快速开发与实战》 第九章代码Bug修正 DataGrid.py 最后一页下翻页 仍可点击的错误

    # -*- coding: utf-8 -*- import sys import re from PyQt5.QtWidgets import (QWidget , QHBoxLayout , QV ...