jQuery数据与Attr?

2020/09/25 05:21 · javascript ·  · 0评论

使用之间$.data$.attr使用时的用法有何区别data-someAttribute

我的理解是,$.data它存储在jQuery的内部$.cache,而不是DOM。因此,如果要$.cache用于数据存储,则应使用$.data如果要添加HTML5数据属性,则应使用$.attr("data-attribute", "myCoolValue")

如果要将数据从服务器传递到DOM元素,则应在该元素上设置数据:

<a id="foo" data-foo="bar" href="#">foo!</a>

然后可以.data()在jQuery中使用访问数据

console.log( $('#foo').data('foo') );
//outputs "bar"

但是,当您使用数据在jQuery中的DOM节点上存储数据时,变量将存储在node 对象上这是为了容纳复杂的对象和引用,因为将数据存储在节点元素上作为属性将仅容纳字符串值。

从上面继续我的示例:

$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

同样,数据属性的命名约定也有一些隐藏的“陷阱”:

HTML:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

JS:

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

连字符的键仍然可以使用:

HTML:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

JS:

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

但是,返回的对象.data()将没有设置连字符的键:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

因此,我建议避免在javascript中使用连字符键。

对于HTML,请继续使用连字符形式。HTML属性应该得到ASCII-小写自动,所以<div data-foobar></div><DIV DATA-FOOBAR></DIV><dIv DaTa-FoObAr></DiV>认为被视为是相同的,但最好的相容性下壳体形式应是优选的。

.data()如果该值匹配可识别的模式,则方法还将执行一些基本的自动广播:

HTML:

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

JS:

$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

这种自动广播功能对于实例化小部件和插件非常方便:

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

如果绝对必须具有原始值作为字符串,则需要使用.attr()

HTML:

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

JS:

$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

这是一个人为的例子。为了存储颜色值,我曾经使用数字十六进制表示法(即0xABC123),但值得注意的是,在1.7.2之前的jQuery版本中无法正确解析十六进制,并且Number从jQuery 1.8 rc 1起不再将其解析为a

jQuery 1.8 rc 1更改了自动广播的行为之前,任何有效表示的格式Number都将转换为Number现在,只有数值表示形式保持不变时,才会自动广播数值。最好用一个例子说明。

HTML:

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

JS:

                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

如果计划使用其他数字语法访问数字值,请确保将值强制转换为Number第一个,例如使用一元运算+符。

JS(续):

+$('#foo').data('hex'); // 1000

两者之间的主要区别在于存储位置和访问方式。

$.fn.attr 将信息直接存储在元素中的属性中,这些属性在检查时可以公开看到,也可以从元素的本机API获得。

$.fn.data将信息存储在一个可笑的地方。它位于称为局部变量的封闭data_user实例的局部变量上无法从jQuery外部直接访问此变量。

数据集 attr()

  • 可从 $(element).attr('data-name')
  • 从访问element.getAttribute('data-name')
  • 如果该值是形式data-name也可以访问$(element).data(name)element.dataset['name']element.dataset.name
  • 经检查在元件上可见
  • 不能是对象

数据集 .data()

  • 访问.data(name)
  • 无法从.attr()其他地方访问
  • 经检查在元素上不公开可见
  • 可以是对象

您可以使用data-*属性嵌入自定义数据。这些data-*属性使我们能够在所有HTML元素上嵌入自定义数据属性。

jQuery .data()方法允许您以对循环引用(因此对内存泄漏)安全的方式获取/设置DOM元素的任何类型的数据。

jQuery .attr()方法的get / set属性值仅适用于匹配集中的第一个元素。

例:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");
本文地址:http://javascript.askforanswer.com/jqueryshujuyuattr.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!