当前位置: 首页 > news >正文

jQuery中.text() 和 .val()辨析

在jQuery中,.text().val() 是两个用于操作DOM元素内容的常用方法,但它们有不同的用途和适用的元素类型。

.text()

.text() 方法用于获取或设置匹配元素的文本内容。适用于以下元素:

  • 普通HTML元素(如<div><span><p>等)

使用.text()时,它会获取或设置匹配元素的所有子节点的文本内容,包括后代元素的文本。

示例

// 获取元素的文本内容
var text = $('#elementId').text();// 设置元素的文本内容
$('#elementId').text('新的文本内容');

.val()

.val() 方法用于获取或设置表单元素的值。适用于以下表单元素:

  • 输入框(如<input><textarea><select>等)

使用.val()时,它会获取或设置表单元素的当前值。

示例

// 获取输入框的值
var value = $('input[name="inputName"]').val();// 设置输入框的值
$('input[name="inputName"]').val('新的输入值');

区别和适用场景

  • text():适用于普通的HTML元素,用于操作其文本内容。
  • val():专门用于表单元素(如输入框、下拉菜单等),用于操作其值。

错误用法

$('input[name="authorName"]').text(author_name); 是错误用法,因为<input>元素是一个表单元素,它的内容应该使用.val()来设置,而不是.text()。使用.text()<input>元素没有效果,因为.text()不会对表单元素的值进行操作。

正确用法

// 设置输入框的值
$('input[name="authorName"]').val(author_name);

错误用法

// 尝试设置输入框的文本内容(无效)
$('input[name="authorName"]').text(author_name);

结论

  • 如果你操作的是表单元素的值(如<input>),请使用.val()
  • 如果你操作的是普通HTML元素的文本内容,请使用.text()

确保根据元素类型选择合适的方法,以避免代码无效或出现错误。

相关文章:

  • 从“野人饭”走红,探索品牌户外化营销趋势丨小红书内容分析
  • 【js判断机型】
  • ubuntu22.04禁止自动休眠的几种方式
  • JUnit 5学习笔记
  • Android 断点续传进阶之多线程下载
  • 资源宝库网站!人人必备的神器!
  • 基于二进制构建Kubernetes 1.28 高可用集群
  • cs144 LAB1 基于滑动窗口的碎片字节流重组器
  • 解决动态权限路由页面刷新空白404
  • 你不知道的MySQL备份和还原技巧,速来学习!
  • Java17 --- SpringSecurity之前后端分离处理
  • 免费AI绘画工具
  • SpringBoot整合Swagger页面如何禁止访问swagger-ui.html
  • 基于JSP的高校毕业生就业满意度调查统计系统
  • 学习周报:文献阅读+Fluent案例+Fluent相关算法学习
  • 自己简单写的 事件订阅机制
  • 【css3】浏览器内核及其兼容性
  • centos安装java运行环境jdk+tomcat
  • JavaScript设计模式之工厂模式
  • javascript数组去重/查找/插入/删除
  • Js基础知识(四) - js运行原理与机制
  • laravel 用artisan创建自己的模板
  • maya建模与骨骼动画快速实现人工鱼
  • Sass 快速入门教程
  • Spring Boot快速入门(一):Hello Spring Boot
  • vue总结
  • XML已死 ?
  • 不上全站https的网站你们就等着被恶心死吧
  • 高程读书笔记 第六章 面向对象程序设计
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 基于webpack 的 vue 多页架构
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 用 Swift 编写面向协议的视图
  • 在electron中实现跨域请求,无需更改服务器端设置
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • ​补​充​经​纬​恒​润​一​面​
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • (1)STL算法之遍历容器
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (C#)一个最简单的链表类
  • (PySpark)RDD实验实战——求商品销量排行
  • (数据大屏)(Hadoop)基于SSM框架的学院校友管理系统的设计与实现+文档
  • (学习日记)2024.03.12:UCOSIII第十四节:时基列表
  • (一) storm的集群安装与配置
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • .gitignore文件设置了忽略但不生效
  • .htaccess配置常用技巧
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET 给NuGet包添加Readme
  • .NET 中什么样的类是可使用 await 异步等待的?
  • .Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化
  • .NetCore项目nginx发布
  • .NET大文件上传知识整理
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表,包含自定义IOS对话框...