jQuery in action 3rd - Working with properties, attributes, and data

properties

  properties 是 JavaScript 对象内在的属性,可以进行动态创建,修改等操作。

attributes

  指的是 DOM 元素标记出来的属性,不是实例对象的属性。

  例如:<img id="my-image" src="batter.png" title="This is an image" />,id、src、title 都是 img 元素的 attributes

[二者的区别]

  attributes 返回的值类型总是 string 字符串;

  properties 返回的值类型有 Booleans、numbers、objects

attr()

  jQuery in action 3rd - Working with properties, attributes, and data

  示例,

<img id="my-image" src="butter.png" data-custorm="some value" />
$('#my-image').attr('data-custom');
$('[title]').attr('title', function(index, prevValue) {
    return prevValue + " " + index + " " + this.id;
});

$('input').attr({
    value: ' ',
    title: 'please enter a value'
});

 removeAttr()

  jQuery in action 3rd - Working with properties, attributes, and data

prop() 与 attr()的方法相同,

  jQuery in action 3rd - Working with properties, attributes, and data

使用 data() 方法给 jQuery() 对象设置一些缓存值,同时,也可以操作 DOM 元素标记中以“data-*”开头的属性。

  例如,<input id="mado" type="text" value="I'm a ..." data-level="foo" />

  可以使用 $("#mado").attr("data-level"); 获取值,

  也可以使用 $("#mado").data("level"); 获取值,此时的参数名称,可以去掉“data-”,jQuery 会自动识别。

  data()方法的底层解析过程,实际如下:

  jQuery in action 3rd - Working with properties, attributes, and data

  可以使用 jQuery.data() 或者 $.data()方法保存一些全局的缓存数据,供后期使用。

    例如,$.data('daji', ['a', 'b', 'c']);

  比如,要给 ID 为 book 元素保存一个缓存值,那么可以如下:

    $.data(document.getElementById('book'), 'price', 10);

  如果要获取 book 元素的值,则:

    $("#book").data('price');

  data()的相关方法如下,

  jQuery in action 3rd - Working with properties, attributes, and data

jQuery.hasData()

  检测元素的标签中是否定义了 “data-*” 属性? 或者是否通过 data() 方法给元素对象设置过自定义数据?

  jQuery in action 3rd - Working with properties, attributes, and data

 

  

  

上一篇:【转】DevOps的前世今生


下一篇:mysql建表: 主键,外键约束