首页 > 代码库 > Unit02： jQuery事件处理 、 jQuery动画

Unit02： jQuery事件处理 、 jQuery动画

2024-09-04 12:13:26   219人阅读

　　　　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="http://www.mamicode.com/-"/>‘+
              ‘<input type="text" size="3" readonly value="http://www.mamicode.com/1"/>‘+
              ‘<input type="button" value="http://www.mamicode.com/+" onclick="increase(this);"/>‘+
            ‘</td>‘+
            ‘<td>‘+price+‘</td>‘+
            ‘<td align="center"><input type="button" value="http://www.mamicode.com/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动画


联系
我们