【jQuery学习】jQuery内容文本值

于 2022-11-10 14:12:48 发布
阅读量277 收藏
点赞数
文章标签： jquery 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53582888/article/details/127787177
版权
这篇博客介绍了jQuery中获取和修改元素内容的方法，包括html()用于操作HTML内容，text()用于处理文本内容，以及val()针对表单元素的值进行操作。通过示例代码展示了如何实现全选、修改购物车商品数量并实时更新总价等功能，这些功能在前端开发中常见且重要。
摘要由CSDN通过智能技术生成

1 普通元素内容 html()

相当于原生的innerHtml

获取内容html()

修改内容html("内容")

<div>
        <span>123</span>
    </div>
    <script>
        $(function(){
            console.log($("div").html());
            $("div").html("456")
        })
    </script>

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

相当于原生中的innerText()

获取文本 text()

更改文本text("内容")

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

 案例：修改购物车小计

tips:

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

toFixed(n)：保留n位小数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        body{
            font-size: 12px;
            color: #666;
        }
        a{
            text-decoration: none;
            color: #666;
        }
        em{
            font-style: normal;
        }
        .cart-warp{
            width: 1200px;
            margin: 100px auto;
            font-size: 12px;
        }
        .cart-thead{
            height: 32px;
            margin: 5px 0 10px;
            padding: 5px 0;
            line-height: 32px;
            background-color: #f3f3f3;
            border: 1px solid #e9e9e9;
            border-top: 0;
            /* 清除浮动 */
            overflow: hidden;
        }
        .cart-thead>div,
        .cart-item>div{
            float: left;
        }
        .cart-item{
            margin: 15px 0;
            padding-top: 14px;
            height: 160px;
            /* padding-bottom: 20px; */
            border-style: solid;
            border-width: 2px 1px 1px;
            border-color: #aaa #f1f1f1 #f1f1f1;
            overflow: hidden;
        }
        .t-checkbox,
        .p-checkbox
        {
            width: 122px;
            height: 18px;
            line-height: 18px;
            padding-top: 7px;
            padding-left: 11px;
        }
        .t-good{
            width: 400px;
        }
        .t-price{
            width: 120px;
            padding-right: 40px;
            text-align: right;
        }
        .t-num{
            width: 150px;
            text-align: center;
        }
        .t-sum{
            width: 100px;
            text-align: right;
        }
        .t-action{
            width: 130px;
            text-align: right;
        }
        .p-checkbox{
            width: 61px;
        }
        .p-img{
            float: left;
            border: 1px solid #ccc;
        }
        .p-msg{
            float: left;
            width: 210px;
            margin: 0 10px;
        }
        .p-goods{
            width: 565px;
            padding-top: 10px;
        }
        .p-price{
            width: 110px;
        }
        .p-num{
            width: 170px;
           
        }
        .p-num .decrement,
        .p-num .increment{
            float: left;
            width: 16px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border: 1px solid #cacbcb;
            background-color: #fff;
            color: #666;

        }
        .p-num .itxt{
            float: left;
            width: 42px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border: 1px solid #cacbcb;
            /* appearance: none; */
        }
        .p-sum{
            width: 145px;
            font-weight: 700;
        }
        .cart-floatbar{
            height: 50px;
            line-height: 50px;
            border: 1px solid #f0f0f0;
        }
        .select-all{
            float: left;
            height: 18px;
            line-height: 18px;
            padding: 16px 0 16px 9px;
        }
        .operation{
            float: left;
            width: 200px;
            margin-left: 40px;
        }
        .clear-all{
            font-weight: 700;
            margin: 0 20px;
        }
        .toolbar-right{
            float: right;
        }
        .toolbar-right>div{
            float: left;
        }
        .toolbar-right em{
            font-weight: 700;
            color: red;
        }
        .price-sum em{
            font-size: 18px;
        }
        .toolbar-right .price-sum{
            height: 50px;
            margin: 0 15px;
        }
        .toolbar-right .btn-area{
            width: 94px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            background-color: red;
            color: #fff;
        }
        .check-cart-item{
            background-color: #fff4e8;
        }
    </style>
    <script>
        $(function(){
            $(".checkAll").change(function(){
                $(".j-checkbox, .checkAll").prop("checked", $(this).prop("checked"));

            })
            $(".j-checkbox").change(function(){
                if($(".j-checkbox:checked").length===$(".j-checkbox").length){
                    $(".checkAll").prop("checked", true)
                }else{
                    $(".checkAll").prop("checked", false)
                }
            })
            $(".increment").click(function(){
                var n = $(this).siblings(".itxt").val();
                n++;
                $(this).siblings(".itxt").val(n);
                var price = $(this).parents(".p-num").siblings(".p-price").text();
                price = price.substr(1);
                $(this).parents(".p-num").siblings(".p-sum").text("￥"+(price*n).toFixed(2))
            })
            $(".decrement").click(function(){
                var n = $(this).siblings(".itxt").val();
                if(n > 1){
                    n--;
                    $(this).siblings(".itxt").val(n);
                    var price = $(this).parent().parent().siblings(".p-price").text();
                    price = price.substr(1);
                    $(this).parent().parent().siblings(".p-sum").text("￥"+(price*n).toFixed(2))
                }
                
            })

            $(".itxt").change(function(){
                var n = $(this).val();
                var price = $(this).parents(".p-num").siblings(".p-price").text();
                price = price.substr(1);
                $(this).parents(".p-num").siblings(".p-sum").text("￥"+(price*n).toFixed(2))

            })
        })
    </script>
</head>
<body>
    <div class="cart-warp">
        <!-- 头部全选模块 -->
        <div class="cart-thead">
            <div class="t-checkbox">
                <input type="checkbox" name="" id="" class="checkAll">全选
            </div>
            <div class="t-good">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
        </div>
        <!-- 商品详细模块 -->
        <div class="cart-item-list">
            <div class="cart-item check-cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name="" id="" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="images/p1.jpg" alt="">
                    </div>
                    <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                </div>
                <div class="p-price">￥12.60</div>
                <div class="p-num">
                    <div class="quantity-form">
                        <a href="javascript:;" class="decrement">-</a>
                        <input type="text" class="itxt" value="1">
                        <a href="javascript:;" class="increment">+</a>
                    </div>
                </div>
                <div class="p-sum">￥12.60</div>
                <div class="p-action">
                    <a href="javascript:;">删除</a>
                </div>
            </div>
            <div class="cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name="" id="" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="images/p2.jpg" alt="">
                    </div>
                    <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                </div>
                <div class="p-price">￥12.60</div>
                <div class="p-num">
                    <div class="quantity-form">
                        <a href="javascript:;" class="decrement">-</a>
                        <input type="text" class="itxt" value="1">
                        <a href="javascript:;" class="increment">+</a>
                    </div>
                </div>
                <div class="p-sum">￥12.60</div>
                <div class="p-action">
                    <a href="javascript:;">删除</a>
                </div>
            </div>
            <div class="cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name="" id="" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="images/p3.jpg" alt="">
                    </div>
                    <div class="p-msg"></div>
                </div>
                <div class="p-price">￥12.60</div>
                <div class="p-num">
                    <div class="quantity-form">
                        <a href="javascript:;" class="decrement">-</a>
                        <input type="text" class="itxt" value="1">
                        <a href="javascript:;" class="increment">+</a>
                    </div>
                </div>
                <div class="p-sum">￥12.60</div>
                <div class="p-action">
                    <a href="javascript:;">删除</a>
                </div>
            </div>
        </div>
        <!-- 结算模块 -->
        <div class="cart-floatbar">
            <div class="select-all">
                <input type="checkbox" name="" id="" class="checkAll">全选
            </div>
            <div class="operation">
                <a href="javascript:;" class="remove-batch">删除选中的商品</a>
                <a href="javascript:;" class="clear-all">删除购物车</a>
            </div>
            <div class="toolbar-right">
                <div class="amount-sum">已经选<em>1</em>件商品</div>
                <div class="price-sum">总价：<em>￥12.60</em></div>
                <div class="btn-area">去结算</div>
            </div>

        </div>
    </div>
</body>
</html>

阿大的冰棒
关注
jQuery实现小米购物车功能案例
LY_code的博客
04-26 3965
效果图：修改：在购物车显示数量一栏没有文本居中（只需添加两步）：step1：在新增的div中的input增加一个类"&lt;input type='text' size='3' readonly value='1' class='inputTextCenter'/&gt; "+step2：在CSS样式为类添加样式.inputTextCenter{ text-align: center; }...
jQuery取得select选择的文本与值的示例
10-26
使用jQuery可以方便地获取或设置select元素中的选中项的文本或值。本文将详细介绍如何使用jQuery来取得select元素的选择项的文本与值。 首先，获取select元素选中的文本（text）可以使用以下方式： ```javascript ...
jq购物车案例
MscdnTjc的博客
08-05 1057
文章目录 前言 购物车案例操作步骤 1.画页面 2.设置css样式 3.引入jq文件 4.设置jq样式 总结 前言 提示：在逛淘宝，京东网站中，我们会见到很多的购物车项目，接下来我就通过jq代码来实现一个简单的购物车案列。 提示：以下是本篇文章正文内容，下面案例可供参考 操作步骤 1.先画出简单的页面 页面样式 <table> <thead> <tr> .
jquery购物车案例
weixin_43849543的博客
05-03 3830
实现功能： 购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景 1.购物车的商品全选、计算商品总额 2.全不选 3.增减商品数量、修改商品小计、选中商品添加背景 4.删除商品 删除后： 5.删除所选商品 删除后： 6.清空购物车 清空后： 代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
jQuery购物车案例
weixin_56665165的博客
05-06 744
JQuery购物车案 全选模块 $('.checkall').change(function(){ //console.log($(this).prop("checked")); $('.j-checkbox, .checkall').prop("checked",$(this).prop("checked")); if($(this).prop("checked")){ $('.cart-item').addClass("check-
JQuery 购物车案例
qq_29691213的博客
07-08 756
本文介绍用JQuery实现购物车案例相关功能 界面如下 主要功能为： 1.单选全选按钮 当单选按钮全选中时全选按钮也被选中，选中商品高亮效果 2.商品数量++ -- 功能，商品数量输入框功能 删除商品功能。 3.单个商品小计，总商品数量计算，总价计算。 4.清空购物车及删除选中商品。 一.全选功能 //1 全选功能 $('.checkall').change(function () { var check = $(this).prop('checke
jquery 学习之二 属性 文本与值(text,val)
01-19
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 Get the text contents of all matched elements. The result is a string that contains the combined text contents of all ...
jQuery 改变P标签文本值方法
10-18
通过本篇内容，我们了解了使用jQuery来改变P标签文本值的具体方法。掌握这些操作可以让我们在Web页面开发中，轻松地实现内容的动态变化，从而丰富用户的交互体验。希望这些知识点能够对你在前端开发过程中有所启发和...
JQuery获取与设置HTML元素的内容或文本的实现代码
12-09
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括获取和设置HTML元素的内容或文本。在本文中，我们将深入探讨如何使用jQuery的`html()`和`text()`方法来实现这些功能。 首先，我们...
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
10-19
本文将介绍如何使用jQuery库在HTML文档中实现对文本的搜索，并将搜索到的相关内容高亮显示出来。这个功能在许多项目中都有应用，例如客户信息管理系统、新闻网站、商品展示页面等。 首先，我们需要准备HTML页面结构...
前端：jQuery,购物车案例
03-28
实现步骤： (1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 (5)点击每个全选按钮将所有输入框都选中 (6)点击底部删除按钮删除选中的li (7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
jQuery实现购物车表单自动结算效果实例
12-08
本文实例讲述了jQuery实现购物车表单自动结算效果。分享给大家供大家参考。具体如下： 这里jQuery实现购物车表单自动结算，只要用户把所购商品的数量输入进去，就可以适时计算出商品总额，金额+运费，类似淘宝的购物车结算功能，计算过程是适时的，用jquery实现了Ajax不刷新网页就计算的功能，做购物类网站的或许可以用上这个例子。 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
JQuery实战购物车结算
11-26
用JQuery写的购物车结算实战案例，多个实战案例参考：http://blog.csdn.net/qq_19558705/article/details/49851879
jQuery实现购物车功能的案例
weixin_45658984的博客
02-28 3961
用jquery写了一个购物车的案例 功能如下 1,全选按钮和单个复选框的功能 2,商品数量的加减 3,单个商品总价随着商品数量的增减变化 4,实现了商品总数的变化 5,实现所有商品价钱之和随着商品的件数变化而变化 6,添加了单个商品删除功能 7,添加了清空购物车功能 下面是代码展示 <body> <div class="box"> <div c...
jquery - 购物车列表实例
majunzhu的博客
05-05 1067
实例1----淘宝列表问题1：隔行变色处理因为后面删除行后，要再次调用，所以将其封装为函数。处理方式一：奇数偶数行分别加背景色。$("#taobao_tabletr:gt(0):odd").css("background"，"#066"...
购物车案例(jquery案例)
最新发布
qq_46516788的博客
10-31 501
jquery的一些简单操作
jQuery对元素内容操作
iteye_5722的博客
04-02 295
jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。 元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和HTML内容。 那么什么是元素的文本内容和HTML内容？通过下面这段来说明。 &lt;div&gt;       &lt;p&gt;测试内容&lt;/p&gt;...
JQ点名器案例、购物车选择商品(全选，单选)
HeDashuaithan的博客
01-05 311
点名器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点名器</title> </head> <body> <h3>TongBaiShan's name-list</h3> <div> <h4>name-list</h4> <p>&lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值