Unit02: jQuery事件处理 、 jQuery动画

    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>
时间: 2024-10-02 20:13:09

Unit02: jQuery事件处理 、 jQuery动画的相关文章

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

原文:从零开始学习jQuery (七) jQuery动画-让页面动起来! 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

前端 之 jQuery: 简介, 选择器, 动画效果, 属性操作; (一)

jQuery 简介 jQuery 选择器 jQuery 动画效果 jQuery 属性操作 jQuery 简介 为什么要使用jQuery: 答: 因为优秀. 什么是 jQuery: jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可. 关于jQuery的相关资料: 官网:http://jquery.com/ 官网API文档:http://api.jquery.com/

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

CSS3/jQuery创意盒子动画菜单

作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示该菜单项具体的内容.该CSS3菜单在展开时也有不错的动画效果. 在线演示源码下载 原文链接:http://www.html5tricks.com/css3-jquery-box-menu.html CSS3/jQuery创意盒子动画菜单,布布扣,bubuko.com

使用jquery实现的动画简单实例

使用jquery实现的动画简单实例:下面介绍一段利用jquery实现的动画效果,非常的简单,当然在实际项目中不可能有这么简单的应用,不过可供初学者参考一下大致的实现原理,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/"

前端编程提高之旅(十六)————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

一款基于jquery ui的动画提交表单

今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <form id="myform"> <div id="bloc_recherche_couleur"> <div id="etape0_recherche&

分享一款基于jquery的圆形动画按钮

之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: 在线预览   源码下载 实现的代码. html代码: <figure class='red'> <div class='icon'> i</div> <div class='circle'> </div> </figure> <f