jQuery 文本屬性值

時間 2020-10-06

標籤 html this atom spa htm blog 事件 rem 字符串欄目 JQuery 简体版

原文原文鏈接

jQuery的文本屬性值常見操做有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性。html

1、jQuery內容文本值

常見操做有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性，主要針對元素的內容還有表單的值操做。this

語法atom

注意：html() 可識別標籤，text() 不識別標籤。spa

演示代碼htm

<body>
    <div>
        <span>我是內容</span>
    </div>
    <input type="text" value="請輸入內容">
    <script>
        // 1. 獲取設置元素內容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 獲取設置元素文本內容 text()
        console.log($("div").text());
        $("div").text("123");
        // 3. 獲取設置表單值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

2、案例：購物車案例模塊-增減商品數量

1.核心思路：首先聲明一個變量，當咱們點擊+號（increment），就讓這個值++，而後賦值給文本框。blog

2.注意1：只能增長本商品的數量，就是當前+號的兄弟文本框（itxt）的值。事件

3.修改表單的值是val() 方法ip

4.注意2：這個變量初始值應該是這個文本框的值，在這個值的基礎上++。要獲取表單的值rem

5.減號（decrement）思路同理，可是若是文本框的值是1，就不能再減了。字符串

// 1.增長商品數量
    $(".increment").click(function () {
        // 定義一個變量，獲取當前點擊的+號的兄弟表單的初始值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        // 點擊就讓他自加1
        n++;
        // 把這個值賦值給文本框
        $(this).siblings(".itxt").val(n);
   });
    // 2.減小商品數量
    $(".decrement").click(function () {
        // 定義一個變量，獲取當前點擊的-號的兄弟表單的初始值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
       }
        // 點擊就讓他自減1
        n--;
        // 把這個值賦值給文本框
        $(this).siblings(".itxt").val(n);
   })

3、案例：購物車案例模塊-修改商品小計

1.核心思路：每次點擊+號或者-號，根據文本框的值乘以當前商品的價格就是商品的小計

2.注意1：只能增長本商品的小計，就是當前商品的小計模塊（p-sum）

3.修改普通元素的內容是text() 方法

4.注意2：當前商品的價格，要把￥符號去掉再相乘截取字符串 substr(1)

5.parents(‘選擇器’) 能夠返回指定祖先元素

6.最後計算的結果若是想要保留2位小數經過 toFixed(2) 方法

7.用戶也能夠直接修改表單裏面的值，一樣要計算小計。用表單change事件

8.用最新的表單內的值乘以單價便可可是仍是當前商品小計

 // 2.增減商品模塊
    // (1).增長商品數量
    $(".increment").click(function () {
        // 定義一個變量，獲取當前點擊的+號的兄弟表單的初始值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        // 點擊就讓他自加1
        n++;
        // 把這個值賦值給文本框
        $(this).siblings(".itxt").val(n);

        // 3.小計模塊 
        // 把當前商品價格乘以數量(文本框的值) 賦值給當前商品的小計
        // parent() 返回最近一級父元素 parents()返回祖先元素
        // var p = $(this).parent().parent().siblings(".p-price").text();
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        // 把￥符號去掉
        p = p.substr(1);
        // console.log(p);
        // 商品小計
        // toFixed(2) 保留兩位小數
        // $(this).parent().parent().siblings(".p-sum").text('￥' + (p * n).toFixed(2));
        $(this).parents(".p-num").siblings(".p-sum").text('￥' + (p * n).toFixed(2));

   });
    // (2).減小商品數量
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
       }
        n--;
        $(this).siblings(".itxt").val(n);
        // 3.小計模塊 
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text('￥' + (p * n).toFixed(2));

   });
    // 4.用戶直接修改商品數量時 計算小計
    $(".itxt").change(function () {
        // 獲得修改後的數量
        var n = $(this).val();
        // 當前商品單價 p
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text('￥' + (p * n).toFixed(2));
   })