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. 【MySQL】CSV 文件导入MySQL

    此问题是前几天整理数据的时候碰到的,数据存在 CSV文件中(200多万记录),通过python 往数据库中导入太慢了,后来使用MySQL 中自带的命令 LOAD DATA INFILE, 30多秒就能 ...

  2. Python 常用 PEP8 编码规范

    Python 常用 PEP8 编码规范 代码布局 缩进 每级缩进用4个空格. 括号中使用垂直隐式缩进或使用悬挂缩进. EXAMPLE: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  3. Oracle recovery manager failed to restore

    解决办法: 1:清理过期失效的备份, 2:增加recovery_file_dest_size参数值即可: SQL> show parameter db_recover NAME          ...

  4. OpenMP学习

    当数据量较大或者时间复杂度高的时候,盲目地等待结果,开发效率极低. 听说OpenMP可以多核并行运算,加快运行速度.整理了一些OpenMP的资料,以待学习. 1.openMP的一点使用经验 2.Ope ...

  5. 安装mysql 5.7版本遇到问题及解决办法

    遇见问题:1.执行MySql启动命令:net start mysql 报错:Mysql 服务正在启动Mysql 服务无法启动 服务没有报告任何错误. 解决办法:在mysql的安装目录下在my-defa ...

  6. React-Native进阶_1.抽取样式和组件

    组织应用的样式和组件 就像抽取工具类一样,放在单独的文件中,在要使用的地方去导入调用即可. 1.导出样式 Style 样式可以单独写在一个JavaScript文件中,然后导出给其他JavaScript ...

  7. 深入理解Feign之源码解析

    转载请标明出处: 本文出自方志朋的博客 什么是Feign Feign是受到Retrofit,JAXRS-2.0和WebSocket的影响,它是一个jav的到http客户端绑定的开源项目. Feign的 ...

  8. Vim技能修炼教程(12) - Vim的脚本语言支持

    Vim的脚本语言支持 本节开始,我们正式接触vimscript这门古老的脚本语言. 首先要说明,vim支持的扩展语言很多,比如python, python3, ruby, lua,tcl等常见脚本语言 ...

  9. [置顶] Retrofit2 初印象？

    鄙人由于工作繁忙很久没写博客了还望大家谅解!之前csdn登不上,算了不说借口了,retrofit2相信已经很火了吧,而且上手也比较容易,之前可能大家都是用Volley,Okhttp.Okhttp3其实 ...

  10. topcoder WCNMLGB

    点开题->断开连接->再也上不去->我玩NM