操作属性：

  • html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
  • DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
  • 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
  • 元素值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()和removeAttr()

是对html文档中的属性进行读取，设置和移除操作

//获取值：attr()设置一个属性值的时候 只是获取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $('div').attr('class','box')
        //2.设置多个值，参数为对象，键值对存储
        $('div').attr({name:'hahaha',class:'happy'})
举例如下：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//设置属性class
				$("#d1").attr("class","box");
				//设置属性id
				$(".box1").attr("id","d2");
			  //同时设置多个属性
				$("div").attr({id:"d3",class:"box3"})
				//删除单个属性
				$('#box1').removeAttr('name');
				
				//删除多个属性
				$('#box').removeAttr('id，class');
				
			})
			
		</script>
	</head>
	<body>
		<div id="d1" name="name1">div1</div>
		<div class="box1" name="name2">div2</div>
		<div>div3</div>
		
	</body>
</html>

prop()

prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
语法：

//返回属性的值：
$(selector).prop(property)
//设置属性和值：
$(selector).prop(property,value)
//设置多个属性和值：
$(selector).prop({property:value, property:value,...})

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">
	    
		$(function(){
	        //获取第一个input
	        var el = $('input').first();
	        //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
	        console.log(el.attr('style'));
	        // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
	        console.log(el.prop('style'));
	        console.log(document.getElementById('test').style);
	
	        $('button').click(function(){
	            alert(el.prop("checked") ? "男":"女");
	        })
	        
	
	
	    })
	</script>
</head>
<body>
	
	<!-- 单选框 -->
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    
    
</body>
</html>

什么时候使用attr()，什么时候使用prop()？

  1. 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
  2. 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
    对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法

上面的描述也许有点模糊，举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"