js中的text / value / nodeValue各特性(方法)有啥区别??

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的text / value / nodeValue各特性(方法)有啥区别??相关的知识,希望对你有一定的参考价值。

这有什么区别啊.分别那里对象可以调用这些特性呢??

一般来说TEXT属性基本是文本框,文本域的值value一般对应的是INPUT系列的值nodevalue一般是节点的值,比如<td>hjkh</td>获得的就是HJKH 参考技术A text返回标签的文本内容
value一般用于返回input的输入值
nodeValue 属性设置或返回指定节点的节点值。

216 jQuery 文本属性值:html() text() val()

jQuery的文本属性值常见操作有三种:html() 、text() 、 val() ,分别对应JS中的 innerHTML 、innerText 和 value 属性。

1.2.1 jQuery内容文本值

​ 常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性,主要针对元素的内容还有表单的值操作。

语法

​ 注意:html() 可识别标签,text() 不识别标签。

演示代码

<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>

1.2.2 案例:购物车案例模块-增减商品数量

1.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
2.注意1: 只能增加本商品的数量, 就是当前+号的兄弟文本框(itxt)的值。
3.修改表单的值是val() 方法
4.注意2: 这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值
5.减号(decrement)思路同理,但是如果文本框的值是1,就不能再减了。

​ 代码实现略。(详情参考源代码)

--

1.2.3. 案例:购物车案例模块-修改商品小计

1.核心思路:每次点击+号或者-号,根据文本框的值 乘以 当前商品的价格 就是 商品的小计
2.注意1: 只能增加本商品的小计, 就是当前商品的小计模块(p-sum)
3.修改普通元素的内容是text() 方法
4.注意2: 当前商品的价格,要把¥符号去掉再相乘 截取字符串 substr(1)
5.parents(‘选择器’) :可以返回指定祖先元素 $(this).parents(".p-num").siblings(".p-price").html();
6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
7.用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件
8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

​ 代码实现略。(详情参考源代码)

以上是关于js中的text / value / nodeValue各特性(方法)有啥区别??的主要内容,如果未能解决你的问题,请参考以下文章

JS 正则表达式:如 <input type="text" onkeyup="this.value=this.value.replace(/\D&#

js中怎样获取<tags:treeselect/>中value的值

代码是啥意思<script type="text/javascript" src="js/Mobile.js"></s

js只能输入正整数,不能输入小数点,以及不能已0开头?

js操作对象和数组对象 取key/value

JS~~!!!! /[^\d]/g 是啥意思啊