jQuery 实战读书笔记之第四章：使用特性、属性和数据

使用属性

/*

每个元素都有一或多个特性，，这些特性的用途是给出相应元素或其内容的附加信息。（出自 JavaScript 高级程序设计）

*/

/*

特性是固有的 JavaScript 对象

属性指的是在标记中指定的 DOM 元素值

属性值的类型始终是字符串

*/

/*

如果属性存在相应的 DOM 的内置特性值，那么对象特性被同步

如果属性作为一个内建属性存在并且是一个布尔值，那么该值不会被同步

*/

var checkbox = document.getElementById('checkbox-1');

//属性在没有初始值的情况下为 null

console.log('The value of attribute of title: ' + checkbox.getAttribute('title'));

//特性在没有初始值的情况下为空

console.log('The value of property of title: ' + checkbox.title);

console.log(checkbox.getAttribute('title') === checkbox.title);

checkbox.title = 'New title!';

console.log(checkbox.getAttribute('title') === checkbox.title);

checkbox.setAttribute('title', 'Another title!');

console.log(checkbox.getAttribute('title') === checkbox.title);

/*

属性如果没有显式设置就是 null，而属性则根据类型有默认值

*/

console.log('The value of attribute of checked: ' + checkbox.getAttribute('checked'));

console.log('The value of property of checked: ' + checkbox.checked);

console.log(checkbox.getAttribute('checked') === checkbox.checked);

/*

对属性支持的检测

*/

if('required' in document.createElement('input')){

console.log('The property of required is supported!')

}else{

console.log('The property of required is not supported!')

}

/*

attr(name)

获取第一个匹配元素的属性值，属性名称大小写不敏感（JavaScript 本身是区分大小写的）

如果没有匹配元素或没有值，返回 undefined

*/

var attrValue = $('#li1').attr('data-level');

console.log('id 为 li1 的 li 元素的 data-level 属性值为 ' + attrValue);

/*

如果属性不存在，返回的是 undefined

*/

var liName = $('#li1').attr('name');

console.log('id 为 li1 的 li 元素的 name 属性值为 ' + liName);

/*

attr(name, value)

value(String|Number|Boolean|Function)：除非设置的是函数，否则都会转换为字符串；函数的话，每个元素都会调用函数，传递的参数为

元素的索引和当前命名属性的值

返回 jQuery 集合

*/

var $titles = $('[title]').attr('title', function(index, previousValue){

return previousValue + ' I am element ' + index +

' and my name is ' + (this.id || 'unset');

});

console.log($titles);

/*

attr(attributes)

一次指定多个属性值

*/

var $inputs = $('input:not(:submit)').attr({

value: '',

title: 'Please enter a value'

});

console.log('设置属性后的 input：');

console.log($inputs);

/*

removeAttr(name)

删除属性

name(String)：要删除的属性名称或者名称的集合，用空格分割

删除属性并不会删除 DOM 元素对应的特性

方法内部使用了 JS 的 removeAttribute()

返回的还是 jQuery 集合

*/

var $imgAfterDelAttr = $('img').removeAttr('title alt');

console.log('删除 title 和 alt 属性后的 img 集合： ');

console.log($imgAfterDelAttr);

/*

可以使用 attr() 方法处理特性，也可以使用 prop() 方法

*/

/*

prop(name)

获取匹配集合中第一个元素给定的特性值

name(String)

如果没有匹配元素或没有值，返回 undefined

*/

console.log('id 为 checkbox-3 的 checkbox 的 checked 特性值：' + $('#checkbox-3').prop('checked'));

/*

prop(name, value)

为集合的所有元素设置给定命名的特性和值

name(String)

value(Any|Function)，如果是函数，传递的参数是集合中元素的索引及命名的属性的当前值

*/

$('input:checkbox').prop('checked', function(index, attrValue){

if(index % 2 == 0){

console.log(attrValue);

//attrValue = true; //这样设置了没有起作用

$(this).prop('checked', true);

}

});

/*

prop(properties)

properties(Object)

*/

$(':submit').prop({

disabled: true,

class: 'red-border'

});

/*

removeProp(name)

删除集合中每个元素的特性

name(String)：不支持以空格分割的名称列表

这个方法不应该用来删除原生特性，比如 required 和 checked，删除后无法再次添加

*/

$('#checkbox-4').removeProp('checked').prop('checked', true); //啥情况？？？

/*

data(name, value)

为集合中的所有元素添加传递的数据

name(String)

value(Any)：除了 undefined

可以保存数据的类型

*/

$('#li4').data('last-value', 10);

console.log(typeof $('#li4').attr('lastValue')); //undefined???说好的 String 呢？ last-value 转换为 lastValue 是 jQuery3 修改的

console.log(typeof $('#li4').data('last-value'));

/*

对自定义属性 data-technologies 的两种读法

*/

console.log($('#li4').attr('data-technologies'));

console.log($('#li4').data('technologies'));

/*

data(Object)

略

*/

/*

jQuery.data() 等价的低级方法 $.data()

*/

$.data(document.getElementById('li3'), 'price', 55);

$('#li2').data('price', 55);

/*

data([name])

使用指定的名字查询存储的数据或 HTML5 data-* 属性，如果没有指定名字，返回所有存储的数据

name(String)

如果没有匹配元素或没有值，返回 undefined

*/

console.log($('#li2').data('price'));

console.log($('#li4').data()); //只取了 data-* 开头的数据和用 data(name, value) 设定的数据

/*

jQuery 有一个存储区，是存储 jQuery 内部使用的存储数据的区域

data() 方法会先查找内存中的数据，找不到才会用指定的名字去查找 HTML 元素的 data-* 属性，如果找到了那么就会把

值存放到内存中，所以之后用 attr() 对该属性做修改再用 data() 取还是内存中的数据

*/

console.log($('#level').data('custom'));

console.log($('#level').attr('data-custom'));

$('#level').data('custom', 'new value');

console.log($('#level').data('custom'));

console.log($('#level').attr('data-custom')); //这里读到的还是老的“foo”，上面的语句修改的是内存中的吗？？？

/*

removeData([name]) == $.removeData(element[, name])

name(String|Array) 要删除的数据的数据名，包括名字或以空格分割的名字，也可以是数组；如果没有参数，删除所有数据

*/

$('#li3').removeData('custom', 'technologies');

$('#li3').removeData('custom technologies');

/*

jQuery.hasData(element)

*/

console.log('id 为 li4 的元素是否包含自定义数据：' + $.hasData(document.getElementById('li4')));