一、操作元素属性
1.获取元素的属性
attr() prop()
例1：CSS样式：<input type="button" value="按钮" width="0">
使用如下：
//attr可以获取其width
$("input[type='button']").attr("width", "200px");
console.log($("input[type='button']").attr("width")); //200px
//prop不可以获取其width
$("input[type='button']").prop("width", "300px");
console.log($("input[type='button']").prop("width")); //0
2.设置元素的属性
语法格式：attr(key,value);
其中，key表示属性的名称，value表示属性的值。如果要设置多个属性，也可通过attr()方法实现，其语法格式：attr({key0:value0,key1:value1})
(1)设置其自带属性
attr prop 有可有不可
例2：CSS样式：<input type="button" value="按钮" width="0">
使用如下：
/*一次设置多个属性值*/
//attr可以设置其width
$("input[type='button']").attr({
width: "100px",
value: "易安"
});
console.log($("input[type='button']").attr("width")); //100px
//prop不可以设置其width
$("input[type='button']").prop({
width: "100px",
value: "易安"
});
console.log($("input[type='button']").prop("width")); //0
（2）设置自定义属性
attr prop 均可
例3：CSS样式：<input type="button" value="按钮" width="0">
使用如下：
var btn = $("input[type='button']");
btn.attr("data-src", "./image/1.jpg");
console.log(btn.attr("data-src")); //./image/1.jpg
btn.prop("data-src", "./image/1.jpg");
console.log(btn.prop("data-src")); //./image/1.jpg
3.删除元素的属性
语法格式：removeAttr(name);
其中，name为元素属性的名称
（1）removeAttr() 可以移除自定义与自带属性
例4：CSS样式：<input type="button" value="按钮" width="0">
使用如下：
var btn = $("input[type='button']");
btn.removeAttr("data-src");
console.log(btn.attr("data-src")); //undefined
btn.removeAttr("value");
console.log(btn.attr("value")); //undefined
（2）removeProp()只能移除自定义属性
例5：CSS样式：<input type="button" value="按钮" width="0">
使用如下：
var btn = $("input[type='button']");
btn.removeProp("data-src");
console.log(btn.prop("data-src")); //undefined
二、元素内容的操作
1.html()：获取或设置元素的HTML内容
例6：CSS样式：<div id="block"><span>困！</span></div>
使用如下：
console.log($("#block").html()); //<span>困！</span>
$("#block").html("欢迎");
2.text()：获取或设置元素的文本内容
例7：CSS样式：<div id="block"><span>困！</span></div>
使用如下：
console.log($("#block").text()); //困！
$("#block").text("欢迎");
注：html()和text()方法的区别如下：
三、操作表单元素的值
val()：获取或设置表单元素的value值
例8：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：
$("#txt").val("12345");
console.log($("#txt").val()); 12345
四、元素样式的操作
1.直接设置元素样式值
（1）css() ：获取或设置元素的样式
语法格式：css(name,value);
其中，name为样式名称，value为样式的值
例9：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：$("#txt").css("borderColor", "#090a0a"); //设置css样式
（2）同时设置多个样式属性
例10：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：
$("#txt").css({
width: "",
height: ""
});
案例：将rgb值装换为十六进制的值
CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：
$("#txt").css("borderColor", "#090a0a"); //设置css样式
var color = $("#txt").css("borderColor");
var col = (function (c) {
console.log(c); //rgb(9, 10, 10)
var a = c.split(","); //a=["rgb(9", " 10", " 10)"]
var r = parseInt(a[0].split("(")[1]); //9
var g = parseInt(a[1]); //10
var b = parseInt(a[2].split(")")[0]); //10
return "#" + ((r << 16) + (g << 8) + b).toString(16);
})(color);
console.log(col); //#90a0a
2.增加css类别
（1）addClass()：增加元素类别名称
语法格式：addClass(class);
其中，class为类别的名称
（2）可增加多个类别的名称，需用空格将其隔开
语法格式：addClass(class0 class1 …);
例11：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：
$("#btn").addClass("btninfo"); /*添加一个类*/
$("#btn").addClass("btninfo btnlist"); /*添加多个类*/
3.类别切换
toggleClass()：切换不同的元素类别
语法格式：toggleClass(class);
其中，class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别，即有则删无则加。
例12：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：$("#btn").toggleClass("btndata");
4.删除类别
removeClass()：删除类别
语法格式：removeClass(class);
其中，class为类别名称，该名称是可选项，当选该名称时，则删除名称为class的类别，多个类别时用空格隔开；若不选名称，则全部移除
例13：CSS样式：<input type="text" value="请输入..." id="txt">
使用如下：
$("#btn").removeClass("btndata btnlist"); /*移除类名称*/
$("#btn").removeClass(); /*全部移除*/