3.jQuery操作元素的特性和属性

其实特性和属性区别并不大，都会被翻译成属性，所以不用刻意去区分两者，可以统一叫属性。

获取特性的值: attr(name)
设置特性的值:attr(name, value) attr(attributes)
删除特性:removeAttr(name)

<img id="logo" src="logo.jpg" alt="jQuery logo" class="img-jquery" title="jQuery logo"/>
<img id="logo2" src="logo.jpg" alt="jQuery logo2" class="img-jquery2" title="jQuery logo2"/>
<input type="checkbox" id="check " tabindex="1" style="width: 5px; height: 50px;" title="check this!" description="just a checkbox" checked="true" />

$(function () {
	var img = $( 'img');  //这里的img包含2个元素
	console .log(img.attr( 'title '));//但这里只获取了第一个元素
	console .log(img.attr( 'title ','123'));
	console .log(img.attr( 'title '));//变为123
	//这里面的title是不区分大小的，可以写成TITLE,Title,TiTLE等都可以

	var img = $( '#check');  //
	console .log(checkbox.attr( 'checked '));//获取checked，不是true，去掉true也是checked，如果没有checked则返回undefined

	checkbox.checked=true;
	console.log(checkbox.attr('checked'));//undefined
	console.log(checkbox.checked);//true
	//传入一个对象来设置特性值
	img.attr({ 
		title:'new',
		alt:'al',
		tAbINDEX:2//jQuery会自动将其转换为字符串
	});
	//传入一个函数
	img.attr('title'， function(index, previousValue){
	console.log(previousValue)  //打印的是每一个值
	return prewiousValue + 'new';
	});
	//删除
	img.removeAttr( 'title ')
	img.removeAttr( 'title alt src')//一次删除多个特性
})

$(function(){
	var img = $( 'img');  //这里的img包含2个元素
	var checkbox = $( '#check');
	console .log(checkbox.prop( 'checked'));//false
	console .log(checkbox.checked);//undefined,因为这里checkbox是jQuery对象，不是DOM对象
	console .log(checkbox.get(0).checked);//转换为DOM之后获取为false
	console .log(checkbox.attr( 'checked'));//undefined
})

这里属性区分大小写
当然也有对应的删除属性：removeProp(name)
但一次只能删除一个属性，会变成undefined

checkbox.data( 'lastDesc ', 'some desc ')//这里lastDesc也可以改为中间加横杠，但不要把首字母大写，也可以全改为小写
console.log(checkbox.data( 'lastDesc ' ))
console.log(checkbox.data( 'last-desc '))
//获取的首字母要和设置属性的首字母大小写相同

data可以保留设置的数据类型，Boolean则为boolean，不会转换为字符串

img.data( 'data1', 'new')
console.log(img.data())//这里获取的是上一行设置的new，优先级比html里的高

当然也有
删除数据: removeData([name])

console.log(checkbox.removData( 'alt' ))//当不传时则全删除

判断是否有数据:jQuery.hasData(element)
element为一个DOM对象

console.log($.hasData(img))//传入jQuery对象时返回false
console.log($.hasData(img.get(0)))//转换为DOM对象则返回true