资源

Question

  <div custom-attribute="somevalue"></div>
  var x = document.getElementsByTagName("DIV")[0].getAttribute("custom-attribute");
  console.log(x); //somevalue

现在我知道它的第0个div，但它可以在任何随机div上。

是否有一个与上面相同的Jquery来获取元素属性的值？

Answer 1

使用.attr()功能。

var x = $("div").attr("custom-attribute");
console.log(x);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div custom-attribute="somevalue"></div>

资源

.attr()

Answer 2

JQuery有一个.attr方法可以做你想做的事情：

// Old way:
var x = document.getElementsByTagName("DIV")[0].getAttribute("custom-attribute");
console.log(x); //somevalue

// JQuery way:
var y = $("div").attr("custom-attribute");
console.log(y) // somevalue

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div custom-attribute="somevalue"></div>

Answer 3

JQuery选择器使用与CSS选择器完全相同的语法，因此使用 attribute selector 找到元素，然后使用 .attr() 方法提取属性值。

var x = $("div[custom-attribute]");
console.log(x.attr("custom-attribute")); //somevalue

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div custom-attribute="somevalue"></div>

但是，要知道自定义属性是无效的HTML，除非它们采用data-customName的形式，在这种情况下，您仍然以相同的方式选择元素，但是您可以访问data-*属性使用 JQuery's .data() method ，如下所示：

var x = $("div[data-custom-attribute]");
console.log(x.data("customAttribute")); //somevalue

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-custom-attribute="somevalue"></div>

而且，仅供参考之用，您的原始vanilla JavaScript代码首先应该非常相似，因为.getElementsByTagName()将扫描整个文档，当您需要时，您不希望这样做只寻找一个元素。此外，它返回一个阻碍性能的“实时”节点列表。

var x = document.querySelector("div[data-custom-attribute]");
console.log(x.dataset.customAttribute); //somevalue

<div data-custom-attribute="somevalue"></div>

Answer 4

等同于document.getElementByTagName("name")的是$("name")。

将结果与[i]建立索引的等价物是.eq(i)。

相当于.getAttribute("attr")是`.attr（＆＃34; attr＆＃34;）。

所以整个事情是：

var x = $("div").eq(0).attr("custom-attribute");

jquery相当于在html元素上查找某个属性的值

4 个答案:

资源