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

Question

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

Answer 1

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

目前的最佳做法是避免使用属性，除非它们是自定义的，或者没有相应的属性来补充它。由于title确实在许多HTMLElement上作为读/写属性存在，我们应该利用它。

您可以详细了解属性和属性here或here之间的区别。

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

获取或设置元素的title属性，不用 jQuery

由于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');

查看jQuery的prop() API documentation。

如果您确实不想使用属性，或者您在v1.6之前使用的是jQuery版本，那么您应该继续阅读：

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

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

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

或者使用以下方法检索它：

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

查看jQuery的attr() API documentation。

Answer 2

在jquery ui模式对话框中，您需要使用此构造：

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

Answer 3

我相信

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

或

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

应该做的伎俩...

我认为你可以找到jQuery Docs中的所有核心功能，虽然我讨厌格式化。

Answer 4

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

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

其他人提到的“jQuery方式”是使用attr（）方法。请参阅attr（）here的API文档。

Answer 5

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

获得第一个标题：

jqueryTitle('destroy');

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

Answer 6

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

尝试

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

Answer 7

作为@Cᴏʀʏ答案的补充，请确保尚未在HTML元素中手动设置工具提示的标题。在我的情况下，工具提示的span类已经具有固定的标题文本，因此我的JQuery函数$('[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>