jquery里怎么加入html源代码

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery里怎么加入html源代码相关的知识，希望对你有一定的参考价值。

你搞反了吧。源码里面加jquery。jquery是嵌入式语言。html才是根本，当然是可以通过jquery输出html但是也是在html写的jquery再输出的。至于用jquery输出html，

document.write("你要输出的内容")

 参考技术A 使用append prepend after before这些方法就可以了

jquery 实现加入购物车功能

请问怎么实现点击加入购物车上方我的购物车数字增加 有动画效果 并且选择哪个产品就出现那个产品的信息 。求详细代码 所有分都给大神
小弟新手 对这么很陌生 请各位不吝赐教！！！谢谢

参考以下代码：

注意需要导入jquery.js.

<!DOCTYPE html>  
<html>  
  <head>  
    <title>购物车----jQuery</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 type="text/javascript" src="./js/jquery.js"></script>  
    <script type="text/javascript">  
      function add_shoppingcart(btn)//将btn(dom)转换为jQuery对象  
        //先获取商品名字和单价还有库存以备后面使用  
        var $tds = $(btn).parent().siblings();  
        //$tds.eq(0)是jQuery对象  $tds[0]是DOM对象  
        var name = $tds.eq(0).html();//string  
        var price = $tds.eq(1).html();//string  
        var stock = $tds.eq(3).html();//string  
          
        //查看库存是否还有<=0  
        if(stock <= 0)  
          return;     
          
          
        //无论购物车中是否有该商品,库存都要-1  
        $tds.eq(3).html(--stock);  
          
        //在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行  
        var $trs = $("#goods>tr");  
        for(var i=0;i<$trs.length;i++)  
          var $gtds = $trs.eq(i).children();  
          var gName = $gtds.eq(0).html();  
          if(name == gName)//若存在  
            var num = parseInt($gtds.eq(2).children().eq(1).val());  
            $gtds.eq(2).children().eq(1).val(++num);//数量+1  
            //金额从新计算  
            $gtds.eq(3).html(price*num);  
            return;//后面代码不再执行  
            
          
        //若不存在,创建后追加  
        var li =  
          "<tr>"+  
            "<td>"+name+"</td>"+  
            "<td>"+price+"</td>"+  
            "<td align=\'center\'>"+  
              "<input type=\'button\' value=\'-\' onclick=\'decrease(this);\'/> "+  
              "<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\' onclick=\'del(this);\'/>"+  
            "</td>"+  
          "</tr>";  
        //追加到#goods后面  
        $("#goods").append($(li));  
          
        //总计功能  
        total();  
        
        
      //辅助方法--单击购物车中的"+"  "-"  "x"按钮是找到相关商品所在td,以jQuery对象返回  
      function findStock(btn)  
        var name = $(btn).parent().siblings().eq(0).html();//获取商品名字  
        //注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr  
        var $trs = $("#table1>tbody>tr:gt(0)");  
        for(var i=0;i<$trs.length;i++)  
          var fName = $trs.eq(i).children().eq(0).html();  
          if(name == fName)//找到匹配的商品  
            return $trs.eq(i).children().eq(3);  
            
          
        
        
      //增加"+"功能  
      function increase(btn)  
        //获取该商品库存看是否<=0  
        var $stock = findStock(btn);  
        var stock = $stock.html();  
        if(stock <= 0)  
          return;  
          
        //库存-1    
        $stock.html(--stock);  
        //购物车数据改变  
        var $td = $(btn).prev();  
        var num = parseInt($td.val());//number  
        //num此时为number类型(在计算时会自动转换为number类型)  
        $td.val(++num);  
        //获取单价,再加计算前要先转换为number类型  
        var price = parseInt($(btn).parent().prev().html());  
        $(btn).parent().next().html(num*price);  
          
        //总计功能  
        total();  
        
        
      //减少"-"功能  
      function decrease(btn)  
        //该商品数量=1时候不能再减少  
        var num = parseInt($(btn).next().val());  
        if(num <= 1)  
          return;     
          
        var $stock = findStock(btn);  
        //库存+1  
        var stock = $stock.html();  
        $stock.html(++stock);  
        //商品数量-1  
        $(btn).next().val(--num);  
        //从新计算金额  
        var price = parseInt($(btn).parent().prev().html());  
        $(btn).parent().next().html(price*num);  
          
        //总计功能  
        total();  
        
        
      //"x"删除按钮功能  
      function del(btn)  
        //将商品数量归还库存  
        var $stock = findStock(btn);  
        var stock = parseInt($stock.html());  
        var num = parseInt($(btn).parent().prev().prev().children().eq(1).val());  
        $stock.html(num + stock);  
        //清空改行商品列表  
        $(btn).parent().parent().remove();  
          
        //总计功能  
        total();  
        
    //总计功能  
    function total()  
      //获取所有购物车中的trs  
      var $trs = $("#goods tr");  
      var amount = 0;  
      for(var i=0;i<$trs.length;i++)  
        var money = parseInt($trs.eq(i).children().eq(3).html());  
        amount += money;  
        
      //写入总计栏  
      $("#total").html(amount);  
      
    </script>  
  </head>  
  <body>  
    <h1>真划算</h1>  
    <table id="table1">  
      <tr>  
        <th>商品</th>  
        <th>单价(元)</th>  
        <th>颜色</th>  
        <th>库存</th>  
        <th>好评率</th>  
        <th>操作</th>  
      </tr>     
      <tr>  
        <td>罗技M185鼠标</td>  
        <td>80</td>  
        <td>黑色</td>  
        <td>5</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>

最终效果图:

 参考技术A 站长素材里面搜索“购物车”有好多这样的效果。

http://sc.chinaz.com/jiaobendemo.aspx?downloadid=131125151751482

以上是关于jquery里怎么加入html源代码的主要内容，如果未能解决你的问题，请参考以下文章

jquery 实现加入购物车功能

如何用jQuery动态在某个DIV里写入HTML代码

加入购物车 jquery怎么实现

js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果，即图片慢慢放大，超出div的部分不显示

jquery easyUI 的datagrid在html里能正常加载数据，但同样的代码，在asp.net里不能正常加载，这是怎么回事

在html里怎么样导入外部html文件