jQuery 文本属性值
时间:2022-07-26
本文章向大家介绍jQuery 文本属性值,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
一、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.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。 2.注意1: 只能增加本商品的数量, 就是当前+号的兄弟文本框(itxt)的值。 3.修改表单的值是val() 方法 4.注意2: 这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值 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);
})
三、 案例:购物车案例模块-修改商品小计
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));
})
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android处理时间各种方法汇总
- Android TextView Marquee的应用实例详解
- Android毛玻璃背景效果简单实现代码
- ClickHouse和他的朋友们(3)MySQL Protocol和Write调用栈
- ubuntu安装多个版本的CUDA并随时切换
- 如何在Ubuntu 18.04(实体机)上配置OpenWRT的开发环境
- Android 组合控件实现布局的复用的方法
- Android编程实现播放音频的方法示例
- 使用VSCode的Remote-SSH连接Linux进行远程开发
- Android ListView之EfficientAdapte的使用详解
- JavaScript:ECMAScript 2020中的新增功能
- Android编程实现播放视频的方法示例
- Android开发之RadioGroup的简单使用与监听示例
- Android 根据手势顶部View自动展示与隐藏效果
- Vue 3 如何安装