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. 033——VUE中安装使用vue-devtools调试工具用于监控数据变化

    vue官网:https://cn.vuejs.org/ 下的官方仓库:vue-devtools  安装到火狐或谷歌下都可以,安装成功之后,按F12查看就可以了

  2. poj3656

    题解: 二分图最大匹配 根据三角形不等式 直接上最大匹配即可 注意编圈取相反数 代码: #include<iostream> #include<algorithm> #incl ...

  3. flume 启动，停止，重启脚本

    #!/bin/bash #echo "begin start flume..." #flume的安装根目录(根据自己情况,修改为自己的安装目录) path=/sysware/apa ...

  4. 学习写domready

    原视频参考http://www.imooc.com/learn/488 --博主个人尝试学习写的-- /** * Created by ty on 2016/1/3. */ //尝试自己写domrea ...

  5. 表单隐藏域与display:none

    有时候前端进行表单填写是分步骤的,每一步的时候其他步骤相关的表单视图不可见: 针对"不可见",以下有两种处理方式: ①display:none 这种方式呢,比较简单,就是将三个步骤 ...

  6. SpringMVC札集(10)——SSM框架整合

    自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...

  7. NamedParameterJdbcTemplate常用方法总结

    数据库结构 1.插入/修改/删除数据,使用update方法 插入数据1 API: int update(String sql, Map< String, ? > paramMap) 示例: ...

  8. HTML字符实体（Character Entities），转义字符串（Escape Sequence） 转

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  9. 程序设计入门-C语言基础知识-翁恺-期中测试

    一.试题 程序设计入门—C 语言期中测评 试题下载地址: http://nos.netease.com/edu-lesson-pdfsrc/217E194E46A6595A3F554380337490 ...

  10. [转]redis服务器与客户端保活参数（tcp-keepalive）设置

    最近使用redis的list做跨进程的消息队列,客户端使用的是redis-cplusplus-client.这个client库还是蛮好用的,提供了和redis命令行一致的接口,很方便. 使用过程中发现 ...