jQuery 属性和属性节点(attr prop)

属性和属性节点的区别
任何对象都有属性，但是只有DOM对象才有属性节点
怎样操作属性节点

//获取属性节点
dom元素.getAtribute('属性名称');
//设置属性节点
dom元素.setAttribute('属性名称','值');

属性节点的方法

1. attr方法
   作用：获取或者设置属性节点的值
   可以是一个或者两个参数
   一个参数就是获取节点的值；两个参数就是设置节点的值；
   • 获取时：无论找到多少个元素，都只会返回第一个元素的属性节点值
   • 设置时：找到多少个，设置多少个
   • 如果设置的属性节点不存在，就是新增

<script>
	$(function(){
	var $res = $('.span1').attr('lmx');
	console.log($res); //获取
	
	$('.span1').attr('lmx','ainiyou~');
	$('.span2').attr('lmx','box1 box2'); //设置
})
</script>

2. removeAttr方法
   删除所有找到元素的属性节点
3. prop方法
   不仅能操作属性，还能操作属性节点
   操作属性节点时，具有true和fals额两个属性的属性节点，如checked

4.removeProp方法

<script>
	$(function(){
	$('span').prop('demo','lmx'); //设置属性
	console.log($('span').prop('demo')); //获取属性
	$('span').prop('demo'); //删除属性
})
</script>

attr和prop的区别

<script>
$(function(){
	console.log($('.span1').prop('class')); //通过prop获取属性节点
	$('.span1').prop('class','lmx')  //通过prop设置属性节点

	//如果没有默认值，那么attr获取返回undefined，prop获取返回false
	console.log($('input[type=checkbox]').attr('checked'));  //undefined
	consoel.log($('input[type=checkbox]').prop('checked'))  //false

	//设置选中
	$('input[type=checkbox]').attr('checked',true)
	$('input[type=checkbox]').prop('checked',true)
})
</script>