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. 【javascript基础】运算符优先级

    优先级 运算类型 关联性 运算符 1 成员运算符 从左到右 . [] new 从右到左 new 2 函数调用运算符 从左到右 () 3 自增运算符 n/a ++ 自减运算符 n/a -- 4 逻辑非运 ...

  2. Spring整合hibernate：3、使用XML进行声明式的事务管理

    配置applicationContext.xml文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  3. Java常用类：StringBuilder

    一.介绍 2 3 4 5 //同样,StringBuilder也是final修饰的不可变,相比String来说,继承了AbstractStringBuilder,StringBuffer也是同样继承了 ...

  4. OC-字符串、数组、字典总结

    #import <Foundation/Foundation.h> /* ∆以NSMutable开头的都是可变类型,以NSMutable开头定义的对象都是可以对数据进行修改: NSStri ...

  5. Java基础学习-Collection体系结构和迭代测试

    package Collection; import java.util.ArrayList; import java.util.Collection; import java.util.Iterat ...

  6. Spring核心思想——IOC和DI

    基本概念 IOC是什么?     IOC(Inversion of Control)控制反转,IOC是一种新的Java编程模式,目前很多轻量级容器都在广泛使用的模式. IOC解决了什么问题?      ...

  7. APUE学习笔记——10信号——信号接口函数 signal 和 sigaction

    signal函数     signal函数是早起Unix系统的信号接口,早期系统中提供不可靠的信号机制.在后来的分支中,部分系统使用原来的不可靠机制定义signal函数,如 Solaris 10 .而 ...

  8. d3.js入门学习

    个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛. 今天看了一下公司目前所用的两种数据可视化工具---D3和EC ...

  9. C#单元测试Nunit小结（20141018）

    1. 下载和安装Nunit工具: NUnit是一款堪与JUnit齐名的开源的回归测试框架,供.net开发人员做单元测试之用,可以从www.nunit.org网站上免费获得,然后在系统中安装: 2. 在 ...

  10. GitHub原来也可以用SVN客户端的.

    不知道是不是自己真的太宅了. 一直以为只能用git client 来clone github工程的.  偶然今日发现还可以用 SVN 来下载的. 果断一试. 太好用了. 这回windows 上不用纠结 ...