属性操作
JQuery中封装了一些HTML标签属性的操作，可以用来简化原生JS中对HTML标签的操作，对这些封装的方法进行分类的话，大致可以分为适用于一般属性的操作（通用的）和专门针对于类属性的操作，常用的共有下面的这些：
通用属性操作
-
attr：这种一般用于不是检查DOM状态的一些属性，比如src，CSS相关的一些属性等。
-
JQuery对象.attr(“属性名称”, “值”): 当只有一个参数时获取属性的值，当出入value参数时设置属性的值。
-
JQuery对象.removeAttr(“属性名称”): 将对应的属性从对应的组件中移除。
-
语法：$(selector).attr(“key”, “value”);
示例：
var src = $("img").attr("src"); //获取值 $("img").attr("src", img_path); //设置值 $("img").removeAttr("src"); //移除src属性 -
-
prop：一般用于组件中的checked，disabled，selected等属性的操作。
-
JQuery对象.prop(“属性名称”, “值”)：当只有一个参数时获取属性的值，当出入value参数时设置属性的值。
-
JQuery对象.removeProp(“属性名称”): 将对应的属性从对应的组件中移除。
-
语法：$(selector).prop(“key”, “value”);
示例：
<input type="checkbox" checked="checked" /> <script> $("input").prop("checked"); //获取checkbox的选中状态 $("input").prop("checked", false); //设置为没有选中状态 $("input").prop({ checked:false}); //使用对象的方式也是可行的 $("input").removeProp("checked"); //移除由.prop设置的属性 </script>
-
关于prop和attr对一些内置属性的使用效果：以此为例，表格右边的是方法返回值的情况：
elem.checked |
true (Boolean) 将随着复选框状态的改变而改变 |
|---|---|
$(elem).prop("checked") |
true (Boolean) 将随着复选框状态的改变而改变 |
$(elem).getAttribute("checked") |
"checked" (String) 复选框的初始状态;不会改变 |
$(elem).attr("checked") (1.6) |
"checked" (String) 复选框的初始状态;不会改变 |
$(elem).attr("checked") (1.6.1+) |
"checked" (String) 将随着复选框状态的改变而改变 |
$(elem).attr("checked") (pre-1.6) |
true (Boolean) 将随着复选框状态的改变而改变 |
注意：在1.x版本中attr是可以设置，获取内置的属性如checked等的，但是新的版本3.x已经不允许了，只能用prop来获取，所以在对内置属性进行操作的时候建议使用prop来进行操作。
Class类属性操作
可以使用JQuery中封装的方法很便捷的给组件class属性添加属性值，比如添加多个CSS类来给组件添加样式等，常用的有：
- $(selector).addClass(“className”): 会将对象的类属性值添加到对应的对象中.
- $(selector).removeClass(“className”):将对象的类属性值删除.
- $(selector).toggleClass(“className”):改变对象的类属性值的状态，如果已经有该值了，删除该值，如果没有，添加该值，可以用此来进行属性的翻转。–》点击按钮属性改变样式~
- $(selector).css(key, value):设置元素的样式.
示例：
<style>
.class1{
width:100px; height:100px;}
.class2{
border:1px solid blue; border-radius:10%;}
.class3{
backgound-color:pink;}
</style>
<script>
//一般适用时都是通过对应的方法来进行动态设置样式
$("div").addClass("class2"); //添加class2样式
$("div").removeClass("class1"); //移除class1样式
$("div").toggleClass("class3"); //由于div中class属性中原本没有class3值，则会添加
$("div").css("backgroundColor", "yellow"); //设置背景色为yellow
</script>
<body>
<div class="class1">
这是一个div
</div>
</body>
属性值操作
- $(selector).html(): 获取元素的html值，跟JS原生对象中的innerHTML一样，
- $(selector).text(): 获取元素的文本值
- $(selector).val(“value”): 传递value参数时可以设置value属性的值，没有时获取value属性的值，可以用于input标签中
.html()与.text()的区别：
<div><p>“这片大海不可能一直自己一个人的”</p></div>
<input value="">
<script>
$("div").html(); //会获取div内置中所有的内容，即整个p标签
$("div").text(); //只会获取“这片大海不可能一直自己一个人的” 这段文本内容
$("input").val("hello jquery"); //可以设置input输入框的内容为 hello jquery
</script>