如何使用jQuery更改元素的title属性

我有一个表单输入元素，想要更改其title属性。这一定很容易，但是由于某种原因我找不到如何做到这一点。这是如何完成的？我应该在哪里以及如何进行搜索？

在编写任何代码之前，让我们讨论属性和属性之间的区别。属性是应用于HTML标记中元素的设置; 然后浏览器解析标记并创建各种类型的DOM对象，这些对象包含使用属性值初始化的属性。在DOM对象（例如simple）上HTMLElement，您几乎总是希望使用其属性，而不是其属性集合。

当前的最佳实践是避免使用属性，除非它们是自定义的，或者没有等效的属性来补充它。由于title确实在许多s 上都作为读/写属性存在HTMLElement，因此我们应该利用它。

您可以在此处或此处阅读有关属性和属性之间差异的更多信息。

考虑到这一点，让我们来操纵title...

在没有 jQuery 的情况下获取或设置元素的title属性

由于title是公共属性，因此可以在使用纯JavaScript支持它的任何DOM元素上进行设置：

document.getElementById('yourElementId').title = 'your new title';

检索几乎相同；这里没什么特别的：

var elementTitle = document.getElementById('yourElementId').title;

如果您是优化专家，这将是更改标题的最快方法，但是由于您希望使用jQuery：

使用jQuery（v1.6 +）获取或设置元素的title 属性

jQuery在v1.6中引入了一种新方法来获取和设置属性。要title在元素上设置属性，请使用：

$('#yourElementId').prop('title', 'your new title');

如果要检索标题，请省略第二个参数并捕获返回值：

var elementTitle = $('#yourElementId').prop('title');

查看prop()API文档 jQuery。

如果你真的不想使用属性，或者您正在使用v1.6之前的jQuery版本，则应继续阅读：

使用jQuery 获取或设置元素的title 属性（版本<1.6）

您可以使用以下代码更改title 属性：

$('#yourElementId').attr('title', 'your new title');

或使用以下方法检索它：

var elementTitle = $('#yourElementId').attr('title');

查看 jQuery 的attr()API文档。

在jquery ui模式对话框中，您需要使用以下结构：

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

我相信

$("#myElement").attr("title", "new title value")

要么

$("#myElement").prop("title", "new title value")

应该做到这一点...

我认为您可以在jQuery Docs中找到所有核心功能，尽管我讨厌这种格式。

如果您愿意，另一种选择是从jQuery对象获取DOM元素，并在其上使用标准DOM访问器：

$("#myElement")[0].title = "new title value";

正如其他人所提到的，“ jQuery方式”是使用attr（）方法。见ATTR（）API文档在这里。

jqueryTitle({
    title: 'New Title'
});

第一个标题：

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

如果您要创建一个div并尝试向其中添加一个title。

尝试

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

作为@Cᴏʀʏ答案的补充，请确保尚未在HTML元素中手动设置工具提示的标题。就我而言，由于我的JQuery函数，工具提示的span类已经具有固定的标题文本$('[data-toggle="tooltip"]').prop('title', 'your new title');不起作用。

当我在HTML span类中删除title属性时，jQuery正在运行。

所以：

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

应为：

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>