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