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. [转载]Java在线打开PDF文档

    步骤一:(涉及到的工具) 访问:http://www.zhuozhengsoft.com/dowm/,从官网下载PageOffice for Java. 步骤二:(配置工程) 1. 解压PageOff ...

  2. HTML5页面，用JS 禁止弹出手机键盘

    用户点击input的时候: 会默认调出手机软键盘: 场景:文本框获取焦点时,需要禁止手机弹出自带的输入键盘: 解决方案1: 用一个p/div等标签显示内容:然后放一个隐藏的input: (可能的场景: ...

  3. QUnit 学习笔记 使用说明（一）

    一.单元测试前言 什么是单元测试? 如果是新接触单元测试的童鞋,简要的解释:就是一个JS函数/功能/模块的测试. 单元测试的工具:这里介绍QUnit Qunit原本是jqury家的,不过现在已经独立了 ...

  4. JSON数组字典解析

    遇到这样的字典数组字符串 priceRange = "[{\"id\":149075584861800,\"price\":9.9,\"nu ...

  5. Mac工具整理

    记录一下这两年来使用Mac的一些很好的工具: 1.offic,mac的office还是很强大的,比openoffice要好很多,更比WPS要好. 2.Toad连接数据库用的,一般用来连接Oracle. ...

  6. Linux：tee命令详解

    tee tee命令用于将数据重定向到文件,另一方面还可以提供一份重定向数据的副本作为后续命令的stdin,简单的说就是把数据重定向到给定文件和屏幕上. 语法 tee(选项)(参数) 选项 -a:向文件 ...

  7. 【Java实战】源码解析为什么覆盖equals方法时总要覆盖hashCode方法

    1.背景知识 本文代码基于jdk1.8分析,<Java编程思想>中有如下描述: 另外再看下Object.java对hashCode()方法的说明: /** * Returns a hash ...

  8. keras 报错 ValueError: Tensor conversion requested dtype int32 for Tensor with dtype float32: 'Tensor("embedding_1/random_uniform:0", shape=(5001, 128), dtype=float32)'

    在服务器上训练并保存模型,复制到本地之后load_model()报错: ValueError: Tensor conversion requested dtype int32 for Tensor w ...

  9. mongodb 使用

    一.下载 MongoDB的官网是:http://www.mongodb.org/ MongoDB最新版本下载在官网的DownLoad菜单下:http://www.mongodb.org/downloa ...

  10. 小程序开发之scroll-view中id不能以数字开头的问题

    在实现这样的一个功能时,   调用微信小程序api发现scroll中可以通过id来实现点击菜单栏,屏幕滚动到对应的id位置 但是id不能以数字,汉字类型的 字符串开头(暂发现两种),可能博主比较笨,想 ...