devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【jQuery学习】jQuery内容文本值_jquery 定位元素内容

作者：笔触狂放9 | 2024-03-05 14:30:00

赞

踩

jquery 定位元素内容

1 普通元素内容 html()

相当于原生的innerHtml

获取内容html()

修改内容html("内容")

  1. <div>
  2.         <span>123</span>
  3.     </div>
  4.     <script>
  5.         $(function(){
  6.             console.log($("div").html());
  7.             $("div").html("456")
  8.         })
  9.     </script>

2 普通元素文本内容 text()

相当于原生中的innerText()

获取文本 text()

更改文本text("内容")

3 获取表单元素内容 val()

 案例：修改购物车小计

tips:

substr(1)：截取第一个字符后面的字符串

toFixed(n)：保留n位小数

parents("选择器")：选择祖先中对应的元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="jquery.min.js"></script>
  9.     <style>
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.             
  14.         }
  15.         body{
  16.             font-size: 12px;
  17.             color: #666;
  18.         }
  19.         a{
  20.             text-decoration: none;
  21.             color: #666;
  22.         }
  23.         em{
  24.             font-style: normal;
  25.         }
  26.         .cart-warp{
  27.             width: 1200px;
  28.             margin: 100px auto;
  29.             font-size: 12px;
  30.         }
  31.         .cart-thead{
  32.             height: 32px;
  33.             margin: 5px 0 10px;
  34.             padding: 5px 0;
  35.             line-height: 32px;
  36.             background-color: #f3f3f3;
  37.             border: 1px solid #e9e9e9;
  38.             border-top: 0;
  39.             /* 清除浮动 */
  40.             overflow: hidden;
  41.         }
  42.         .cart-thead>div,
  43.         .cart-item>div{
  44.             float: left;
  45.         }
  46.         .cart-item{
  47.             margin: 15px 0;
  48.             padding-top: 14px;
  49.             height: 160px;
  50.             /* padding-bottom: 20px; */
  51.             border-style: solid;
  52.             border-width: 2px 1px 1px;
  53.             border-color: #aaa #f1f1f1 #f1f1f1;
  54.             overflow: hidden;
  55.         }
  56.         .t-checkbox,
  57.         .p-checkbox
  58.         {
  59.             width: 122px;
  60.             height: 18px;
  61.             line-height: 18px;
  62.             padding-top: 7px;
  63.             padding-left: 11px;
  64.         }
  65.         .t-good{
  66.             width: 400px;
  67.         }
  68.         .t-price{
  69.             width: 120px;
  70.             padding-right: 40px;
  71.             text-align: right;
  72.         }
  73.         .t-num{
  74.             width: 150px;
  75.             text-align: center;
  76.         }
  77.         .t-sum{
  78.             width: 100px;
  79.             text-align: right;
  80.         }
  81.         .t-action{
  82.             width: 130px;
  83.             text-align: right;
  84.         }
  85.         .p-checkbox{
  86.             width: 61px;
  87.         }
  88.         .p-img{
  89.             float: left;
  90.             border: 1px solid #ccc;
  91.         }
  92.         .p-msg{
  93.             float: left;
  94.             width: 210px;
  95.             margin: 0 10px;
  96.         }
  97.         .p-goods{
  98.             width: 565px;
  99.             padding-top: 10px;
  100.         }
  101.         .p-price{
  102.             width: 110px;
  103.         }
  104.         .p-num{
  105.             width: 170px;
  106.            
  107.         }
  108.         .p-num .decrement,
  109.         .p-num .increment{
  110.             float: left;
  111.             width: 16px;
  112.             height: 18px;
  113.             line-height: 18px;
  114.             text-align: center;
  115.             border: 1px solid #cacbcb;
  116.             background-color: #fff;
  117.             color: #666;
  118.  
  119.         }
  120.         .p-num .itxt{
  121.             float: left;
  122.             width: 42px;
  123.             height: 18px;
  124.             line-height: 18px;
  125.             text-align: center;
  126.             border: 1px solid #cacbcb;
  127.             /* appearance: none; */
  128.         }
  129.         .p-sum{
  130.             width: 145px;
  131.             font-weight: 700;
  132.         }
  133.         .cart-floatbar{
  134.             height: 50px;
  135.             line-height: 50px;
  136.             border: 1px solid #f0f0f0;
  137.         }
  138.         .select-all{
  139.             float: left;
  140.             height: 18px;
  141.             line-height: 18px;
  142.             padding: 16px 0 16px 9px;
  143.         }
  144.         .operation{
  145.             float: left;
  146.             width: 200px;
  147.             margin-left: 40px;
  148.         }
  149.         .clear-all{
  150.             font-weight: 700;
  151.             margin: 0 20px;
  152.         }
  153.         .toolbar-right{
  154.             float: right;
  155.         }
  156.         .toolbar-right>div{
  157.             float: left;
  158.         }
  159.         .toolbar-right em{
  160.             font-weight: 700;
  161.             color: red;
  162.         }
  163.         .price-sum em{
  164.             font-size: 18px;
  165.         }
  166.         .toolbar-right .price-sum{
  167.             height: 50px;
  168.             margin: 0 15px;
  169.         }
  170.         .toolbar-right .btn-area{
  171.             width: 94px;
  172.             height: 52px;
  173.             line-height: 52px;
  174.             text-align: center;
  175.             font-size: 20px;
  176.             font-weight: 700;
  177.             background-color: red;
  178.             color: #fff;
  179.         }
  180.         .check-cart-item{
  181.             background-color: #fff4e8;
  182.         }
  183.     </style>
  184.     <script>
  185.         $(function(){
  186.             $(".checkAll").change(function(){
  187.                 $(".j-checkbox, .checkAll").prop("checked", $(this).prop("checked"));
  188.  
  189.             })
  190.             $(".j-checkbox").change(function(){
  191.                 if($(".j-checkbox:checked").length===$(".j-checkbox").length){
  192.                     $(".checkAll").prop("checked", true)
  193.                 }else{
  194.                     $(".checkAll").prop("checked", false)
  195.                 }
  196.             })
  197.             $(".increment").click(function(){
  198.                 var n = $(this).siblings(".itxt").val();
  199.                 n++;
  200.                 $(this).siblings(".itxt").val(n);
  201.                 var price = $(this).parents(".p-num").siblings(".p-price").text();
  202.                 price = price.substr(1);
  203.                 $(this).parents(".p-num").siblings(".p-sum").text("￥"+(price*n).toFixed(2))
  204.             })
  205.             $(".decrement").click(function(){
  206.                 var n = $(this).siblings(".itxt").val();
  207.                 if(n > 1){
  208.                     n--;
  209.                     $(this).siblings(".itxt").val(n);
  210.                     var price = $(this).parent().parent().siblings(".p-price").text();
  211.                     price = price.substr(1);
  212.                     $(this).parent().parent().siblings(".p-sum").text("￥"+(price*n).toFixed(2))
  213.                 }
  214.                 
  215.             })
  216.  
  217.             $(".itxt").change(function(){
  218.                 var n = $(this).val();
  219.                 var price = $(this).parents(".p-num").siblings(".p-price").text();
  220.                 price = price.substr(1);
  221.                 $(this).parents(".p-num").siblings(".p-sum").text("￥"+(price*n).toFixed(2))
  222.  
  223.             })
  224.         })
  225.     </script>
  226. </head>
  227. <body>
  228.     <div class="cart-warp">
  229.         <!-- 头部全选模块 -->
  230.         <div class="cart-thead">
  231.             <div class="t-checkbox">
  232.                 <input type="checkbox" name="" id="" class="checkAll">全选
  233.             </div>
  234.             <div class="t-good">商品</div>
  235.             <div class="t-price">单价</div>
  236.             <div class="t-num">数量</div>
  237.             <div class="t-sum">小计</div>
  238.             <div class="t-action">操作</div>
  239.         </div>
  240.         <!-- 商品详细模块 -->
  241.         <div class="cart-item-list">
  242.             <div class="cart-item check-cart-item">
  243.                 <div class="p-checkbox">
  244.                     <input type="checkbox" name="" id="" class="j-checkbox">
  245.                 </div>
  246.                 <div class="p-goods">
  247.                     <div class="p-img">
  248.                         <img src="images/p1.jpg" alt="">
  249.                     </div>
  250.                     <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
  251.                 </div>
  252.                 <div class="p-price">￥12.60</div>
  253.                 <div class="p-num">
  254.                     <div class="quantity-form">
  255.                         <a href="javascript:;" class="decrement">-</a>
  256.                         <input type="text" class="itxt" value="1">
  257.                         <a href="javascript:;" class="increment">+</a>
  258.                     </div>
  259.                 </div>
  260.                 <div class="p-sum">￥12.60</div>
  261.                 <div class="p-action">
  262.                     <a href="javascript:;">删除</a>
  263.                 </div>
  264.             </div>
  265.             <div class="cart-item">
  266.                 <div class="p-checkbox">
  267.                     <input type="checkbox" name="" id="" class="j-checkbox">
  268.                 </div>
  269.                 <div class="p-goods">
  270.                     <div class="p-img">
  271.                         <img src="images/p2.jpg" alt="">
  272.                     </div>
  273.                     <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
  274.                 </div>
  275.                 <div class="p-price">￥12.60</div>
  276.                 <div class="p-num">
  277.                     <div class="quantity-form">
  278.                         <a href="javascript:;" class="decrement">-</a>
  279.                         <input type="text" class="itxt" value="1">
  280.                         <a href="javascript:;" class="increment">+</a>
  281.                     </div>
  282.                 </div>
  283.                 <div class="p-sum">￥12.60</div>
  284.                 <div class="p-action">
  285.                     <a href="javascript:;">删除</a>
  286.                 </div>
  287.             </div>
  288.             <div class="cart-item">
  289.                 <div class="p-checkbox">
  290.                     <input type="checkbox" name="" id="" class="j-checkbox">
  291.                 </div>
  292.                 <div class="p-goods">
  293.                     <div class="p-img">
  294.                         <img src="images/p3.jpg" alt="">
  295.                     </div>
  296.                     <div class="p-msg"></div>
  297.                 </div>
  298.                 <div class="p-price">￥12.60</div>
  299.                 <div class="p-num">
  300.                     <div class="quantity-form">
  301.                         <a href="javascript:;" class="decrement">-</a>
  302.                         <input type="text" class="itxt" value="1">
  303.                         <a href="javascript:;" class="increment">+</a>
  304.                     </div>
  305.                 </div>
  306.                 <div class="p-sum">￥12.60</div>
  307.                 <div class="p-action">
  308.                     <a href="javascript:;">删除</a>
  309.                 </div>
  310.             </div>
  311.         </div>
  312.         <!-- 结算模块 -->
  313.         <div class="cart-floatbar">
  314.             <div class="select-all">
  315.                 <input type="checkbox" name="" id="" class="checkAll">全选
  316.             </div>
  317.             <div class="operation">
  318.                 <a href="javascript:;" class="remove-batch">删除选中的商品</a>
  319.                 <a href="javascript:;" class="clear-all">删除购物车</a>
  320.             </div>
  321.             <div class="toolbar-right">
  322.                 <div class="amount-sum">已经选<em>1</em>件商品</div>
  323.                 <div class="price-sum">总价：<em>￥12.60</em></div>
  324.                 <div class="btn-area">去结算</div>
  325.             </div>
  326.  
  327.         </div>
  328.     </div>
  329. </body>
  330. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/191704
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号