<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>prop</title>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
margin-top: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
/*
1.prop方法
// 作用：获取或者设置属性节点的值
// 可以传递一个参数，也可以传递两个参数
// 如果传递一个参数，代表获取属性节点的值
// 如果传递两个参数代表设置属性节点的值
和attr方法一致
2.removeProp方法
和removeProp方法一致
*/
$("span").eq(0).prop("demo","it6");
$("span").eq(1).prop("demo","wf");
console.log($("span").prop("demo"));
$("span").removeProp("demo");
console.log($("span").prop("demo"));
// 注意点：
// prop方法不经能够操作属性，他还能操作属性节点
console.log($("span").prop("class"));//span1
$("span").prop("class","box");
console.log($("span").prop("class"));//box
// 什么时候用attr什么时候用prop
// 官方推荐操作属性节点是，具有true和false两个属性的属性节点
// 如checke selected或者disabled使用prop（）其他使用attr
console.log($("input").prop("checked"));//ttue
console.log($("input").attr("checked")); //checked
})
</script>
</head>
<body>
<span class="span1" name="sp"></span>
<span class="span2" name="spa"></span>
<input type="checkbox" checked>
</body>
</html>
